mobile: take backup before logout

streetwriters · Aug 14, 2024 · b6206e2 · b6206e2
1 parent a910c81
commit b6206e2
Show file tree

Hide file tree

Showing 9 changed files with 325 additions and 221 deletions.
diff --git a/apps/mobile/app/components/dialog/dialog-container.tsx b/apps/mobile/app/components/dialog/dialog-container.tsx
@@ -32,6 +32,7 @@ const DialogContainer = ({
 }: ViewProps & {
   width?: any;
   height?: any;
+  noBorder?: boolean;
 }) => {
   const { colors } = useThemeColors();
 
@@ -41,14 +42,18 @@ const DialogContainer = ({
       style={[
         style,
         {
-          ...getElevationStyle(5),
           width: width || DDS.isTab ? 500 : "85%",
           maxHeight: height || 450,
           borderRadius: 10,
           backgroundColor: colors.primary.background,
-          paddingTop: 12,
-          ...getContainerBorder(colors.secondary.background, 0.8, 0.05)
-        }
+          paddingTop: 12
+        },
+        restProps?.noBorder
+          ? {}
+          : {
+              ...getElevationStyle(5),
+              ...getContainerBorder(colors.secondary.background, 0.8, 0.05)
+            }
       ]}
     />
   );

diff --git a/apps/mobile/app/components/dialog/functions.ts b/apps/mobile/app/components/dialog/functions.ts
@@ -47,7 +47,12 @@ type DialogInfo = {
   keyboardType?: string;
   check?: {
     info: string;
-    type: string;
+    type?: string;
+    defaultValue?: boolean;
+  };
+  notice: {
+    text: string;
+    type: "alert" | "information";
   };
 };
 

diff --git a/apps/mobile/app/components/dialog/index.js b/apps/mobile/app/components/dialog/index.js
@@ -37,6 +37,7 @@ import DialogHeader from "./dialog-header";
 import { useCallback } from "react";
 import { Button } from "../ui/button";
 import { getContainerBorder } from "../../utils/colors";
+import { Notice } from "../ui/notice";
 
 export const Dialog = ({ context = "global" }) => {
   const { colors } = useThemeColors();
@@ -62,7 +63,8 @@ export const Dialog = ({ context = "global" }) => {
     disableBackdropClosing: false,
     check: {
       info: "Check",
-      type: "transparent"
+      type: "transparent",
+      defaultValue: false
     }
   });
 
@@ -86,7 +88,7 @@ export const Dialog = ({ context = "global" }) => {
       if (!data.context) data.context = "global";
       if (data.context !== context) return;
       setDialogInfo(data);
-      setChecked(false);
+      setChecked(data.check?.defaultValue);
       values.current.inputValue = data.defaultValue;
       setVisible(true);
     },
@@ -180,6 +182,19 @@ export const Dialog = ({ context = "global" }) => {
           </View>
         ) : null}
 
