voices/datasets toggle changes, Pageheader accepts button object, bug fixes

packages/fakeyou.com/src/components/common/Button/Button.tsx

@@ -1,28 +1,11 @@
-import React, { ButtonHTMLAttributes } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 import "./Button.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import ButtonProps from "./ButtonProps";
 import Tippy from "@tippyjs/react";
 import "tippy.js/dist/tippy.css";
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  label?: string | null;
-  icon?: IconDefinition;
-  small?: boolean;
-  variant?: "primary" | "secondary" | "danger" | "link";
-  to?: string;
-  href?: string;
-  target?: "_blank" | "_self";
-  square?: boolean;
-  tooltip?: string;
-  full?: boolean;
-  iconFlip?: boolean;
-  download?: boolean | string;
-  disabled?: boolean;
-  isLoading?: boolean;
-}
-
 export default function Button({
   label,
   icon,

packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes } from "react";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+export default interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label?: string | null;
+  icon?: IconDefinition;
+  small?: boolean;
+  variant?: "primary" | "secondary" | "danger" | "link";
+  to?: string;
+  href?: string;
+  target?: "_blank" | "_self";
+  square?: boolean;
+  tooltip?: string;
+  full?: boolean;
+  iconFlip?: boolean;
+  download?: boolean | string;
+  disabled?: boolean;
+  isLoading?: boolean;
+}

packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx

