fix: 1st bug hunt of october (#100)

* fix dataset modal bug * storytelling & button show even if fresh widget * fix: modal not closing on proj creation * fix: clearing workspace modal after creation * fix add/delete member bug Co-authored-by: KaWaite <flippindaisy@gmail.com>
reearth · Oct 12, 2021 · 1b90322 · 1b90322
1 parent 50de1f2
commit 1b90322
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 33 deletions.
diff --git a/src/components/molecules/Common/ProjectCreationModal/index.tsx b/src/components/molecules/Common/ProjectCreationModal/index.tsx
@@ -44,12 +44,12 @@ const ProjectCreationModal: React.FC<Props> = ({
   const [openAssets, setOpenAssets] = useState(false);
   const formik = useFormik({
     initialValues,
-    onSubmit: useCallback(
-      async (data: FormValues) => {
-        await onSubmit?.(data);
-      },
-      [onSubmit],
-    ),
+    onSubmit: async (data: FormValues, { setStatus, resetForm }) => {
+      await onSubmit?.(data);
+      onClose?.();
+      resetForm({});
+      setStatus({ success: true });
+    },
   });
 
   const handleClose = useCallback(() => {

diff --git a/src/components/molecules/Common/WorkspaceCreationModal/index.tsx b/src/components/molecules/Common/WorkspaceCreationModal/index.tsx
@@ -29,13 +29,12 @@ const WorkspaceCreationModal: React.FC<Props> = ({ open, onClose, onSubmit }) =>
   const intl = useIntl();
   const formik = useFormik({
     initialValues,
-    onSubmit: useCallback(
-      async (data: FormValues) => {
-        await onSubmit?.(data);
-        onClose?.(true);
-      },
-      [onClose, onSubmit],
-    ),
+    onSubmit: async (data: FormValues, { setStatus, resetForm }) => {
+      await onSubmit?.(data);
+      onClose?.(true);
+      resetForm({});
+      setStatus({ success: true });
+    },
   });
 
   const handleClose = useCallback(() => {

diff --git a/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/hooks.ts b/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/hooks.ts
@@ -13,6 +13,7 @@ export default (
     sheetName: string,
     schemeId: string | null,
   ) => Promise<void>,
+  onClose?: () => void,
 ) => {
   const [url, onUrlChange] = useState<string>();
   const [csv, changeCsv] = useState<File>();
@@ -44,6 +45,14 @@ export default (
     setDataType(type);
   }, []);
 
+  const handleClose = useCallback(() => {
+    changeCsv(undefined);
+    changeSheet(undefined);
+    onUrlChange(undefined);
+    setDataType(undefined);
+    onClose?.();
+  }, [onClose]);
+
   const onSheetSelect = useCallback(sheet => {
     changeSheet(sheet);
   }, []);
@@ -70,5 +79,6 @@ export default (
     onReturn,
     onSheetSelect,
     handleImport,
+    handleClose,
   };
 };
diff --git a/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/index.tsx b/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/index.tsx
@@ -45,7 +45,8 @@ const DatasetModal: React.FC<Props> = ({
     onSheetSelect,
     handleImport,
     handleClick,
-  } = useHooks(handleDatasetAdd, handleGoogleSheetDatasetAdd);
+    handleClose,
+  } = useHooks(handleDatasetAdd, handleGoogleSheetDatasetAdd, onClose);
 
   const primaryButtonText = useMemo(() => {
     if (syncLoading) {
@@ -60,7 +61,7 @@ const DatasetModal: React.FC<Props> = ({
     <Modal
       title={intl.formatMessage({ defaultMessage: "Add dataset" })}
       isVisible={isVisible}
-      onClose={onClose}
+      onClose={handleClose}
       button1={
         <Button
           large
@@ -74,7 +75,7 @@ const DatasetModal: React.FC<Props> = ({
         <Button
           large
           text={intl.formatMessage({ defaultMessage: "Cancel" })}
-          onClick={onClose}
+          onClick={handleClose}
           buttonType="secondary"
         />
       }>

diff --git a/src/components/molecules/Visualizer/Widget/Button/MenuButton.tsx b/src/components/molecules/Visualizer/Widget/Button/MenuButton.tsx
@@ -30,7 +30,7 @@ export type MenuItem = {
 };
 
 export type Props = {
-  button: Button;
+  button?: Button;
   menuItems?: MenuItem[];
   location?: {
     section?: "left" | "right" | "center";
@@ -81,6 +81,12 @@ export default function ({
           resize: false,
         },
       },
+      {
+        name: "offset",
+        options: {
+          offset: [0, 2],
+        },
+      },
     ],
   });
 
@@ -120,18 +126,17 @@ export default function ({
         publishedTheme={publishedTheme}
         tabIndex={0}
         button={b}
-        onClick={handleClick(b)}
+        onClick={b && handleClick(b)}
         ref={referenceElement}>
-        {(b.buttonStyle === "icon" || b.buttonStyle === "texticon") && b.buttonIcon && (
-          <StyledIcon icon={b.buttonIcon} size={25} margin={!!b.buttonTitle} />
+        {(b?.buttonStyle === "icon" || b?.buttonStyle === "texticon") && b?.buttonIcon && (
+          <StyledIcon icon={b?.buttonIcon} size={25} margin={!!b?.buttonTitle} />
         )}
-        {b.buttonStyle !== "icon" && b.buttonTitle}
+        {b?.buttonStyle !== "icon" && b?.buttonTitle}
       </Button>
       <div
         ref={popperElement}
         style={{
           zIndex: theme.zIndexes.dropDown,
-          margin: "2.5px auto",
           ...styles.popper,
         }}
         {...attributes.popper}>

diff --git a/src/components/molecules/Visualizer/Widget/Button/index.tsx b/src/components/molecules/Visualizer/Widget/Button/index.tsx
@@ -10,25 +10,24 @@ export type Props = WidgetProps<Property>;
 export type Button = ButtonType;
 export type MenuItem = MenuItemType;
 export type Property = {
-  default: Button;
+  default?: Button;
   menu?: MenuItem[];
 };
 
 const Menu = ({ widget, sceneProperty }: Props): JSX.Element | null => {
-  const { default: button, menu: menuItems } = (widget?.property as Property | undefined) ?? {};
+  const { default: button, menu: menuItems } = (widget.property as Property) ?? {};
 
-  return button ? (
+  return (
     <Wrapper>
       <MenuButton
         sceneProperty={sceneProperty}
-        key={button?.id}
         button={button}
-        location={widget?.layout?.location}
-        align={widget?.layout?.align}
+        location={widget.layout?.location}
+        align={widget.layout?.align}
         menuItems={menuItems}
       />
     </Wrapper>
-  ) : null;
+  );
 };
 
 const Wrapper = styled.div`

diff --git a/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx b/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx
@@ -52,7 +52,7 @@ const Storytelling = ({
     openMenu(false);
   });
 
-  return stories?.length > 0 ? (
+  return (
     <div>
       <Menu
         publishedTheme={publishedTheme}
@@ -122,7 +122,8 @@ const Storytelling = ({
             size={isExtraSmallWindow ? "xs" : "m"}
             weight="bold"
             otherProperties={{ userSelect: "none" }}>
-            {typeof selected === "undefined" ? "-" : selected.index + 1} / {stories.length}
+            {typeof selected === "undefined" ? "-" : selected.index + 1} /{" "}
+            {stories.length > 0 ? stories.length : "-"}
           </Text>
         </Current>
         <ArrowButton
@@ -135,7 +136,7 @@ const Storytelling = ({
         </ArrowButton>
       </Widget>
     </div>
-  ) : null;
+  );
 };
 
 const Widget = styled.div<{

diff --git a/src/components/organisms/Settings/Workspace/hooks.ts b/src/components/organisms/Settings/Workspace/hooks.ts
@@ -137,6 +137,7 @@ export default (params: Params) => {
           if (!teamId) return;
           const result = await addMemberToTeamMutation({
             variables: { userId, teamId, role: Role.Reader },
+            refetchQueries: ["teams"],
           });
           if (result.errors || !result.data?.addMemberToTeam) {
             setNotification({
@@ -184,7 +185,10 @@ export default (params: Params) => {
   const removeMemberFromTeam = useCallback(
     async (userId: string) => {
       if (!teamId) return;
-      const result = await removeMemberFromTeamMutation({ variables: { teamId, userId } });
+      const result = await removeMemberFromTeamMutation({
+        variables: { teamId, userId },
+        refetchQueries: ["teams"],
+      });
       if (result.errors || !result.data?.removeMemberFromTeam) {
         setNotification({
           type: "error",