feat(template-campaigns): wip, move library dialog to template campai…

…gns, add speed dial
politics-rewired · Aug 22, 2023 · c0e7835 · c0e7835
1 parent c06da31
commit c0e7835
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 32 deletions.
diff --git a/src/containers/AdminCampaignList.jsx b/src/containers/AdminCampaignList.jsx
@@ -6,7 +6,6 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import CreateIcon from "@material-ui/icons/Create";
 import FileCopyIcon from "@material-ui/icons/FileCopyOutlined";
-import LibraryAddOutlinedIcon from "@material-ui/icons/LibraryAddOutlined";
 import SpeedDial from "@material-ui/lab/SpeedDial";
 import SpeedDialAction from "@material-ui/lab/SpeedDialAction";
 import SpeedDialIcon from "@material-ui/lab/SpeedDialIcon";
@@ -19,7 +18,6 @@ import { withRouter } from "react-router-dom";
 import { compose } from "recompose";
 
 import CreateCampaignFromTemplateDialog from "../components/CreateCampaignFromTemplateDialog";
-import CreateCampaignFromLibraryDialog from "../components/CreateFromLibraryDialog";
 import LoadingIndicator from "../components/LoadingIndicator";
 import theme from "../styles/theme";
 import { withAuthzContext } from "./AuthzProvider";
@@ -49,8 +47,7 @@ class AdminCampaignList extends React.Component {
     releasingInProgress: false,
     releasingAllReplies: false,
     releaseAllRepliesError: undefined,
-    releaseAllRepliesResult: undefined,
-    createFromLibraryOpen: false
+    releaseAllRepliesResult: undefined
   };
 
   handleClickNewButton = async () => {
@@ -292,23 +289,13 @@ class AdminCampaignList extends React.Component {
               tooltipTitle="Create from Template"
               onClick={() => this.setState({ createFromTemplateOpen: true })}
             />
-            <SpeedDialAction
-              icon={<LibraryAddOutlinedIcon />}
-              tooltipTitle="Create from Library"
-              onClick={() => this.setState({ createFromLibraryOpen: true })}
-            />
           </SpeedDial>
         ) : null}
         <CreateCampaignFromTemplateDialog
           organizationId={organizationId}
           open={this.state.createFromTemplateOpen}
           onClose={() => this.setState({ createFromTemplateOpen: false })}
         />
-        <CreateCampaignFromLibraryDialog
-          organizationId={organizationId}
-          open={this.state.createFromLibraryOpen}
-          onClose={() => this.setState({ createFromLibraryOpen: false })}
-        />
       </div>
     );
   }

diff --git a/src/components/CreateFromLibraryDialog.tsx → ...ns/components/CreateFromLibraryDialog.tsx b/src/components/CreateFromLibraryDialog.tsx → ...ns/components/CreateFromLibraryDialog.tsx
@@ -13,7 +13,7 @@ import React, { useCallback, useMemo, useState } from "react";
 // TODO - campaign variables
 type DefaultTemplateCampaign = Pick<
   Campaign,
-  "title" | "description" | "interactionSteps" | "campaignVariables"
+  "title" | "description" | "campaignVariables" | "interactionSteps"
 >;
 
 // TODO - hook up github page
@@ -22,21 +22,21 @@ const DUMMY_LIBRARY = [
     title: "GOTV",
     description: "a get out the vote campaign for your candidate or issue",
     interactionSteps: {
-      scriptOptions: [""]
+      scriptOptions: ["hi there"]
     }
   },
   {
     title: "Fundraising",
     description: "a fundraising campaign for your candidate or issue",
     interactionSteps: {
-      scriptOptions: [""]
+      scriptOptions: ["hiya"]
     }
   },
   {
     title: "Voter Reg",
     description: "a voter registration campaign for your area",
     interactionSteps: {
-      scriptOptions: [""]
+      scriptOptions: ["howdy!"]
     }
   }
 ];
@@ -54,7 +54,7 @@ export const CreateCampaignFromLibraryDialog: React.FC<CreateCampaignFromLibrary
   const [
     selectedTemplate,
     setSelectedTemplate
-  ] = useState<TemplateCampaignFragment | null>(null);
+  ] = useState<DefaultTemplateCampaign | null>(null);
   const [quantity, setQuantity] = useState<number | null>(1);
 
   // TODO
