refactor(web): model, project, and workspace types

web/src/components/molecules/Accessibility/index.tsx

@@ -9,7 +9,8 @@ import Input from "@reearth-cms/components/atoms/Input";
 import Select from "@reearth-cms/components/atoms/Select";
 import Switch from "@reearth-cms/components/atoms/Switch";
 import Table, { TableColumnsType } from "@reearth-cms/components/atoms/Table";
-import { PublicScope, Model } from "@reearth-cms/components/molecules/Accessibility/types";
+import { PublicScope } from "@reearth-cms/components/molecules/Accessibility/types";
+import { Model } from "@reearth-cms/components/molecules/Model/types";
 import { useT } from "@reearth-cms/i18n";
 
 type ModelDataType = {
@@ -112,7 +113,7 @@ const Accessibility: React.FC<Props> = ({
               <Switch
                 checked={m.public}
                 onChange={(publicState: boolean) =>
-                  handleUpdatedModels({ id: m.id, public: publicState, key: m.key })
+                  handleUpdatedModels({ ...m, public: publicState })
                 }
               />
             ),

web/src/components/molecules/Accessibility/types.ts

@@ -1,8 +1 @@
 export type PublicScope = "private" | "public"; // Add "limited" when functionality becomes available
-
-export type Model = {
-  id: string;
-  name?: string;
-  public: boolean;
-  key?: string;
-};

web/src/components/molecules/Common/Header/index.tsx

@@ -12,9 +12,7 @@ import { useT } from "@reearth-cms/i18n";
 
 import HeaderDropdown from "./Dropdown";
 
-export type { User } from "./types";
-
-export interface Props {
+interface Props {
   username?: string;
   personalWorkspace?: Workspace;
   currentWorkspace?: Workspace;

web/src/components/molecules/Content/Table/DropdownRender/hooks.ts

@@ -220,7 +220,9 @@ export default (
     } else if (filter.type === "Person") {
       if (filter?.members?.length) {
         for (const member of Object.values(filter.members)) {
-          options.push({ value: member.user?.name, label: member.user?.name });
+          if ("user" in member) {
+            options.push({ value: member.user?.name, label: member.user?.name });
+          }
         }
       }
     } else if (filter.type === "Bool" || filter.type === "Checkbox") {

web/src/components/molecules/Content/Table/types.ts

@@ -10,6 +10,7 @@ import {
   StringOperator,
   MultipleOperator,
 } from "@reearth-cms/components/molecules/View/types";
+import { Member } from "@reearth-cms/components/molecules/Workspace/types";
 
 export type ColorType = "#BFBFBF" | "#52C41A" | "#FA8C16";
 export type StateType = "DRAFT" | "PUBLIC" | "REVIEW";
@@ -26,7 +27,7 @@ export type DropdownFilterType = {
   title: string;
   type: FilterType;
   typeProperty: { values?: string[]; tags?: { color: string; id: string; name: string }[] };
-  members: { user: { name: string } }[];
+  members: Member[];
   id: string;
   multiple: boolean;
   required: boolean;

web/src/components/molecules/Integration/types.ts

@@ -1,6 +1,6 @@
 export type IntegrationMember = {
   id: string;
-  integration: Integration;
+  integration?: Integration;
   integrationRole: Role;
   invitedById: string;
   active: boolean;

web/src/components/molecules/Model/types.ts

@@ -3,11 +3,11 @@ import { Schema, MetaDataSchema } from "@reearth-cms/components/molecules/Schema
 export type Model = {
   id: string;
   name: string;
-  description?: string;
+  description: string;
   key: string;
   schemaId: string;
   schema: Schema;
-  metadataSchema?: MetaDataSchema;
+  metadataSchema: MetaDataSchema;
   public: boolean;
   order?: number;
 };

web/src/components/molecules/ProjectList/ProjectList.tsx

@@ -4,15 +4,15 @@ import Button from "@reearth-cms/components/atoms/Button";
 import Icon from "@reearth-cms/components/atoms/Icon";
 import Loading from "@reearth-cms/components/atoms/Loading";
 import ProjectCard from "@reearth-cms/components/molecules/ProjectList/ProjectCard";
-import { Project as ProjectType } from "@reearth-cms/components/molecules/Workspace/types";
+import { Project } from "@reearth-cms/components/molecules/Workspace/types";
 import { useT } from "@reearth-cms/i18n";
 
-export interface Props {
+interface Props {
   className?: string;
-  projects?: ProjectType[];
+  projects?: Project[];
   loading?: boolean;
   onProjectModalOpen: () => void;
-  onProjectNavigation: (project: ProjectType) => void;
+  onProjectNavigation: (project: Project) => void;
 }
 
 const ProjectList: React.FC<Props> = ({
@@ -43,7 +43,7 @@ const ProjectList: React.FC<Props> = ({
         </EmptyListWrapper>
       ) : (
         <Content>
-          {projects.map((project: ProjectType) => (
+          {projects.map(project => (
             <ProjectCard
               key={project.id}
               project={project}

web/src/components/molecules/Workspace/index.tsx

@@ -6,18 +6,18 @@ import ProjectCreationModal, {
 import WorkspaceCreationModal from "@reearth-cms/components/molecules/Common/WorkspaceCreationModal";
 import ProjectList from "@reearth-cms/components/molecules/ProjectList/ProjectList";
 import Greeting from "@reearth-cms/components/molecules/Workspace/Greeting";
-import { Project as ProjectType } from "@reearth-cms/components/molecules/Workspace/types";
+import { Project } from "@reearth-cms/components/molecules/Workspace/types";
 import WorkspaceHeader from "@reearth-cms/components/molecules/Workspace/WorkspaceHeader";
 
-export type Props = {
+type Props = {
   coverImageUrl?: string;
-  projects?: ProjectType[];
+  projects?: Project[];
   projectModal?: boolean;
   workspaceModal?: boolean;
   loadingProjects?: boolean;
   onProjectSearch: (value: string) => void;
   onProjectModalOpen: () => void;
-  onProjectNavigation: (project: ProjectType) => void;
+  onProjectNavigation: (project: Project) => void;
   onWorkspaceModalClose: () => void;
   onWorkspaceModalOpen: () => void;
   onWorkspaceCreate: (data: { name: string }) => Promise<void>;

web/src/components/molecules/Workspace/types.ts

@@ -1,10 +1,14 @@
+import { PublicScope } from "@reearth-cms/components/molecules/Accessibility/types";
 import { IntegrationMember } from "@reearth-cms/components/molecules/Integration/types";
 
 export type Project = {
   id: string;
   name: string;
   description?: string;
-  requestRoles?: Role[] | null;
+  alias?: string;
+  scope?: PublicScope;
+  assetPublic?: boolean;
+  requestRoles?: Role[];
 };
 
 export type User = {
@@ -31,8 +35,8 @@ export type MemberInput = {
 export type Role = "WRITER" | "READER" | "MAINTAINER" | "OWNER";
 
 export type Workspace = {
-  id?: string;
-  name?: string;
+  id: string;
+  name: string;
   personal?: boolean;
   members?: Member[];
 };

web/src/components/organisms/CMSWrapper/hooks.ts

@@ -4,14 +4,17 @@ import { useParams, useLocation, useNavigate } from "react-router-dom";
 import { MenuInfo } from "@reearth-cms/components/atoms/Menu";
 import Notification from "@reearth-cms/components/atoms/Notification";
 import { PublicScope } from "@reearth-cms/components/molecules/Accessibility/types";
-import { Role, Workspace } from "@reearth-cms/components/molecules/Workspace/types";
-import { fromGraphQLMember } from "@reearth-cms/components/organisms/DataConverters/setting";
+import {
+  fromGraphQLMember,
+  fromGraphQLWorkspace,
+} from "@reearth-cms/components/organisms/DataConverters/setting";
 import {
   useCreateWorkspaceMutation,
   useGetMeQuery,
   useGetProjectQuery,
   ProjectPublicationScope,
   WorkspaceMember,
+  Workspace as GQLWorkspace,
 } from "@reearth-cms/gql/graphql-client-api";
 import { useT } from "@reearth-cms/i18n";
 import { useWorkspace, useProject, useUserId, useWorkspaceId } from "@reearth-cms/state";
@@ -43,17 +46,23 @@ export default () => {
     setCollapsed(collapse);
   }, []);
 
-  const workspaces = data?.me?.workspaces;
+  const workspaces = data?.me?.workspaces?.map(workspace =>
+    fromGraphQLWorkspace(workspace as GQLWorkspace),
+  );
   const workspace = workspaces?.find(workspace => workspace.id === workspaceId);
-  const personalWorkspace: Workspace = useMemo(() => {
+  const personalWorkspace = useMemo(() => {
     const foundWorkspace = workspaces?.find(
       workspace => workspace.id === data?.me?.myWorkspace?.id,
     );
-    return {
-      id: foundWorkspace?.id,
-      name: foundWorkspace?.name,
-      members: foundWorkspace?.members?.map(member => fromGraphQLMember(member as WorkspaceMember)),
-    };
+    return foundWorkspace
+      ? {
+          id: foundWorkspace.id,
+          name: foundWorkspace.name,
+          members: foundWorkspace.members?.map(member =>
+            fromGraphQLMember(member as WorkspaceMember),
+          ),
+        }
+      : undefined;
   }, [data?.me?.myWorkspace?.id, workspaces]);
   const personal = workspaceId === data?.me?.myWorkspace?.id;
 
@@ -83,7 +92,9 @@ export default () => {
       });
       if (results.data?.createWorkspace) {
         Notification.success({ message: t("Successfully created workspace!") });
-        setCurrentWorkspace(results.data.createWorkspace.workspace);
+        setCurrentWorkspace(
+          fromGraphQLWorkspace(results.data.createWorkspace.workspace as GQLWorkspace),
+        );
         navigate(`/workspace/${results.data.createWorkspace.workspace.id}`);
       }
       refetch();
@@ -117,7 +128,7 @@ export default () => {
           scope: convertScope(project.publication?.scope),
           alias: project.alias,
           assetPublic: project.publication?.assetPublic,
-          requestRoles: project.requestRoles as Role[],
+          requestRoles: project.requestRoles ?? undefined,
         });
       }
     } else {

web/src/components/organisms/DataConverters/setting.ts

@@ -1,7 +1,4 @@
-import {
-  IntegrationMember,
-  Integration,
-} from "@reearth-cms/components/molecules/Integration/types";
+import { Integration } from "@reearth-cms/components/molecules/Integration/types";
 import {
   WorkspaceSettings,
   Member,
@@ -71,13 +68,12 @@ export const fromGraphQLIntegration = (integration: GQLIntegration): Integration
   },
 });
 
-export const fromGraphQLWorkspace = (workspace?: GQLWorkspace): Workspace | undefined => {
-  if (!workspace) return;
+export const fromGraphQLWorkspace = (workspace: GQLWorkspace): Workspace => {
   return {
-    id: workspace?.id,
-    name: workspace?.name,
-    personal: workspace?.personal,
-    members: workspace?.members?.map(member => fromGraphQLMember(member)),
+    id: workspace.id,
+    name: workspace.name,
+    personal: workspace.personal,
+    members: workspace.members.map(member => fromGraphQLMember(member)),
   };
 };
 
@@ -87,10 +83,10 @@ export const fromGraphQLMember = (member: WorkspaceMember): Member => {
       return {
         id: member.integrationId,
         active: member.active,
-        integration: member.integration && fromGraphQLIntegration(member.integration),
+        integration: member.integration ? fromGraphQLIntegration(member.integration) : undefined,
         invitedById: member.invitedById,
         integrationRole: member.role,
-      } as IntegrationMember;
+      };
     case "WorkspaceUserMember":
     default:
       return {

web/src/components/organisms/Project/Accessibility/hooks.ts

@@ -1,7 +1,8 @@
 import { useCallback, useState, useEffect } from "react";
 
 import Notification from "@reearth-cms/components/atoms/Notification";
-import { PublicScope, Model } from "@reearth-cms/components/molecules/Accessibility/types";
+import { PublicScope } from "@reearth-cms/components/molecules/Accessibility/types";
+import { Model } from "@reearth-cms/components/molecules/Model/types";
 import { fromGraphQLModel } from "@reearth-cms/components/organisms/DataConverters/model";
 import {
   useUpdateModelMutation,

web/src/components/organisms/Project/Content/ContentDetails/hooks.ts

@@ -16,7 +16,7 @@ import {
   RequestState,
 } from "@reearth-cms/components/molecules/Request/types";
 import { Group, Field } from "@reearth-cms/components/molecules/Schema/types";
-import { Role, UserMember } from "@reearth-cms/components/molecules/Workspace/types";
+import { UserMember } from "@reearth-cms/components/molecules/Workspace/types";
 import { fromGraphQLItem } from "@reearth-cms/components/organisms/DataConverters/content";
 import { fromGraphQLModel } from "@reearth-cms/components/organisms/DataConverters/model";
 import { fromGraphQLGroup } from "@reearth-cms/components/organisms/DataConverters/schema";
@@ -165,13 +165,15 @@ export default () => {
       : undefined;
   }, [userData]);
 
-  const myRole: Role = useMemo(
-    () => currentWorkspace?.members?.find(m => m.userId === me?.id)?.role,
+  const myRole = useMemo(
+    () =>
+      currentWorkspace?.members?.find((m): m is UserMember => "userId" in m && m.userId === me?.id)
+        ?.role,
     [currentWorkspace?.members, me?.id],
   );
 
   const showPublishAction = useMemo(
-    () => !currentProject?.requestRoles?.includes(myRole),
+    () => (myRole ? !currentProject?.requestRoles?.includes(myRole) : true),
     [currentProject?.requestRoles, myRole],
   );
 
@@ -423,7 +425,7 @@ export default () => {
     return (
       currentWorkspace?.members
         ?.map<UserMember | undefined>(member =>
-          member.__typename === "WorkspaceUserMember" && member.user
+          "userId" in member
             ? {
                 userId: member.userId,
                 user: member.user,

web/src/components/organisms/Project/Request/RequestDetails/hooks.ts

@@ -4,6 +4,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import Notification from "@reearth-cms/components/atoms/Notification";
 import { User } from "@reearth-cms/components/molecules/AccountSettings/types";
 import { Request } from "@reearth-cms/components/molecules/Request/types";
+import { UserMember } from "@reearth-cms/components/molecules/Workspace/types";
 import {
   useDeleteRequestMutation,
   useApproveRequestMutation,
@@ -44,7 +45,9 @@ export default () => {
   }, [userData]);
 
   const myRole = useMemo(
-    () => currentWorkspace?.members?.find(m => m.userId === me?.id)?.role,
+    () =>
+      currentWorkspace?.members?.find((m): m is UserMember => "userId" in m && m.userId === me?.id)
+        ?.role,
     [currentWorkspace?.members, me?.id],
   );
 

web/src/components/organisms/Settings/General/hooks.ts

@@ -5,6 +5,7 @@ import {
   WorkspaceSettings,
   TileInput,
   TerrainInput,
+  UserMember,
 } from "@reearth-cms/components/molecules/Workspace/types";
 import { fromGraphQLWorkspaceSettings } from "@reearth-cms/components/organisms/DataConverters/setting";
 import {
@@ -97,7 +98,9 @@ export default () => {
 
   const { data: userData } = useGetMeQuery();
   const hasPrivilege: boolean = useMemo(() => {
-    const myRole = currentWorkspace?.members?.find(m => m.userId === userData?.me?.id)?.role;
+    const myRole = currentWorkspace?.members?.find(
+      (m): m is UserMember => "userId" in m && m.userId === userData?.me?.id,
+    )?.role;
     return myRole === "OWNER" || myRole === "MAINTAINER";
   }, [currentWorkspace?.members, userData?.me?.id]);
 

web/src/components/organisms/Settings/Integration/hooks.ts

@@ -51,7 +51,7 @@ export default (workspaceId?: string) => {
       )
       .filter(
         (integrationMember): integrationMember is IntegrationMember =>
-          !!integrationMember &&
+          !!integrationMember?.integration &&
           integrationMember.integration.name.toLowerCase().includes(searchTerm ?? ""),
       );
   }, [workspace, searchTerm]);
@@ -103,7 +103,7 @@ export default (workspaceId?: string) => {
       if (!workspaceId || !selectedIntegrationMember) return;
       const integration = await updateIntegrationToWorkspaceMutation({
         variables: {
-          integrationId: selectedIntegrationMember?.integration.id,
+          integrationId: selectedIntegrationMember?.integration?.id || "",
           workspaceId,
           role: role as GQLRole,
         },