+        {dialogInfo?.notice ? (
+          <View
+            style={{
+              paddingHorizontal: 12
+            }}
+          >
+            <Notice
+              type={dialogInfo.notice.type || "information"}
+              text={dialogInfo.notice.text}
+            />
+          </View>
+        ) : null}
+
         {dialogInfo.check ? (
           <>
             <Button
@@ -198,7 +213,7 @@ export const Dialog = ({ context = "global" }) => {
               iconSize={20}
               width="100%"
               title={dialogInfo.check.info}
-              type={checked ? dialogInfo.check.type || "selected" : "plain"}
+              type={checked ? dialogInfo.check.type || "plain" : "plain"}
             />
           </>
         ) : null}

diff --git a/apps/mobile/app/components/dialogs/progress/index.tsx b/apps/mobile/app/components/dialogs/progress/index.tsx
@@ -35,6 +35,8 @@ export type ProgressOptions = {
   cancelCallback?: () => void;
   title?: string;
   paragraph?: string;
+  fillBackground?: boolean;
+  canHideProgress?: boolean;
 };
 
 export const PROGRESS_EVENTS = {
@@ -51,18 +53,23 @@ export default function Progress() {
   const [data, setData] = React.useState<{
     title?: string;
     paragraph?: string;
+    fillBackground?: boolean;
+    canHideProgress?: boolean;
   }>();
 
   useEffect(() => {
     const events = [
       eSubscribeEvent(PROGRESS_EVENTS.start, (options: ProgressOptions) => {
         setProgress(options.progress);
-        setVisible(true);
         cancelCallback.current = options.cancelCallback;
+        console.log("options", options.fillBackground);
         setData({
           title: options.title,
-          paragraph: options.paragraph
+          paragraph: options.paragraph,
+          fillBackground: options.fillBackground,
+          canHideProgress: options.canHideProgress
         });
+        setVisible(true);
       }),
       eSubscribeEvent(PROGRESS_EVENTS.end, () => {
         setProgress(undefined);
@@ -76,16 +83,19 @@ export default function Progress() {
         if (options.cancelCallback) {
           cancelCallback.current = options.cancelCallback;
         }
-        if (options.title) {
-          setData({
-            title: options.title
-          });
-        }
-        if (options.paragraph) {
-          setData({
-            paragraph: options.paragraph
-          });
-        }
+
+        const data: ProgressOptions = {};
+        if (options.title) data.title = options.title;
+        if (options.paragraph) data.paragraph = options.paragraph;
+        if (options.fillBackground)
+          data.fillBackground = options.fillBackground;
+
+        setData((current) => {
+          return {
+            ...current,
+            ...data
+          };
+        });
       })
     ];
     return () => {
@@ -95,12 +105,16 @@ export default function Progress() {
   }, []);
 
   return !visible ? null : (
-    <BaseDialog visible>
+    <BaseDialog
+      background={data?.fillBackground ? colors.primary.background : undefined}
+      visible
+    >
       <DialogContainer
         style={{
           paddingHorizontal: 12,
           paddingBottom: 10
         }}
+        noBorder={data?.fillBackground ? true : false}
       >
         <Dialog context="local" />
         <View
@@ -112,26 +126,6 @@ export default function Progress() {
             paddingBottom: 20
           }}
         >
-          <View
-            style={{
-              flexDirection: "row",
-              width: 100,
-              paddingTop: 20
-            }}
-          >
-            <ProgressBarComponent
-              height={5}
-              width={100}
-              animated={true}
-              useNativeDriver
-              indeterminate
-              indeterminateAnimationDuration={2000}
-              unfilledColor={colors.secondary.background}
-              color={colors.primary.accent}
-              borderWidth={0}
-            />
-          </View>
-
           <Heading
             style={{
               textAlign: "center"
@@ -150,19 +144,41 @@ export default function Progress() {
             {progress ? progress : data?.paragraph}
           </Paragraph>
 
-          <Button
-            title={cancelCallback.current ? "Cancel" : "Hide"}
-            type="secondaryAccented"
-            onPress={() => {
-              if (cancelCallback.current) {
-                cancelCallback.current?.();
-              }
-              setVisible(false);
-              setProgress(undefined);
-              setData(undefined);
+          <View
+            style={{
+              flexDirection: "row",
+              width: 100,
+              paddingVertical: 12
             }}
-            width="100%"
-          />
+          >
+            <ProgressBarComponent
+              height={5}
+              width={100}
+              animated={true}
+              useNativeDriver
+              indeterminate
+              indeterminateAnimationDuration={2000}
+              unfilledColor={colors.secondary.background}
+              color={colors.primary.accent}
+              borderWidth={0}
+            />
+          </View>
+
+          {data?.canHideProgress ? null : (
+            <Button
+              title={cancelCallback.current ? "Cancel" : "Hide"}
+              type="secondaryAccented"
+              onPress={() => {
+                if (cancelCallback.current) {
+                  cancelCallback.current?.();
+                }
+                setVisible(false);
+                setProgress(undefined);
+                setData(undefined);
+              }}
+              width="100%"
+            />
+          )}
         </View>
       </DialogContainer>
     </BaseDialog>

diff --git a/apps/mobile/app/screens/settings/home.tsx b/apps/mobile/app/screens/settings/home.tsx
@@ -18,35 +18,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { View } from "react-native";
 import Animated, { FadeInDown } from "react-native-reanimated";
 import DelayLayout from "../../components/delay-layout";
-import BaseDialog from "../../components/dialog/base-dialog";
-import { ProgressBarComponent } from "../../components/ui/svg/lazy";
-import Heading from "../../components/ui/typography/heading";
-import Paragraph from "../../components/ui/typography/paragraph";
+import { Header } from "../../components/header";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
-import {
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../services/event-manager";
 import useNavigationStore from "../../stores/use-navigation-store";
-import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
 import { SectionGroup } from "./section-group";
 import { settingsGroups } from "./settings-data";
 import { RouteParams, SettingSection } from "./types";
 import SettingsUserSection from "./user-section";
-import { Header } from "../../components/header";
 const keyExtractor = (item: SettingSection) => item.id;
 
 const Home = ({
   navigation
 }: NativeStackScreenProps<RouteParams, "SettingsHome">) => {
-  const { colors } = useThemeColors();
-  const [loading, setLoading] = useState(false);
-
   useNavigationFocus(navigation, {
     onFocus: () => {
       useNavigationStore.getState().setFocusedRouteId("Settings");
@@ -62,16 +49,6 @@ const Home = ({
       <SectionGroup item={item} />
     );
 
-  useEffect(() => {
-    function settingsLoading(state: boolean) {
-      setLoading(state || true);
-    }
-    eSubscribeEvent("settings-loading", settingsLoading);
-    return () => {
-      eUnSubscribeEvent("settings-loading", settingsLoading);
-    };
-  }, []);
-
   return (
     <>
       <Header
@@ -81,57 +58,6 @@ const Home = ({
         id="Settings"
       />
       <DelayLayout delay={300} type="settings">
-        {loading && (
-          //@ts-ignore // Migrate to typescript required.
-          <BaseDialog animated={false} bounce={false} visible={true}>
-            <View
-              style={{
-                width: "100%",
-                height: "100%",
-                backgroundColor: colors.primary.background,
-                justifyContent: "center",
-                alignItems: "center"
-              }}
-            >
-              <View
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  backgroundColor: colors.primary.background,
-                  justifyContent: "center",
-                  alignItems: "center"
-                }}
-              >
-                <Heading color={colors.primary.paragraph} size={SIZE.lg}>
-                  Logging out
-                </Heading>
-                <Paragraph color={colors.secondary.paragraph}>
-                  Please wait while we log out and clear app data.
-                </Paragraph>
-                <View
-                  style={{
-                    flexDirection: "row",
-                    width: 100,
-                    marginTop: 15
-                  }}
-                >
-                  <ProgressBarComponent
-                    height={5}
-                    width={100}
-                    animated={true}
-                    useNativeDriver
-                    indeterminate
-                    indeterminateAnimationDuration={2000}
-                    unfilledColor={colors.secondary.background}
-                    color={colors.primary.accent}
-                    borderWidth={0}
-                  />
-                </View>
-              </View>
-            </View>
-          </BaseDialog>
-        )}
-
         <Animated.FlatList
           entering={FadeInDown}
           data={settingsGroups}