@@ -154,6 +154,7 @@ export const CreateCampaignFromLibraryDialog: React.FC<CreateCampaignFromLibrary
               // window.open(`/preview/${previewUrl}`, "_blank");
             }}
             size="small"
+            disabled={!selectedTemplate}
           >
             Open Script Preview
           </Button>

diff --git a/src/containers/AdminTemplateCampaigns/index.tsx b/src/containers/AdminTemplateCampaigns/index.tsx
@@ -1,16 +1,20 @@
-import Fab from "@material-ui/core/Fab";
 import { makeStyles } from "@material-ui/core/styles";
-import AddIcon from "@material-ui/icons/Add";
+import CreateIcon from "@material-ui/icons/Create";
+import LibraryAddOutlinedIcon from "@material-ui/icons/LibraryAddOutlined";
+import SpeedDial from "@material-ui/lab/SpeedDial";
+import SpeedDialAction from "@material-ui/lab/SpeedDialAction";
+import SpeedDialIcon from "@material-ui/lab/SpeedDialIcon";
 import {
   GetTemplateCampaignsDocument,
   useCloneTemplateCampaignMutation,
   useCreateTemplateCampaignMutation,
   useDeleteTemplateCampaignMutation,
   useGetTemplateCampaignsQuery
 } from "@spoke/spoke-codegen";
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
 
+import CreateCampaignFromLibraryDialog from "./components/CreateFromLibraryDialog";
 import TemplateCampaignRow from "./components/TemplateCampaignRow";
 
 const useStyles = makeStyles((theme) => ({
@@ -19,7 +23,7 @@ const useStyles = makeStyles((theme) => ({
       margin: theme.spacing(1)
     }
   },
-  fab: {
+  speedDial: {
     position: "absolute",
     bottom: theme.spacing(2),
     right: theme.spacing(2)
@@ -31,6 +35,9 @@ export const AdminTemplateCampaigns: React.FC = () => {
   const history = useHistory();
   const { organizationId } = useParams<{ organizationId: string }>();
 
+  const [speedDialOpen, setSpeedDialOpen] = useState<boolean>(false);
+  const [createFromLibrary, setCreateFromLibrary] = useState<boolean>(false);
+
   const { data, loading, error } = useGetTemplateCampaignsQuery({
     variables: { organizationId }
   });
@@ -39,9 +46,10 @@ export const AdminTemplateCampaigns: React.FC = () => {
     { query: GetTemplateCampaignsDocument, variables: { organizationId } }
   ];
 
+  // TODO - disable if loading?
   const [
     createTemplateCampaign,
-    { loading: createTemplateLoading }
+    { loading: _createTemplateLoading }
   ] = useCreateTemplateCampaignMutation({
     refetchQueries
   });
@@ -86,6 +94,10 @@ export const AdminTemplateCampaigns: React.FC = () => {
     });
   };
 
+  const toggleSpeedDial = () => {
+    setSpeedDialOpen(!speedDialOpen);
+  };
+
   return (
     <>
       {loading && "Loading..."}
@@ -103,15 +115,32 @@ export const AdminTemplateCampaigns: React.FC = () => {
           />
         ))}
       </div>
-      <Fab
-        color="primary"
-        className={classes.fab}
-        aria-label="add"
-        disabled={createTemplateLoading}
-        onClick={handleClickCreateTemplate}
+      <SpeedDial
+        ariaLabel="create-template-campaign-dial"
+        className={classes.speedDial}
+        icon={<SpeedDialIcon />}
+        onClick={toggleSpeedDial}
+        onOpen={() => setSpeedDialOpen(true)}
+        open={speedDialOpen}
+        direction="up"
       >
-        <AddIcon />
-      </Fab>
+        <SpeedDialAction
+          icon={<CreateIcon />}
+          tooltipTitle="Create Template"
+          onClick={handleClickCreateTemplate}
+        />
+        <SpeedDialAction
+          icon={<LibraryAddOutlinedIcon />}
+          tooltipTitle="Select from Library"
+          onClick={() => setCreateFromLibrary(true)}
+        />
+      </SpeedDial>
+
+      <CreateCampaignFromLibraryDialog
+        organizationId={organizationId}
+        open={createFromLibrary}
+        onClose={() => setCreateFromLibrary(false)}
+      />
     </>
   );
 };