chore(web): fix assets not refetching (#852)

reearth · Dec 4, 2023 · 0b60ec5 · 0b60ec5
1 parent 76b9961
commit 0b60ec5
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 10 deletions.
diff --git a/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx b/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx
@@ -31,5 +31,5 @@ export const Default: Story = (args: Props) => {
 Default.args = {
   label: "test",
   selected: false,
-  key: "test",
+  keyValue: "test",
 };
diff --git a/web/src/beta/components/RadioGroup/RadioBox/index.tsx b/web/src/beta/components/RadioGroup/RadioBox/index.tsx
@@ -4,12 +4,12 @@ import { fonts, styled } from "@reearth/services/theme";
 
 export type Props = {
   selected?: boolean;
-  key: string;
-  onClick?: (value: string) => void;
+  keyValue: string;
   label?: string;
+  onClick?: (value: string) => void;
 };
 
-const RadioBox: React.FC<Props> = ({ selected, key, label, onClick }: Props) => {
+const RadioBox: React.FC<Props> = ({ selected, keyValue, label, onClick }: Props) => {
   const handleRadioClick = useCallback(
     (value: string) => {
       onClick?.(value);
@@ -19,7 +19,7 @@ const RadioBox: React.FC<Props> = ({ selected, key, label, onClick }: Props) =>
 
   return (
     <Radio>
-      <RadioInput type="radio" value={key} onClick={() => handleRadioClick(key)} />
+      <RadioInput type="radio" value={keyValue} onClick={() => handleRadioClick(keyValue)} />
       <RadioButton selected={selected}>
         {selected && <RadioIndicator selected={selected} />}
       </RadioButton>

diff --git a/web/src/beta/components/RadioGroup/index.tsx b/web/src/beta/components/RadioGroup/index.tsx
@@ -31,9 +31,10 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
 
   return (
     <RadioGroupContainer layout={layout}>
-      {options.map(option => (
+      {options.map((option, idx) => (
         <RadioBox
-          key={option.keyValue}
+          key={option.keyValue + idx}
+          keyValue={option.keyValue}
           selected={option.keyValue === selectedValue}
           label={option.label}
           onClick={() => handleRadioChange(option.keyValue)}

diff --git a/web/src/beta/features/Assets/hooks.ts b/web/src/beta/features/Assets/hooks.ts
@@ -1,3 +1,4 @@
+import { useApolloClient } from "@apollo/client";
 import { useCallback, useState, useRef, useMemo, useEffect } from "react";
 
 import { Asset, SortType } from "@reearth/beta/features/Assets/types";
@@ -39,6 +40,8 @@ export default ({
   workspaceId?: string;
   onAssetSelect?: (inputValue?: string) => void;
 }) => {
+  const client = useApolloClient();
+
   const [sort, setSort] = useState<{ type?: SortType; reverse?: boolean }>();
   const [searchTerm, setSearchTerm] = useState<string>();
   const [selectedAssets, selectAsset] = useState<Asset[]>([]);
@@ -54,6 +57,13 @@ export default ({
     keyword: searchTerm,
   });
 
+  useEffect(() => {
+    return () => {
+      client.cache.evict({ fieldName: "assets" });
+      client.cache.gc();
+    };
+  }, [client.cache]);
+
   const t = useT();
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const [localSearchTerm, setLocalSearchTerm] = useState<string>(searchTerm ?? "");

diff --git a/web/src/beta/features/Editor/Visualizer/convert-story.ts b/web/src/beta/features/Editor/Visualizer/convert-story.ts
@@ -161,6 +161,8 @@ const processPropertyGroups = (
         title: schema.translatedTitle || undefined,
         description: schema.translatedDescription || undefined,
         choices: schema.choices || undefined,
+        min: schema.min || undefined,
+        max: schema.max || undefined,
       };
 
       if (!used) {

diff --git a/web/src/beta/lib/core/StoryPanel/hooks/useFieldComponent.tsx b/web/src/beta/lib/core/StoryPanel/hooks/useFieldComponent.tsx
@@ -106,6 +106,8 @@ export const FieldComponent = ({
         name={field?.title}
         value={field?.value}
         description={field?.description}
+        min={field?.min}
+        max={field?.max}
         onChange={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
       />
     )

diff --git a/web/src/beta/lib/core/StoryPanel/index.tsx b/web/src/beta/lib/core/StoryPanel/index.tsx
@@ -166,6 +166,7 @@ export default StoryPanel;
 
 const PanelWrapper = styled.div<{ bgColor?: string }>`
   flex: 0 0 ${STORY_PANEL_WIDTH}px;
+  width: ${STORY_PANEL_WIDTH}px;
   background: ${({ bgColor }) => bgColor};
   color: ${({ theme }) => theme.content.weak};
 `;
diff --git a/web/src/services/api/projectApi.ts b/web/src/services/api/projectApi.ts
@@ -175,7 +175,9 @@ export default () => {
     [updateProjectMutation, t, setNotification],
   );
 
-  const [archiveProjectMutation] = useMutation(ARCHIVE_PROJECT);
+  const [archiveProjectMutation] = useMutation(ARCHIVE_PROJECT, {
+    refetchQueries: ["GetProject"],
+  });
   const useArchiveProject = useCallback(
     async (input: ArchiveProjectMutationVariables) => {
       if (!input.projectId) return { status: "error" };
@@ -204,7 +206,9 @@ export default () => {
     [archiveProjectMutation, t, setNotification],
   );
 
-  const [deleteProjectMutation] = useMutation(DELETE_PROJECT);
+  const [deleteProjectMutation] = useMutation(DELETE_PROJECT, {
+    refetchQueries: ["GetProject"],
+  });
   const useDeleteProject = useCallback(
     async (input: DeleteProjectInput) => {
       if (!input.projectId) return { status: "error" };
@@ -223,7 +227,9 @@ export default () => {
     [deleteProjectMutation, t, setNotification],
   );
 
-  const [updateProjectBasicAuthMutation] = useMutation(UPDATE_PROJECT_BASIC_AUTH);
+  const [updateProjectBasicAuthMutation] = useMutation(UPDATE_PROJECT_BASIC_AUTH, {
+    refetchQueries: ["GetProject"],
+  });
   const useUpdateProjectBasicAuth = useCallback(
     async (input: UpdateProjectBasicAuthMutationVariables) => {
       if (!input.projectId) return { status: "error" };