feat: auto save when edit workspace

fixes #70
tiddly-gittly · Dec 1, 2024 · fd07905 · fd07905
1 parent 8b3b30e
commit fd07905
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 24 deletions.
diff --git a/src/i18n/localization/locales/en/translation.json b/src/i18n/localization/locales/en/translation.json
@@ -524,6 +524,7 @@
   "Delete": "Delete",
   "Edit": "Edit",
   "Open": "Open",
+  "Close": "Close",
   "Import": {
     "ImportWiki": "Import Wiki"
   },

diff --git a/src/i18n/localization/locales/zh_CN/translation.json b/src/i18n/localization/locales/zh_CN/translation.json
@@ -496,6 +496,7 @@
   "Description": "描述",
   "Tags": "标签",
   "Open": "打开",
+  "Close": "关闭",
   "Edit": "编辑",
   "Share": {
     "SharedContent": "分享内容",

diff --git a/src/pages/MainMenu/EditItemModel/PerformanceToolsModelContent.tsx b/src/pages/MainMenu/EditItemModel/PerformanceToolsModelContent.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Switch, Text } from 'react-native-paper';
+import { Button, Switch, Text, TextInput } from 'react-native-paper';
 import { styled } from 'styled-components/native';
 
 import { FlexibleText, SwitchContainer } from '../../../components/PreferenceWidgets';
@@ -19,6 +19,7 @@ export function PerformanceToolsModelContent({ id, onClose }: ModalProps): JSX.E
     id === undefined ? undefined : state.workspaces.find((w): w is IWikiWorkspace => w.id === id && (w.type === undefined || w.type === 'wiki'))
   );
   const updateWorkspace = useWorkspaceStore(state => state.update);
+  const [editedSelectiveSyncFilter, setEditedSelectiveSyncFilter] = useState(wiki?.selectiveSyncFilter ?? '');
 
   if (id === undefined || wiki === undefined) {
     return (
@@ -35,6 +36,9 @@ export function PerformanceToolsModelContent({ id, onClose }: ModalProps): JSX.E
         <Text variant='titleLarge'>{t('AddWorkspace.ImportBinaryFiles')}</Text>
         <ImportBinary wikiWorkspace={wiki} />
       </SectionContainer>
+      <SectionContainer>
+        <StyledTextInput label={t('AddWorkspace.SelectiveSyncFilter')} value={editedSelectiveSyncFilter} onChangeText={setEditedSelectiveSyncFilter} multiline />
+      </SectionContainer>
       <SectionContainer>
         <Text variant='titleLarge'>{t('Preference.EnableQuickLoad')}</Text>
         <SwitchContainer>
@@ -64,3 +68,6 @@ const SectionContainer = styled.View`
   align-items: stretch;
   margin-top: 15px;
 `;
+const StyledTextInput = styled(TextInput)`
+  margin-bottom: 10px;
+`;
diff --git a/src/pages/MainMenu/EditItemModel/WikiModelContent.tsx b/src/pages/MainMenu/EditItemModel/WikiModelContent.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 /* eslint-disable unicorn/no-null */
 import * as Haptics from 'expo-haptics';
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Alert } from 'react-native';
 import { Button, Modal, Portal, Text, TextInput, useTheme } from 'react-native-paper';
@@ -33,7 +33,6 @@ export function WikiEditModalContent({ id, onClose }: WikiEditModalProps): JSX.E
   const [updateWiki, deleteWiki, setServerActive] = useWorkspaceStore(state => [state.update, state.remove, state.setServerActive]);
 
   const [editedName, setEditedName] = useState(wiki?.name ?? '');
-  const [editedSelectiveSyncFilter, setEditedSelectiveSyncFilter] = useState(wiki?.selectiveSyncFilter ?? '');
   const [editedWikiFolderLocation, setEditedWikiFolderLocation] = useState(wiki?.wikiFolderLocation ?? '');
   const [selectedServerID, setSelectedServerID] = useState<string | undefined>();
   const [serverModalVisible, setServerModalVisible] = useState(false);
@@ -42,15 +41,6 @@ export function WikiEditModalContent({ id, onClose }: WikiEditModalProps): JSX.E
   const [performanceToolsModelVisible, setPerformanceToolsModelVisible] = useState(false);
   const [expandServerList, setExpandServerList] = useState(false);
 
-  const handleSave = useCallback(() => {
-    if (id === undefined) return;
-    updateWiki(id, {
-      name: editedName,
-      selectiveSyncFilter: editedSelectiveSyncFilter,
-    });
-    onClose();
-  }, [editedName, editedSelectiveSyncFilter, id, onClose, updateWiki]);
-
   if (id === undefined || wiki === undefined) {
     return (
       <ModalContainer>
@@ -61,8 +51,16 @@ export function WikiEditModalContent({ id, onClose }: WikiEditModalProps): JSX.E
 
   return (
     <ModalContainer>
-      <StyledTextInput label={t('EditWorkspace.Name')} value={editedName} onChangeText={setEditedName} />
-      <StyledTextInput label={t('AddWorkspace.SelectiveSyncFilter')} value={editedSelectiveSyncFilter} onChangeText={setEditedSelectiveSyncFilter} />
+      <StyledTextInput
+        label={t('EditWorkspace.Name')}
+        value={editedName}
+        onChangeText={(editedName) => {
+          setEditedName(editedName);
+          updateWiki(id, {
+            name: editedName,
+          });
+        }}
+      />
       <StyledTextInput label={t('AddWorkspace.WorkspaceFolder')} value={editedWikiFolderLocation} onChangeText={setEditedWikiFolderLocation} />
 
       <SyncTextButton workspaceID={id} />
@@ -118,18 +116,12 @@ export function WikiEditModalContent({ id, onClose }: WikiEditModalProps): JSX.E
       </Button>
 
       <ButtonsContainer>
-        <Button onPress={onClose}>{t('Cancel')}</Button>
         <Button
           onPress={() => {
             Alert.alert(
               t('ConfirmDelete'),
               t('ConfirmDeleteDescription'),
               [
-                {
-                  text: t('Cancel'),
-                  onPress: () => {},
-                  style: 'cancel',
-                },
                 {
                   text: t('Delete'),
                   onPress: async () => {
@@ -138,15 +130,18 @@ export function WikiEditModalContent({ id, onClose }: WikiEditModalProps): JSX.E
                     onClose();
                   },
                 },
+                {
+                  text: t('Cancel'),
+                  onPress: () => {},
+                  style: 'cancel',
+                },
               ],
             );
           }}
         >
           {t('Delete')}
         </Button>
-        <Button onPress={handleSave}>
-          <Text>{t('EditWorkspace.Save')}</Text>
-        </Button>
+        <Button onPress={onClose}>{t('Close')}</Button>
       </ButtonsContainer>
       <Portal>
         <ThemeProvider theme={theme}>