refactor(dashboard): basic saving workflow

src/containers/thread/DashboardThread/SavingBar.tsx

@@ -14,13 +14,14 @@ import {
   ActionWrapper,
 } from './styles/saving_bar'
 
-import { rollbackEdit, onSave } from './logic'
+import { rollbackEdit, confirm } from './logic'
 
 type TProps = {
   field: TSettingField
   prefix?: string
   hint?: ReactNode
   children?: ReactNode
+  loading?: boolean
   isTouched?: boolean
   onCancel?: () => void
 } & TSpace
@@ -31,6 +32,7 @@ const SavingBar: FC<TProps> = ({
   hint = null,
   children = null,
   isTouched = false,
+  loading = false,
   onCancel = console.log,
   ...restProps
 }) => {
@@ -44,12 +46,13 @@ const SavingBar: FC<TProps> = ({
             <YesOrNoButtons
               cancelText="取消"
               confirmText="确定"
+              loading={loading}
               space={4}
               onCancel={() => {
                 onCancel?.()
                 rollbackEdit(field)
               }}
-              onConfirm={() => onSave(field)}
+              onConfirm={() => confirm(field)}
             />
           </ActionWrapper>
         </Wrapper>
@@ -74,7 +77,9 @@ const SavingBar: FC<TProps> = ({
         <YesOrNoButtons
           cancelText="取消"
           confirmText="确定"
+          loading={loading}
           space={4}
+          onConfirm={() => confirm(field)}
           onCancel={() => {
             onCancel?.()
             rollbackEdit(field)

src/containers/thread/DashboardThread/UI/BannerLayout.tsx

@@ -32,9 +32,10 @@ import { edit } from '../logic'
 type TProps = {
   layout: TBannerLayout
   isTouched: boolean
+  saving: boolean
 }
 
-const BannerLayout: FC<TProps> = ({ layout, isTouched }) => {
+const BannerLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
   return (
     <Wrapper>
       <SectionLabel
@@ -176,6 +177,7 @@ const BannerLayout: FC<TProps> = ({ layout, isTouched }) => {
       <SavingBar
         isTouched={isTouched}
         field={SETTING_FIELD.BANNER_LAYOUT}
+        loading={saving}
         top={20}
       />
     </Wrapper>

src/containers/thread/DashboardThread/UI/ChangelogLayout.tsx

@@ -36,9 +36,10 @@ import { edit } from '../logic'
 type TProps = {
   layout: TChangelogLayout
   isTouched: boolean
+  saving: boolean
 }
 
-const ChangelogLayout: FC<TProps> = ({ layout, isTouched }) => {
+const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
   return (
     <Wrapper>
       <SectionLabel
@@ -246,6 +247,7 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched }) => {
       <SavingBar
         isTouched={isTouched}
         field={SETTING_FIELD.CHANGELOG_LAYOUT}
+        loading={saving}
         top={20}
       />
     </Wrapper>

src/containers/thread/DashboardThread/UI/PostListLayout.tsx

@@ -31,9 +31,10 @@ import { edit } from '../logic'
 type TProps = {
   layout: TPostLayout
   isTouched: boolean
+  saving: boolean
 }
 
-const PostListLayout: FC<TProps> = ({ layout, isTouched }) => {
+const PostListLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
   return (
     <Wrapper>
       <SectionLabel
@@ -137,6 +138,7 @@ const PostListLayout: FC<TProps> = ({ layout, isTouched }) => {
       <SavingBar
         isTouched={isTouched}
         field={SETTING_FIELD.POST_LAYOUT}
+        loading={saving}
         top={20}
       />
     </Wrapper>

src/containers/thread/DashboardThread/UI/PrimaryColor.tsx

@@ -16,9 +16,10 @@ import { edit } from '../logic'
 type TProps = {
   primaryColor: TColorName
   isTouched: boolean
+  saving: boolean
 }
 
-const PrimaryColor: FC<TProps> = ({ primaryColor, isTouched }) => {
+const PrimaryColor: FC<TProps> = ({ primaryColor, isTouched, saving }) => {
   return (
     <Wrapper>
       <SectionLabel
@@ -34,7 +35,11 @@ const PrimaryColor: FC<TProps> = ({ primaryColor, isTouched }) => {
           </>
         }
       />
-      <SavingBar isTouched={isTouched} field={SETTING_FIELD.PRIMARY_COLOR}>
+      <SavingBar
+        isTouched={isTouched}
+        field={SETTING_FIELD.PRIMARY_COLOR}
+        loading={saving}
+      >
         <Label color={primaryColor}>
           <ColorSelector
             activeColor={primaryColor}

src/containers/thread/DashboardThread/UI/index.tsx

@@ -16,8 +16,14 @@ type TProps = {
 }
 
 const UI: FC<TProps> = ({ settings, touched }) => {
-  const { primaryColor, bannerLayout, postLayout, changelogLayout, wallpaper } =
-    settings
+  const {
+    primaryColor,
+    bannerLayout,
+    postLayout,
+    changelogLayout,
+    wallpaper,
+    saving,
+  } = settings
 
   return (
     <Wrapper>
@@ -29,12 +35,22 @@ const UI: FC<TProps> = ({ settings, touched }) => {
       <PrimaryColor
         primaryColor={primaryColor}
         isTouched={touched.primaryColor}
+        saving={saving}
+      />
+      <BannerLayout
+        layout={bannerLayout}
+        isTouched={touched.bannerLayout}
+        saving={saving}
+      />
+      <PostListLayout
+        layout={postLayout}
+        isTouched={touched.postLayout}
+        saving={saving}
       />
-      <BannerLayout layout={bannerLayout} isTouched={touched.bannerLayout} />
-      <PostListLayout layout={postLayout} isTouched={touched.postLayout} />
       <ChangelogLayout
         layout={changelogLayout}
         isTouched={touched.changelogLayout}
+        saving={saving}
       />
       <Wallpaper wallpaper={wallpaper} />
     </Wrapper>

src/containers/thread/DashboardThread/logic.ts

@@ -25,11 +25,6 @@ export const rollbackEdit = (field: TSettingField): void => {
   store.rollbackEdit(field)
 }
 
-/**
- * confirm callback for SavingBar
- */
-export const onSave = (field: TSettingField): void => store.onSave(field)
-
 export const updateEditingTag = (tag: TTag): void => {
   store.mark({ editingTag: tag })
 }
@@ -44,6 +39,21 @@ export const edit = (e: TEditValue, key: string): void => {
   updateEditing(store, key, e)
 }
 
+/**
+ * save to server
+ */
+export const confirm = (field: TSettingField): void => {
+  store.mark({ saving: true })
+  store.onSave(field)
+
+  setTimeout(() => {
+    store.mark({ saving: false })
+    const initSettings = { ...store.initSettings, [field]: store[field] }
+
+    store.mark({ initSettings })
+  }, 1200)
+}
+
 // ###############################
 // init & uninit handlers
 // ###############################

src/containers/thread/DashboardThread/spec.d.ts

@@ -45,6 +45,7 @@ export type TTab =
   | 'widgets'
 
 export type TTagSettings = {
+  saving: boolean
   tags: TTag[]
   editingTag: TTag
 }
@@ -56,11 +57,13 @@ export type TAlias = {
   suggestions?: string[]
 }
 export type TAliasSettings = {
+  saving: boolean
   alias: TAlias[]
   editingAlias: TAlias
 }
 
 export type TUiSettings = {
+  saving: boolean
   wallpaper: TWallpaper
   primaryColor: TColorName
   bannerLayout: TBannerLayout

src/containers/thread/DashboardThread/store.ts

@@ -60,6 +60,7 @@ const settingsModalFields = {
 const InitSettings = T.model('DashboardInit', settingsModalFields)
 
 const DashboardThread = T.model('DashboardThread', {
+  saving: T.optional(T.boolean, false),
   curTab: T.optional(T.enumeration(values(TAB)), TAB.UI),
   editingTag: T.maybeNull(Tag),
   editingAlias: T.maybeNull(Alias),
@@ -109,6 +110,7 @@ const DashboardThread = T.model('DashboardThread', {
       return {
         editingTag: toJS(slf.editingTag),
         tags: toJS(slf.tags),
+        saving: slf.saving,
       }
     },
 
@@ -118,6 +120,7 @@ const DashboardThread = T.model('DashboardThread', {
       return {
         editingAlias: toJS(slf.editingAlias),
         alias: toJS(slf.alias),
+        saving: slf.saving,
       }
     },
 
@@ -132,7 +135,13 @@ const DashboardThread = T.model('DashboardThread', {
       return {
         wallpaper: wallpapers[wallpaper],
         ...pick(
-          ['primaryColor', 'bannerLayout', 'postLayout', 'changelogLayout'],
+          [
+            'saving',
+            'primaryColor',
+            'bannerLayout',
+            'postLayout',
+            'changelogLayout',
+          ],
           slf,
         ),
       }