File Manager

Editing File: /home/ubuntu/voice-assistant-frontend/src/components/Voice/VoiceLabListIndex.jsx

import LandingFooterIndex from "../layouts/Footer/LandingFooterIndex";
import React, { useEffect, useState } from "react";
import { Form, Button, Image, InputGroup, Row, Col, Container } from "react-bootstrap";
import { useTranslation } from "react-multi-lang";
import { useDispatch, useSelector } from "react-redux";
import { setSelectedVoice, voiceListStart } from "../../store/slices/VoiceSlice";
import VoiceLabEmpty from "../EmptyPages/VoiceLabEmpty";
import VoiceLoader from "../Helper/VoiceLoader";
import DeleteVoiceModal from "./DeleteVoiceModal";
import AddVoiceModal from "./AddVoiceModal";
import { phraseListStart } from "../../store/slices/PhraseSlice";
import { useNavigate } from "react-router-dom";
import EditVoiceModal from "./EditVoiceModal";

const VoiceLabListIndex = (props) => {
  const t = useTranslation("voice_list");
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const voiceList = useSelector((state) => state.voice.voiceList);
  const [deleteVoiceModal, setDeleteVoiceModal] = useState(false);
  const [addVoiceModal, setAddVoiceModal] = useState(false);
  const [editVoiceModal, setEditVoiceModal] = useState(false);
  const selectedVoice = useSelector((state) => state.voice.selectedVoice);

useEffect(() => {
    dispatch(voiceListStart())
  }, []);

const closeDeleteVoiceModal = () => {
    setDeleteVoiceModal(false);
  }

const closeEditVoiceModal = () => {
    setEditVoiceModal(false);
  }

const closeAddVoiceModal = () => {
    setAddVoiceModal(false);
  }

return (
    <>
    {voiceList.loading ? (<VoiceLoader />) :
      (Object.keys(voiceList.data).length > 0 && voiceList.data.voices.length > 0) ? (
        <>
          <div className="landing-page-sec">
            <div className="voicelab-sec">
              <Container>
                <Row className="justify-content-md-center">
                  <Col md={8}>
                    <div className="voicelab-box">
                      <h3>{t("title")}</h3>
                      <p>{t("message")}</p>
                      <div className="voicelab-add-btn-sec">
                        <Button className="add-voicelab-btn"  onClick={() => setAddVoiceModal(true)}>
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                          >
                            <path
                              d="M19 12.998H13V18.998H11V12.998H5V10.998H11V4.998H13V10.998H19V12.998Z"
                              fill="url(#paint0_linear_67_3432)"
                            />
                            <defs>
                              <linearGradient
                                id="paint0_linear_67_3432"
                                x1="12"
                                y1="4.998"
                                x2="12"
                                y2="18.998"
                                gradientUnits="userSpaceOnUse"
                              >
                                <stop stop-color="#5575FF" />
                                <stop offset="1" stop-color="#8F59FC" />
                              </linearGradient>
                            </defs>
                          </svg>
                          <span>{t("add")}</span>
                        </Button>
                      </div>
                      <div className="voicelab-list-box">
                        {voiceList.data.voices.map(
                          (voice, i) => (
                            <div className="voicelab-list-card" key={i}>
                              <div className="voicelab-list-info">
                                <h4>{voice.name}</h4>
                              </div>
                              <div className="voicelab-list-action-btn-sec">
                                <Button onClick={()=> {
                                  dispatch(setSelectedVoice(voice))
                                  navigate("/generate-voice")
                                }}
                                  className="voicelab-list-action-btn">
                                  <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="20"
                                    height="20"
                                    fill="none"
                                    viewBox="0 0 11 14"
                                  >
                                    <path
                                      stroke="url(#paint0_linear_69_3566)"
                                      strokeLinecap="round"
                                      strokeLinejoin="round"
                                      strokeWidth="2"
                                      d="M5.5 1.441V12.56M1 4.979V9.148m9-5.56v6.95"
                                    ></path>
                                    <defs>
                                      <linearGradient
                                        id="paint0_linear_69_3566"
                                        x1="5.5"
                                        x2="5.5"
                                        y1="1.441"
                                        y2="12.559"
                                        gradientUnits="userSpaceOnUse"
                                      >
                                        <stop stopColor="#5575FF"></stop>
                                        <stop offset="1" stopColor="#8F59FC"></stop>
                                      </linearGradient>
                                    </defs>
                                  </svg>
                                  <span>{t("use")}</span>
                                </Button>
                                <Button className="voicelab-list-action-btn">
                                  <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="icon icon-tabler icon-tabler-player-play"
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    stroke-width="2"
                                    stroke="currentColor"
                                    fill="none"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                  >
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M7 4v16l13 -8z" />
                                  </svg>
                                </Button>
                                <Button className="voicelab-list-action-btn" onClick={()=> setEditVoiceModal(voice.unique_id)}>
                                  <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="icon icon-tabler icon-tabler-edit"
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    stroke-width="2"
                                    stroke="currentColor"
                                    fill="none"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                  >
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
                                    <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
                                    <path d="M16 5l3 3" />
                                  </svg>
                                </Button>
                                <Button className="voicelab-list-action-btn" onClick={() => setDeleteVoiceModal(voice.unique_id)}>
                                  <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="icon icon-tabler icon-tabler-trash"
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    stroke-width="2"
                                    stroke="#FF4D4D"
                                    fill="none"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                  >
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M4 7l16 0" />
                                    <path d="M10 11l0 6" />
                                    <path d="M14 11l0 6" />
                                    <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                                  </svg>
                                </Button>
                              </div>
                            </div>
                          ))}
                      </div>
                    </div>
                  </Col>
                </Row>
              </Container>
            </div>
            <LandingFooterIndex />
          </div>
        </>
      ) : (
        <VoiceLabEmpty addVoiceModal={addVoiceModal} setAddVoiceModal={setAddVoiceModal} />
      )}
      {deleteVoiceModal && <DeleteVoiceModal
        deleteVoiceModal={deleteVoiceModal}
        closeDeleteVoiceModal={closeDeleteVoiceModal}
        setDeleteVoiceModal={setDeleteVoiceModal}
      />}
      {addVoiceModal && <AddVoiceModal
        addVoiceModal={addVoiceModal}
        closeAddVoiceModal={closeAddVoiceModal}
        setAddVoiceModal={setAddVoiceModal}
      />}
      {editVoiceModal && <EditVoiceModal
        addVoiceModal={editVoiceModal}
        closeAddVoiceModal={closeEditVoiceModal}
        setAddVoiceModal={setEditVoiceModal}
      />}
    </>
  )
};

export default VoiceLabListIndex;

Back to Directory File Manager