refactor some code

wondrous-dev · Mar 28, 2024 · f22eed1 · f22eed1
1 parent b29f1dd
commit f22eed1
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 25 deletions.
diff --git a/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal.tsx b/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal.tsx
@@ -2,16 +2,16 @@ import { Button, Grid, Stack, Typography } from "@mui/material";
 import Modal from "components/Shared/Modal";
 import { COMPONENT_CATEGORIES, COMPONENT_OPTIONS } from "../constants";
 
-const OptionsColumn = ({ options, groupedOptionsByCategory, onClick, onClose }) => {
+const OptionsColumn = ({ colOptions, options, onClick, onClose }) => {
   return (
     <Stack spacing={4}>
-      {options.map((category) => (
+      {colOptions.map((category) => (
         <Stack spacing={2} key={category}>
           <Typography fontWeight={600} color="#737373" textTransform="capitalize">
             {category}
           </Typography>
           <Stack alignItems="start">
-            {groupedOptionsByCategory[category].map((option) => (
+            {options[category].map((option) => (
               <Button
                 disableRipple
                 onClick={() => {
@@ -49,24 +49,24 @@ const ComponentOptionsModal = ({ open, onClose, onClick }) => {
     return acc;
   }, {});
 
-  const leftOptions = [COMPONENT_CATEGORIES.ACTION, COMPONENT_CATEGORIES.TWITTER];
-  const rightOptions = [COMPONENT_CATEGORIES.DISCORD, COMPONENT_CATEGORIES.YOUTUBE, COMPONENT_CATEGORIES.CRYPTO];
+  const leftColOptions = [COMPONENT_CATEGORIES.ACTION, COMPONENT_CATEGORIES.TWITTER];
+  const rightColOptions = [COMPONENT_CATEGORIES.DISCORD, COMPONENT_CATEGORIES.YOUTUBE, COMPONENT_CATEGORIES.CRYPTO];
 
   return (
     <Modal open={open} onClose={onClose} maxWidth={700}>
-      <Grid container justifyContent="space-between">
+      <Grid container justifyContent="space-between" rowGap={3}>
         <Stack spacing={3}>
           <OptionsColumn
-            options={leftOptions}
-            groupedOptionsByCategory={groupedOptionsByCategory}
+            colOptions={leftColOptions}
+            options={groupedOptionsByCategory}
             onClose={onClose}
             onClick={onClick}
           />
         </Stack>
         <Stack spacing={3}>
           <OptionsColumn
-            options={rightOptions}
-            groupedOptionsByCategory={groupedOptionsByCategory}
+            colOptions={rightColOptions}
+            options={groupedOptionsByCategory}
             onClose={onClose}
             onClick={onClick}
           />

diff --git a/wondrous-bot-admin/src/components/AddFormEntity/index.tsx b/wondrous-bot-admin/src/components/AddFormEntity/index.tsx
@@ -1,7 +1,7 @@
 import { Grid, Typography, Box, ButtonBase } from "@mui/material";
 import PanelComponent from "components/CreateTemplate/PanelComponent";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
-import { Button, Header } from "./styles";
+import { StepTypeButton, Header } from "./styles";
 import { ButtonIconWrapper } from "components/Shared/styles";
 import { DragDropContext, Draggable } from "react-beautiful-dnd";
 
@@ -17,7 +17,6 @@ import CreateQuestContext from "utils/context/CreateQuestContext";
 import { CONFIG_COMPONENTS } from "utils/configComponents";
 import { useSubscriptionPaywall } from "utils/hooks";
 import EcosystemFeature from "components/PremiumFeatureDialog/ecosystem";
-import AutocompleteOptionsComponent from "./components/AutocompleteComponent";
 import GlobalContext from "utils/context/GlobalContext";
 import { COMPONENT_OPTIONS, getMultipleChoiceDefaultValue } from "./constants";
 import EditSvg from "components/Icons/edit.svg";
@@ -38,6 +37,14 @@ const AddFormEntity = ({ steps, setSteps, handleRemove, refs, setRemovedMediaSlu
     setCanBeClosed,
   } = useSubscriptionPaywall();
 
+  const [openComponentOptionsModal, setOpenComponentOptionsModal] = useState({
+    open: false,
+    order: 0,
+    idx: 0,
+  });
+  const handleToggleComponentOptionsModal = () =>
+    setOpenComponentOptionsModal((prev) => ({ ...prev, open: !prev.open }));
+
   const componentOptions = useMemo(() => {
     let defaultOptions = [...COMPONENT_OPTIONS];
     if (activeOrg?.id in CUSTOM_INTEGRATIONS) {
@@ -185,14 +192,6 @@ const AddFormEntity = ({ steps, setSteps, handleRemove, refs, setRemovedMediaSlu
     }));
   };
 
-  const [openComponentOptionsModal, setOpenComponentOptionsModal] = useState({
-    open: false,
-    order: 0,
-    idx: 0,
-  });
-  const handleToggleComponentOptionsModal = () =>
-    setOpenComponentOptionsModal((prev) => ({ ...prev, open: !prev.open }));
-
   return (
     <>
       <ComponentOptionsModal
@@ -233,8 +232,6 @@ const AddFormEntity = ({ steps, setSteps, handleRemove, refs, setRemovedMediaSlu
                 {...provided.droppableProps}
               >
                 {steps?.map((item, idx) => {
-                  const isQuiz = item.type === TYPES.MULTI_QUIZ || item.type === TYPES.SINGLE_QUIZ;
-
                   const Component = CONFIG_COMPONENTS[item?.type];
 
                   if (!Component) return null;
@@ -273,7 +270,7 @@ const AddFormEntity = ({ steps, setSteps, handleRemove, refs, setRemovedMediaSlu
                                     >
                                       Step {idx + 1}
                                     </Typography>
-                                    <Button
+                                    <StepTypeButton
                                       onClick={() =>
                                         setOpenComponentOptionsModal({
                                           open: true,
@@ -284,7 +281,7 @@ const AddFormEntity = ({ steps, setSteps, handleRemove, refs, setRemovedMediaSlu
                                     >
                                       {componentOptions.find((option) => option.value === item.type).label}
                                       <img src={EditSvg} alt="edit" />
-                                    </Button>
+                                    </StepTypeButton>
                                   </Grid>
                                   <Grid display="flex" alignItems="center" gap="14px">
                                     <Box display="flex" gap="10px" alignItems="center">

diff --git a/wondrous-bot-admin/src/components/AddFormEntity/styles.tsx b/wondrous-bot-admin/src/components/AddFormEntity/styles.tsx
@@ -10,7 +10,7 @@ export const Header = styled(Grid)`
   }
 `;
 
-export const Button = styled(ButtonBase)`
+export const StepTypeButton = styled(ButtonBase)`
   && {
     height: 40px;
     color: #000;