mobile: fix all typescript errors

axlsaludo · Aug 30, 2022 · 900de4f · 900de4f
1 parent f6b6a0a
commit 900de4f
Show file tree

Hide file tree

Showing 59 changed files with 395 additions and 387 deletions.
diff --git a/apps/mobile/app/common/database/index.js b/apps/mobile/app/common/database/index.js
@@ -53,9 +53,7 @@ export async function loadDatabase() {
   //   DB = module.default;
   // }
   // db = new DB(Storage, Platform.OS === 'ios' ? EventSource : AndroidEventSource, filesystem);
-  // //@ts-ignore
   // if (DOMParser) {
-  //   //@ts-ignore
   //   await DOMParser.prepare();
   // }
 }
diff --git a/apps/mobile/app/components/auth/two-factor.js b/apps/mobile/app/components/auth/two-factor.js
@@ -194,7 +194,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 code.current = value;
                 onNext();
               }}
-              //@ts-ignore
               inputStyle={{
                 fontSize: SIZE.lg,
                 height: 60,
@@ -208,8 +207,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
               containerStyle={{
                 height: 60,
                 borderWidth: 0,
-                //@ts-ignore
-                width: null,
+                width: undefined,
                 minWidth: "50%"
               }}
             />

diff --git a/apps/mobile/app/components/delay-layout/default-placeholder.tsx b/apps/mobile/app/components/delay-layout/default-placeholder.tsx
@@ -10,9 +10,11 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
   const message = useMessageStore((state) => state.message);
   const annoucements = useMessageStore((state) => state.announcements);
   const hasAnnoucements = annoucements.length > 0;
-  //@ts-ignore
   const shadeColor = color
-    ? hexToRGBA(COLORS_NOTE[color?.toLowerCase()], 0.15)
+    ? hexToRGBA(
+        COLORS_NOTE[color?.toLowerCase() as keyof typeof COLORS_NOTE],
+        0.15
+      )
     : colors.shade;
 
   return (

diff --git a/apps/mobile/app/components/sheets/move-notes/movenote.tsx b/apps/mobile/app/components/sheets/move-notes/movenote.tsx
@@ -23,6 +23,15 @@ import { PressableButton } from "../../ui/pressable";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+
+type CommonItemType = {
+  id: string;
+  title: string;
+  headline?: string;
+  type: string;
+  notes?: string[];
+};
+
 export const MoveNotes = ({
   notebook,
   selectedTopic,
@@ -74,7 +83,6 @@ export const MoveNotes = ({
 
   const addNewTopic = async (value: string) => {
     if (!value || value.trim().length === 0) {
-      //@ts-ignore
       ToastEvent.show({
         heading: "Topic title is required",
         type: "error",
@@ -99,13 +107,13 @@ export const MoveNotes = ({
     return true;
   };
 
-  const renderItem = ({ item }: { item: TopicType | NoteType }) => {
+  const renderItem = ({ item }: { item: CommonItemType }) => {
     return (
       <PressableButton
         testID="listitem.select"
         onPress={() => {
           if (item.type == "topic") {
-            setTopic(topic || item);
+            setTopic(topic || (item as TopicType));
           } else {
             select(item.id);
           }
@@ -143,7 +151,7 @@ export const MoveNotes = ({
             }}
             color={colors.icon}
           >
-            {item.notes.length} Notes
+            {item.notes?.length} Notes
           </Paragraph>
         ) : null}
 

diff --git a/apps/mobile/app/components/tip/index.tsx b/apps/mobile/app/components/tip/index.tsx
@@ -47,27 +47,23 @@ export const Tip = ({
         }}
       >
         <Button
-          //@ts-ignore
           title="TIP"
           icon="information"
           fontSize={SIZE.xs}
           iconSize={SIZE.xs}
-          //@ts-ignore
           style={{
-            width: null,
+            width: undefined,
             height: 22,
             paddingHorizontal: 4,
             alignSelf: "flex-start",
             borderRadius: 100,
             borderWidth: 1,
-            //@ts-ignore
-            borderColor: colors[color]
+            borderColor: colors[color as keyof typeof colors] as string
           }}
         />
 
         {neverShowAgain && (
           <Button
-            //@ts-ignore
             title="Never show again"
             type="grayBg"
             icon="close"
@@ -77,9 +73,8 @@ export const Tip = ({
               MMKV.setItem("neverShowSheetTips", "true");
               eSendEvent(eCloseProgressDialog);
             }}
-            //@ts-ignore
             style={{
-              width: null,
+              width: undefined,
               height: 25,
               paddingHorizontal: 4,
               alignSelf: "flex-start",
@@ -116,7 +111,6 @@ export const Tip = ({
 
       {tip.button && (
         <Button
-          //@ts-ignore
           title={tip.button.title}
           type="accent"
           icon={tip.button.icon}

diff --git a/apps/mobile/app/components/ui/animated-button.tsx/index.tsx b/apps/mobile/app/components/ui/animated-button.tsx/index.tsx
@@ -1,13 +1,13 @@
 import React from "react";
-import { ActivityIndicator } from "react-native";
+import { ActivityIndicator, ColorValue, ViewStyle } from "react-native";
 import Animated, {
   FadeIn,
   FadeOut,
   Layout,
   LightSpeedInLeft
 } from "react-native-reanimated";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { ColorKey, useThemeStore } from "../../../stores/use-theme-store";
 import { showTooltip, TOOLTIP_POSITIONS } from "../../../utils";
 import { BUTTON_TYPES } from "../../../utils/constants";
 import { SIZE } from "../../../utils/size";
@@ -44,12 +44,11 @@ export const AnimatedButton = ({
 
   const textColor = buttonType?.text
     ? buttonType.text
-    : //@ts-ignore
-      colors[
+    : (colors[
         type === "accent"
-          ? BUTTON_TYPES[type](accentColor, accentText).text
-          : BUTTON_TYPES[type].text
-      ];
+          ? (BUTTON_TYPES[type](accentColor, accentText).text as ColorKey)
+          : (BUTTON_TYPES[type].text as ColorKey)
+      ] as ColorValue);
   const Component = bold ? Heading : Paragraph;
 
   return (
@@ -81,15 +80,14 @@ export const AnimatedButton = ({
         customAlpha={buttonType?.alpha}
         customStyle={{
           height: height,
-          width: width || null,
+          width: width || undefined,
           paddingHorizontal: 12,
           borderRadius: 5,
           alignSelf: "center",
           justifyContent: "center",
           alignItems: "center",
           flexDirection: "row",
-          //@ts-ignore
-          ...style
+          ...(style as ViewStyle)
         }}
       >
         {loading ? (
@@ -113,7 +111,7 @@ export const AnimatedButton = ({
           <Component
             layout={Layout.springify()}
             animated={true}
-            color={textColor}
+            color={textColor as string}
             size={fontSize}
             numberOfLines={1}
             style={[

diff --git a/apps/mobile/app/components/ui/button/index.tsx b/apps/mobile/app/components/ui/button/index.tsx
@@ -1,7 +1,12 @@
 import React from "react";
-import { ActivityIndicator, ColorValue, TextStyle } from "react-native";
+import {
+  ActivityIndicator,
+  ColorValue,
+  TextStyle,
+  ViewStyle
+} from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { ColorKey, useThemeStore } from "../../../stores/use-theme-store";
 import { showTooltip, TOOLTIP_POSITIONS } from "../../../utils";
 import { BUTTON_TYPES } from "../../../utils/constants";
 import { SIZE } from "../../../utils/size";
@@ -58,12 +63,11 @@ export const Button = ({
 
   const textColor = buttonType?.text
     ? buttonType.text
-    : //@ts-ignore
-      colors[
+    : (colors[
         type === "accent"
-          ? BUTTON_TYPES[type](accentColor, accentText).text
-          : BUTTON_TYPES[type].text
-      ];
+          ? (BUTTON_TYPES[type](accentColor, accentText).text as ColorKey)
+          : (BUTTON_TYPES[type].text as ColorKey)
+      ] as ColorValue);
   const Component = bold ? Heading : Paragraph;
 
   return (
@@ -90,15 +94,14 @@ export const Button = ({
       customAlpha={buttonType?.alpha}
       customStyle={{
         height: height,
-        width: width || null,
+        width: width || undefined,
         paddingHorizontal: 12,
         borderRadius: 5,
         alignSelf: "center",
         justifyContent: "center",
         alignItems: "center",
         flexDirection: "row",
-        //@ts-ignore
-        ...style
+        ...(style as ViewStyle)
       }}
     >
       {loading ? (
@@ -116,7 +119,7 @@ export const Button = ({
       {!title ? null : (
         <Component
           animated={false}
-          color={textColor}
+          color={textColor as string}
           size={fontSize}
           numberOfLines={1}
           style={[

diff --git a/apps/mobile/app/components/ui/icon-button/index.tsx b/apps/mobile/app/components/ui/icon-button/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { ColorValue, GestureResponderEvent, ViewStyle } from "react-native";
 import Animated, { Layout } from "react-native-reanimated";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { ColorKey, useThemeStore } from "../../../stores/use-theme-store";
 import { showTooltip, TOOLTIP_POSITIONS } from "../../../utils";
 import { hexToRGBA, RGB_Linear_Shade } from "../../../utils/color-scheme/utils";
 import { SIZE } from "../../../utils/size";
@@ -76,8 +76,7 @@ export const IconButton = ({
         color={
           restProps.disabled
             ? RGB_Linear_Shade(-0.05, hexToRGBA(colors.nav))
-            : //@ts-ignore
-              colors[color] || color
+            : (colors[color as ColorKey] as ColorValue) || color
         }
         size={size}
       />

diff --git a/apps/mobile/app/components/ui/input/index.tsx b/apps/mobile/app/components/ui/input/index.tsx
@@ -88,12 +88,8 @@ const Input = ({
   const [showError, setShowError] = useState(false);
   const [errorList, setErrorList] = useState({
     SHORT_PASS: true
-    //  NO_ABC: true,
-    //  NO_CAPS_ABC: true,
-    //  NO_NUM: true,
-    //  SPECIAL: true,
   });
-
+  type ErrorKey = keyof typeof errorList;
   const color = error
     ? colors.red
     : focus
@@ -208,8 +204,7 @@ const Input = ({
     height: height || 50,
     flexShrink: 1,
     fontFamily: "OpenSans-Regular",
-    //@ts-ignore
-    ...inputStyle
+    ...(inputStyle as ViewStyle)
   };
 
   return (
@@ -349,36 +344,28 @@ const Input = ({
             marginBottom: 5
           }}
         >
-          {
-            //@ts-ignore
-            Object.keys(errorList).filter((k) => errorList[k] === true)
-              .length !== 0
-              ? Object.keys(ERRORS_LIST).map((error) => (
-                  <View
-                    //@ts-ignore
-                    key={ERRORS_LIST[error]}
-                    style={{
-                      flexDirection: "row",
-                      alignItems: "center"
-                    }}
-                  >
-                    <Icon
-                      //@ts-ignore
-                      name={errorList[error] ? "close" : "check"}
-                      //@ts-ignore
-                      color={errorList[error] ? "red" : "green"}
-                    />
+          {Object.keys(errorList).filter(
+            (k) => errorList[k as ErrorKey] === true
+          ).length !== 0
+            ? Object.keys(ERRORS_LIST).map((error) => (
+                <View
+                  key={ERRORS_LIST[error as ErrorKey]}
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center"
+                  }}
+                >
+                  <Icon
+                    name={errorList[error as ErrorKey] ? "close" : "check"}
+                    color={errorList[error as ErrorKey] ? "red" : "green"}
+                  />
 
-                    <Paragraph style={{ marginLeft: 5 }} size={SIZE.xs}>
-                      {
-                        //@ts-ignore
-                        ERRORS_LIST[error]
-                      }
-                    </Paragraph>
-                  </View>
-                ))
-              : null
-          }
+                  <Paragraph style={{ marginLeft: 5 }} size={SIZE.xs}>
+                    {ERRORS_LIST[error as ErrorKey]}
+                  </Paragraph>
+                </View>
+              ))
+            : null}
         </View>
       )}
     </>

diff --git a/apps/mobile/app/components/ui/pressable/index.tsx b/apps/mobile/app/components/ui/pressable/index.tsx
@@ -8,7 +8,11 @@ import {
   ViewStyle
 } from "react-native";
 import Animated from "react-native-reanimated";
-import { ThemeStore, useThemeStore } from "../../../stores/use-theme-store";
+import {
+  ColorKey,
+  ThemeStore,
+  useThemeStore
+} from "../../../stores/use-theme-store";
 import { hexToRGBA, RGB_Linear_Shade } from "../../../utils/color-scheme/utils";
 import { BUTTON_TYPES } from "../../../utils/constants";
 import { br } from "../../../utils/size";
@@ -48,19 +52,17 @@ export const PressableButton = ({
 
   const selectedColor =
     customSelectedColor ||
-    //@ts-ignore
     colors[
       type === "accent"
-        ? BUTTON_TYPES[type](accentColor, accentText).selected
-        : BUTTON_TYPES[type].selected
+        ? (BUTTON_TYPES[type](accentColor, accentText).selected as ColorKey)
+        : (BUTTON_TYPES[type].selected as ColorKey)
     ];
   const primaryColor =
     customColor ||
-    //@ts-ignore
     colors[
       type === "accent"
-        ? BUTTON_TYPES[type](accentColor, accentText).primary
-        : BUTTON_TYPES[type].primary
+        ? (BUTTON_TYPES[type](accentColor, accentText).primary as ColorKey)
+        : (BUTTON_TYPES[type].primary as ColorKey)
     ];
   const opacity = customOpacity
     ? customOpacity