@@ -3,6 +3,7 @@ import Panel from "../../common/Panel";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import Button from "components/common/Button";
+import ButtonProps from "components/common/Button/ButtonProps";
 import BackButton from "components/common/BackButton";
 
 interface BackConfig {
@@ -19,6 +20,7 @@ interface PageHeaderProps {
   showButton?: boolean;
   extension?: React.ReactNode;
   buttonLabel?: string;
+  button?: ButtonProps;
   buttonVariant?: "primary" | "secondary" | "danger";
   buttonTo?: string;
   buttonIcon?: IconDefinition;
@@ -38,6 +40,7 @@ export default function PageHeader({
   full,
   showButton,
   extension,
+  button,
   buttonLabel,
   buttonVariant = "primary",
   buttonTo,
@@ -49,10 +52,22 @@ export default function PageHeader({
   backbuttonTo,
   backbuttonLabel,
 }: PageHeaderProps) {
+
   const icon = (
     <>{titleIcon && <FontAwesomeIcon icon={titleIcon} className="me-3" />}</>
   );
 
+  const buttonProps = {
+    ...button ? button : {},
+    ...buttonIcon && { icon: buttonIcon },
+    ...buttonLabel && { label: buttonLabel },
+    ...buttonOnClick && { onClick: buttonOnClick },
+    ...buttonTo && { to: buttonTo },
+    ...buttonVariant && { variant: buttonVariant }
+  };
+
+  const HeaderBtn = () => button || showButton ? <Button { ...buttonProps }/> : null;
+
   if (!panel) {
     return (
       <div className="py-3 py-lg-4">
@@ -80,15 +95,9 @@ export default function PageHeader({
                   {subText}
                 </p>
               </div>
-              {showButton && (
+              { ( button || showButton ) && (
                 <div className="d-md-flex">
-                  <Button
-                    icon={buttonIcon}
-                    variant={buttonVariant}
-                    label={buttonLabel}
-                    to={buttonTo}
-                    onClick={buttonOnClick}
-                  />
+                  <HeaderBtn />
                 </div>
               )}
             </div>
@@ -125,15 +134,7 @@ export default function PageHeader({
                 {title}
               </h1>
               <div className="d-none d-md-block">
-                {showButton && (
-                  <Button
-                    icon={buttonIcon}
-                    variant={buttonVariant}
-                    label={buttonLabel}
-                    to={buttonTo}
-                    onClick={buttonOnClick}
-                  />
-                )}
+                <HeaderBtn />
               </div>
             </div>
             <p>{subText}</p>

packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx

@@ -53,7 +53,7 @@ export default function DatasetEditor({ value }: Props) {
     } else {
       datasets.create({
           title,
-          creator_set_visibility: language,
+          creator_set_visibility: visibility,
           idempotency_token: uuidv4(),
       });
     }

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx

@@ -1,43 +1,35 @@
 import React, { useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import { faPlus, faWaveform } from "@fortawesome/pro-solid-svg-icons";
 // import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 import Panel from "components/common/Panel";
 import PageHeader from "components/layout/PageHeader";
 import Container from "components/common/Container";
-import { Route, NavLink, Switch, Redirect } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import ListItems from "./components/NewList";
 import Modal from "components/common/Modal";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-// import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { faMicrophone } from "@fortawesome/pro-solid-svg-icons";
 import useVoiceRequests from "./useVoiceRequests";
 
-// interface Props {
-//   sessionWrapper: SessionWrapper;
-// }
-
 function VoiceDesignerMainPage() {
-
+  const { pathname } = useLocation();
   const { datasets, voices } = useVoiceRequests();
-
-  console.log("😎",voices);
-
   const [isDeleteVoiceModalOpen, setIsDeleteVoiceModalOpen] = useState(false);
-  const [isDeleteDatasetModalOpen, setIsDeleteDatasetModalOpen] =
-    useState(false);
+  const [isDeleteDatasetModalOpen, setIsDeleteDatasetModalOpen] = useState(false);
+  const view = ["/voice-designer/datasets","/voice-designer/voices"].indexOf(pathname);
 
-  const openDeleteVoiceModal = () => {
-    setIsDeleteVoiceModalOpen(true);
-  };
+  // const openDeleteVoiceModal = () => {
+  //   setIsDeleteVoiceModalOpen(true);
+  // };
 
   const closeDeleteVoiceModal = () => {
     setIsDeleteVoiceModalOpen(false);
   };
 
-  const openDeleteDatasetModal = () => {
-    setIsDeleteDatasetModalOpen(true);
-  };
+  // const openDeleteDatasetModal = () => {
+  //   setIsDeleteDatasetModalOpen(true);
+  // };
 
   const closeDeleteDatasetModal = () => {
     setIsDeleteDatasetModalOpen(false);
@@ -93,39 +85,20 @@ function VoiceDesignerMainPage() {
     }
   });
 
-  function MyVoices() {
-    return (
-      <ListItems
-        type="voice"
-        data={actionVoices}
-        handleDeleteVoice={openDeleteVoiceModal}
-      />
-    );
-  }
-
-  function MyDatasets() {
-    return (
-      <ListItems
-        type="dataset"
-        data={actionDataSets}
-        //data={datasetList}
-        handleDeleteDataset={openDeleteDatasetModal}
-      />
-    );
-  }
+  const button = {
+    label: `Create new ${ view ? "voice" : "dataset" }`,
+    icon: faPlus,
+    to: "/voice-designer/create"
+  };
 
   return (
     <>
       <Container type="panel">
         <PageHeader
+         button={button}
           title="Voice Designer"
           titleIcon={faWaveform}
           subText="Create your own AI voice by providing audio files of the voice you want to clone."
-          showButton={true}
-          buttonLabel="Create New voice"
-          buttonVariant="primary"
-          buttonIcon={faPlus}
-          buttonTo="/voice-designer/create"
           panel={false}
           imageUrl="/images/header/voice-designer.png"
         />
@@ -157,15 +130,7 @@ function VoiceDesignerMainPage() {
           </nav>
 
           <div className="p-3 p-lg-4">
-            <Switch>
-              <Route path="/voice-designer/voices" exact component={MyVoices} />
-              <Route
-                path="/voice-designer/datasets"
-                exact
-                component={MyDatasets}
-              />
-              <Redirect to="/voice-designer/voices" />
-            </Switch>
+            <ListItems {...{ data: view ? actionVoices : actionDataSets }}/>
           </div>
         </Panel>
       </Container>

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/NewList.tsx

@@ -7,9 +7,6 @@ import "./ListItems/ListItems.scss";
 
 interface ListItemsProps {
   data: any[];
-  type: "voice" | "dataset";
-  handleDeleteVoice?: () => void;
-  handleDeleteDataset?: () => void;
 }
 
 interface ListItem {
@@ -55,7 +52,7 @@ const ItemRow = ({ badge: Badge, buttons, index, isCreating, name, ...rest }: Li
   </div>;
 };
 
-export default function NewList({ data,  handleDeleteDataset, type,  handleDeleteVoice, }: ListItemsProps) {
+export default function NewList({ data }: ListItemsProps) {
 
   const DataPlaceholder = () => <div className="d-flex flex-column list-items p-5 align-items-center">
     <h5 className="fw-semibold mb-3">

packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx

@@ -16,6 +16,7 @@ import { useSession } from "hooks";
 export default function useVoiceRequests() {
   const [datasets, datasetsSet] = useState<Dataset[]>([]);
   const [voices, voicesSet] = useState<Voice[]>([]);
+  const [fetched,fetchedSet] = useState(false);
   const { user } = useSession();
 
   // voices
@@ -55,7 +56,8 @@ export default function useVoiceRequests() {
   };
 
 	useEffect(() => {
-    if (user && user.username) { 
+    if (!fetched && user && user.username) {
+      fetchedSet(true);
       if (!datasets.length) {
         ListDatasetsByUser(user.username,{}).then(res => {
           if (res.datasets) datasetsSet(res.datasets);
@@ -68,7 +70,7 @@ export default function useVoiceRequests() {
       }
     }
 
-	},[user, datasets, voices]);
+	},[fetched,user, datasets, voices]);
 
   return { 
   	datasets: {