fix: sprint15 bugs (#8)

Co-authored-by: KaWaite <flippindaisy@gmail.com>
reearth · Jun 4, 2021 · e2fe0a3 · e2fe0a3
1 parent 7505ca0
commit e2fe0a3
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 33 deletions.
diff --git a/src/components/molecules/Common/ProjectCreationModal/index.tsx b/src/components/molecules/Common/ProjectCreationModal/index.tsx
@@ -48,9 +48,8 @@ const ProjectCreationModal: React.FC<Props> = ({
     onSubmit: useCallback(
       async (data: FormValues) => {
         await onSubmit?.(data);
-        onClose?.(true);
       },
-      [onClose, onSubmit],
+      [onSubmit],
     ),
   });
 
@@ -67,6 +66,12 @@ const ProjectCreationModal: React.FC<Props> = ({
     },
     [formik],
   );
+
+  const handleCreate = useCallback(async () => {
+    await formik.submitForm();
+    handleClose();
+  }, [formik, handleClose]);
+
   const theme = useTheme();
 
   return (
@@ -79,7 +84,8 @@ const ProjectCreationModal: React.FC<Props> = ({
           large
           buttonType="primary"
           text={intl.formatMessage({ defaultMessage: "Create" })}
-          onClick={formik.submitForm}
+          disabled={!formik.values.name}
+          onClick={handleCreate}
         />
       }
       button2={

diff --git a/src/components/molecules/Common/WorkspaceCreationModal/index.tsx b/src/components/molecules/Common/WorkspaceCreationModal/index.tsx
@@ -58,6 +58,7 @@ const WorkspaceCreationModal: React.FC<Props> = ({ open, onClose, onSubmit }) =>
           large
           buttonType="primary"
           text={intl.formatMessage({ defaultMessage: "Create" })}
+          disabled={!formik.values.name}
           onClick={formik.submitForm}
         />
       }

diff --git a/src/components/molecules/Common/plugin/builtin/widgets/menu.tsx b/src/components/molecules/Common/plugin/builtin/widgets/menu.tsx
@@ -77,16 +77,20 @@ const Menu: WidgetComponent<Property, PluginProperty> = ({ property }) => {
   const handleClick = useCallback(
     (b: Button | MenuItem) => () => {
       const t = "buttonType" in b ? b.buttonType : "menuType" in b ? b.menuType : undefined;
-      if (t === "link") {
-        const link = "buttonLink" in b ? b.buttonLink : "menuLink" in b ? b.menuLink : undefined;
-        window.open(link, "_blank", "noopener");
-      } else if (t === "menu") {
+      if (t === "menu") {
         setVisibleMenuButton(v => (v === b.id ? undefined : b.id));
         return;
       } else if (t === "camera") {
         const camera =
           "buttonCamera" in b ? b.buttonCamera : "menuCamera" in b ? b.menuCamera : undefined;
         setCamera(camera);
+      } else {
+        let link = "buttonLink" in b ? b.buttonLink : "menuLink" in b ? b.menuLink : undefined;
+        const splitLink = link?.split("/");
+        if (splitLink?.[0] !== "http:" && splitLink?.[0] !== "https:") {
+          link = "https://" + link;
+        }
+        window.open(link, "_blank", "noopener");
       }
       setVisibleMenuButton(undefined);
     },

diff --git a/src/components/molecules/Settings/Project/DangerSection/Modal.tsx b/src/components/molecules/Settings/Project/DangerSection/Modal.tsx
@@ -20,10 +20,7 @@ type Props = {
     name: string;
     isArchived: boolean;
   };
-  team?: {
-    id: string;
-    name: string;
-  };
+  teamId?: string;
   isVisible: boolean;
   archiveProject?: (archived: boolean) => void;
   deleteProject?: () => void;
@@ -33,7 +30,7 @@ type Props = {
 const DangerModal: React.FC<Props> = ({
   actionType,
   project,
-  team,
+  teamId,
   isVisible,
   archiveProject,
   deleteProject,
@@ -49,8 +46,8 @@ const DangerModal: React.FC<Props> = ({
     if (actionType === "delete") deleteProject?.();
     if (actionType === "archive") archiveProject?.(true);
     if (actionType === "unarchive") archiveProject?.(false);
-    navigate(`/settings/workspace/${team?.id}/projects`);
-  }, [navigate, archiveProject, deleteProject, actionType, team, project, disabled]);
+    navigate(`/settings/workspace/${teamId}/projects`);
+  }, [navigate, archiveProject, deleteProject, actionType, teamId, project, disabled]);
 
   useEffect(() => {
     if (text == project?.name) {
@@ -74,7 +71,7 @@ const DangerModal: React.FC<Props> = ({
       size="sm"
       onClose={onClose}>
       <Subtitle size="s" color={theme.main.text} weight="bold" center>
-        {team?.name} / {project?.name}
+        {project?.name}
       </Subtitle>
       {actionType === "archive" && (
         <>

diff --git a/src/components/molecules/Settings/Project/DangerSection/index.tsx b/src/components/molecules/Settings/Project/DangerSection/index.tsx
@@ -13,15 +13,12 @@ export type Props = {
     name: string;
     isArchived: boolean;
   };
-  team?: {
-    id: string;
-    name: string;
-  };
+  teamId?: string;
   archiveProject?: (archived: boolean) => void;
   deleteProject?: () => void;
 };
 
-const DangerSection: React.FC<Props> = ({ project, team, archiveProject, deleteProject }) => {
+const DangerSection: React.FC<Props> = ({ project, teamId, archiveProject, deleteProject }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [actionType, setActionType] = useState<ActionType>("archive");
 
@@ -94,7 +91,7 @@ const DangerSection: React.FC<Props> = ({ project, team, archiveProject, deleteP
       <Modal
         actionType={actionType}
         project={project}
-        team={team}
+        teamId={teamId}
         isVisible={isOpen}
         archiveProject={archiveProject}
         deleteProject={deleteProject}

diff --git a/src/components/molecules/Settings/Project/EditableItem/index.tsx b/src/components/molecules/Settings/Project/EditableItem/index.tsx
@@ -4,12 +4,14 @@ import TextBox from "@reearth/components/atoms/TextBox";
 import SelectField from "@reearth/components/molecules/Settings/SelectField";
 import Icon from "@reearth/components/atoms/Icon";
 import { styled, colors } from "@reearth/theme";
+import defaultProjectImage from "@reearth/components/molecules/Dashboard/defaultProjectImage.jpg";
 
 export type Props = {
   className?: string;
   title?: React.ReactNode;
   body?: string;
   dropdown?: boolean;
+  isImage?: boolean;
   dropdownItems?:
     | {
         key: string;
@@ -18,31 +20,48 @@ export type Props = {
       }[]
     | undefined;
   currentItem?: string;
-  image?: string;
+  imageSrc?: string;
   icon?: string;
   iHeight?: string;
   multilineTextBox?: boolean;
   onSubmit?: (body: string) => void;
+  onEditStart?: () => void;
+  onEditCancel?: () => void;
 };
 
 const EditableItem: React.FC<Props> = ({
   className,
   title,
   body = "",
   dropdown,
+  isImage,
   dropdownItems,
   currentItem,
   multilineTextBox,
-  image,
+  imageSrc,
   icon,
   iHeight,
   onSubmit,
+  onEditStart,
+  onEditCancel,
 }) => {
   const [isEditting, setIsEditting] = useState(false);
   const [inputState, setInputState] = useState(body || currentItem);
 
-  const startEdit = useCallback(() => setIsEditting(true), [setIsEditting]);
-  const cancelEdit = useCallback(() => setIsEditting(false), [setIsEditting]);
+  const startEdit = useCallback(() => {
+    if (onEditStart) {
+      onEditStart();
+    } else {
+      setIsEditting(true);
+    }
+  }, [setIsEditting, onEditStart]);
+  const cancelEdit = useCallback(() => {
+    if (onEditCancel) {
+      onEditCancel();
+    } else {
+      setIsEditting(false);
+    }
+  }, [setIsEditting, onEditCancel]);
 
   const saveEdit = useCallback(() => {
     inputState && onSubmit?.(inputState);
@@ -88,10 +107,15 @@ const EditableItem: React.FC<Props> = ({
       className={className}
       header={title}
       body={body}
-      action={<StyledIcon icon="edit" size={20} onClick={startEdit} />}>
-      {image ? (
+      action={
+        <ButtonWrapper>
+          {imageSrc && <StyledIcon icon="bin" size={20} onClick={() => onSubmit?.("")} />}
+          <StyledIcon icon="edit" size={20} onClick={startEdit} />
+        </ButtonWrapper>
+      }>
+      {imageSrc || isImage ? (
         <div>
-          <Image src={image} height={iHeight} />
+          <Image src={imageSrc || defaultProjectImage} height={iHeight} />
         </div>
       ) : (
         icon && (

diff --git a/src/components/molecules/Settings/Project/ProfileSection/index.tsx b/src/components/molecules/Settings/Project/ProfileSection/index.tsx
@@ -1,9 +1,12 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 import Section from "@reearth/components/molecules/Settings/Section";
 import EditableItem from "@reearth/components/molecules/Settings/Project/EditableItem";
+import AssetModal, { Asset as AssetType } from "@reearth/components/molecules/Common/AssetModal";
 import { styled } from "@reearth/theme";
 import { useIntl } from "react-intl";
 
+export type Asset = AssetType;
+
 export type Props = {
   currentProject?: {
     id: string;
@@ -14,21 +17,28 @@ export type Props = {
   updateProjectName?: (name: string) => void;
   updateProjectDescription?: (description: string) => void;
   updateProjectImageUrl?: (imageUrl: string | null) => void;
+  assets?: Asset[];
+  createAssets?: (file: File) => Promise<void>;
 };
 
 const ProfileSection: React.FC<Props> = ({
   currentProject,
   updateProjectName,
   updateProjectDescription,
   updateProjectImageUrl,
+  assets,
+  createAssets,
 }) => {
   const intl = useIntl();
+  const [isAssetModalOpen, setAssetModalOpen] = useState(false);
+  const openAssetModal = useCallback(() => setAssetModalOpen(true), []);
+  const closeAssetModal = useCallback(() => setAssetModalOpen(false), []);
 
   return (
     <Wrapper>
-      <Section title={intl.formatMessage({ defaultMessage: "Profile" })}>
+      <Section title={intl.formatMessage({ defaultMessage: "Project Info" })}>
         <EditableItem
-          title={intl.formatMessage({ defaultMessage: "Project name" })}
+          title={intl.formatMessage({ defaultMessage: "Name" })}
           body={currentProject?.name}
           onSubmit={updateProjectName}
         />
@@ -41,9 +51,21 @@ const ProfileSection: React.FC<Props> = ({
         <EditableItem
           title={intl.formatMessage({ defaultMessage: "Thumbnail" })}
           onSubmit={updateProjectImageUrl}
-          image={currentProject?.imageUrl as string}
+          imageSrc={currentProject?.imageUrl as string}
+          isImage
+          onEditStart={() => openAssetModal()}
+          onEditCancel={() => closeAssetModal()}
         />
       </Section>
+      <AssetModal
+        isOpen={isAssetModalOpen}
+        onClose={closeAssetModal}
+        assets={assets}
+        fileType="image"
+        onCreateAsset={createAssets}
+        onSelect={updateProjectImageUrl}
+        value={currentProject?.imageUrl as string | undefined}
+      />
     </Wrapper>
   );
 };

diff --git a/src/components/organisms/Settings/Project/hooks.ts b/src/components/organisms/Settings/Project/hooks.ts
@@ -10,11 +10,16 @@ import {
   useArchiveProjectMutation,
   useDeleteProjectMutation,
   useUpdateProjectBasicAuthMutation,
+  useCreateAssetMutation,
+  AssetsQuery,
+  useAssetsQuery,
 } from "@reearth/gql";
 import { useLocalState } from "@reearth/state";
 
 import { Status } from "@reearth/components/atoms/PublicationStatus";
 
+export type AssetNodes = NonNullable<AssetsQuery["assets"]["nodes"][number]>[];
+
 type Params = {
   projectId: string;
 };
@@ -156,6 +161,26 @@ export default ({ projectId }: Params) => {
     setProjectAlias(project?.alias);
   }, [project]);
 
+  const [createAssetMutation] = useCreateAssetMutation();
+  const createAssets = useCallback(
+    (file: File) =>
+      (async () => {
+        if (teamId) {
+          await createAssetMutation({
+            variables: { teamId, file },
+            refetchQueries: ["Assets"],
+          });
+        }
+      })(),
+    [createAssetMutation, teamId],
+  );
+
+  const { data: assetsData } = useAssetsQuery({
+    variables: { teamId: teamId ?? "" },
+    skip: !teamId,
+  });
+  const assets = assetsData?.assets.nodes.filter(Boolean) as AssetNodes;
+
   return {
     project,
     projectId,
@@ -173,6 +198,8 @@ export default ({ projectId }: Params) => {
     validAlias,
     checkProjectAlias,
     validatingAlias,
+    createAssets,
+    assets,
   };
 };
 

diff --git a/src/components/organisms/Settings/Project/index.tsx b/src/components/organisms/Settings/Project/index.tsx
@@ -31,6 +31,8 @@ const Project: React.FC<Props> = ({ projectId }) => {
     validAlias,
     checkProjectAlias,
     validatingAlias,
+    createAssets,
+    assets,
   } = useHooks({ projectId });
 
   return (
@@ -50,6 +52,8 @@ const Project: React.FC<Props> = ({ projectId }) => {
             updateProjectName={updateProjectName}
             updateProjectDescription={updateProjectDescription}
             updateProjectImageUrl={updateProjectImageUrl}
+            assets={assets}
+            createAssets={createAssets}
           />
           <PublishSection
             loading={loading}
@@ -65,7 +69,7 @@ const Project: React.FC<Props> = ({ projectId }) => {
       {project?.isArchived && <ArchivedMessage />}
       <DangerSection
         project={project}
-        team={currentTeam}
+        teamId={currentTeam?.id}
         archiveProject={archiveProject}
         deleteProject={deleteProject}
       />