起動がもっさりしているのを修正 (#292)

* update: src/components/molecules/DateInput/Months.tsx

* fix

* update init date

* update init date

App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import * as SplashScreen from 'expo-splash-screen';
 import * as Font from 'expo-font';
@@ -25,52 +25,20 @@ LogBox.ignoreLogs([
   'ColorPropType will be removed',
 ]);
 
-const AppContainer = () => {
-  const [appIsReady, setAppIsReady] = useState(false);
-
-  useEffect(() => {
-    async function prepare() {
-      try {
-        // Keep the splash screen visible while we fetch resources
-        await SplashScreen.preventAutoHideAsync();
-        // Pre-load fonts, make any API calls you need to do here
-        await Font.loadAsync({
-          'RobotoCondensed-Bold': RobotoCondensed_700Bold,
-          'NotoSansJP-Bold': NotoSansJP_700Bold,
-        });
-        // Artificially delay for two seconds to simulate a slow loading
-        // experience. Please remove this if you copy and paste the code!
-        await new Promise((resolve) => setTimeout(resolve, 2000));
-      } catch (e) {
-        console.warn(e);
-      } finally {
-        // Tell the application to render
-        setAppIsReady(true);
-      }
-    }
-
-    prepare();
+SplashScreen.preventAutoHideAsync();
 
-    return () => {};
-  }, []);
-
-  const onLayoutRootView = useCallback(async () => {
-    if (appIsReady) {
-      // This tells the splash screen to hide immediately! If we call this after
-      // `setAppIsReady`, then we may see a blank screen while the app is
-      // loading its initial state and rendering its first pixels. So instead,
-      // we hide the splash screen once we know the root view has already
-      // performed layout.
-      await SplashScreen.hideAsync();
-    }
-  }, [appIsReady]);
+const AppContainer = () => {
+  const [fontsLoaded] = Font.useFonts({
+    'RobotoCondensed-Bold': RobotoCondensed_700Bold,
+    'NotoSansJP-Bold': NotoSansJP_700Bold,
+  });
 
-  if (!appIsReady) {
+  if (!fontsLoaded) {
     return null;
   }
 
   return (
-    <View style={styles.root} onLayout={onLayoutRootView}>
+    <View style={styles.root}>
       <App />
     </View>
   );
@@ -79,6 +47,7 @@ const AppContainer = () => {
 let AppEntryPoint = AppContainer;
 
 if (Constants.expoConfig?.extra?.storybookEnabled === 'true') {
+  SplashScreen.hideAsync();
   AppEntryPoint = require('./.storybook').default;
 }
 

src/App.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { RecoilRoot } from 'recoil';
+import * as SplashScreen from 'expo-splash-screen';
 import { AppState } from 'react-native';
 import * as Sentry from 'sentry-expo';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
@@ -70,6 +71,7 @@ function App() {
 
     const apolloClient = await makeApolloClient();
     setClient(apolloClient);
+    await SplashScreen.hideAsync();
   };
 
   useEffect(() => {

src/components/molecules/DateInput/Days.tsx

@@ -118,6 +118,8 @@ const DayInput: React.FC<Props> = (props) => {
         day: v,
         onPress: props.onPress,
       }))}
+      firstItem={-1}
+      initialNumToRender={6}
       renderItem={renderItemCall}
       sliderWidth={windowWidth}
       itemWidth={55}

src/components/molecules/DateInput/Months.tsx

@@ -33,7 +33,7 @@ const renderItem: React.FC<RenderedItemProps> = ({ item }) => {
   return (
     <TouchableWithoutFeedback
       key={item.month.value}
-      onPress={() => item.onPress(('00' + item.month.value).slice(-2))}
+      onPress={() => item.onPress(`00${item.month.value}`.slice(-2))}
     >
       <View style={styles.monthItem}>
         <Text
@@ -49,12 +49,12 @@ const renderItem: React.FC<RenderedItemProps> = ({ item }) => {
 };
 
 const MonthInput: React.FC<Props> = (props) => {
-  const months = (): Month[] => {
+  const months = useCallback((): Month[] => {
     const index = Number(props.month);
     const first = props.months.slice(index - 1, 12);
     const last = props.months.slice(0, index - 1);
     return [...first, ...last];
-  };
+  }, [props.month, props.months]);
 
   const [monthItems] = useState(months());
 
@@ -76,6 +76,8 @@ const MonthInput: React.FC<Props> = (props) => {
         month: v,
         onPress: props.onPress,
       }))}
+      firstItem={-1}
+      initialNumToRender={6}
       renderItem={renderItemCall}
       sliderWidth={windowWidth}
       itemWidth={75}

src/components/pages/Home/index.tsx

@@ -77,7 +77,7 @@ export const Home: React.FC<Props> = (props) => {
   );
 };
 
-export const HomeScreenOption = (title: string = '') => {
+export const HomeScreenOption = (title = '') => {
   return {
     title,
     headerStyle: {

src/hooks/useFirebaseAuth.tsx

@@ -8,7 +8,7 @@ import { useRecoilValueLoadable, useRecoilState } from 'recoil';
 import { useCallback, useEffect, useState } from 'react';
 import { Alert } from 'react-native';
 import { getFirebaseAuthApp } from 'lib/firebase';
-import { storageKey, getItem, removeItem } from 'lib/storage';
+import { storageKey, getItem, setItem, removeItem } from 'lib/storage';
 import { existAuthUserID } from 'store/selectors';
 import { authUserState, userState } from 'store/atoms';
 import Auth from 'lib/auth';
@@ -62,6 +62,7 @@ const useFirebaseAuth = (login = false, errorCallback?: () => void) => {
 
   const [getUser, userQuery] = useLazyQuery(UserDocument, {
     onCompleted: (data) => {
+      setItem(storageKey.AUTHENTICATED_USER_ID_KEY, data?.user?.id);
       setUser((s) => ({
         ...s,
         id: data?.user?.id || '',
@@ -141,9 +142,14 @@ const useFirebaseAuth = (login = false, errorCallback?: () => void) => {
 
   const setSession = useCallback(
     async (refresh = false) => {
-      const idToken = await auth.setSession(refresh);
+      const auid = await getItem(storageKey.AUTHENTICATED_USER_ID_KEY);
+      if (auid) {
+        getUser();
+      } else {
+        getExistAuthUser();
+      }
 
-      getExistAuthUser();
+      const idToken = await auth.setSession(refresh);
 
       if (idToken) {
         const authUID = await getItem(storageKey.AUTH_UID_KEY);
@@ -154,7 +160,7 @@ const useFirebaseAuth = (login = false, errorCallback?: () => void) => {
 
       return idToken;
     },
-    [setAuthUser, getExistAuthUser]
+    [setAuthUser, getUser, getExistAuthUser]
   );
 
   const firebaseLogin = useCallback(
@@ -225,6 +231,7 @@ const useFirebaseAuth = (login = false, errorCallback?: () => void) => {
 
   const onLogout = useCallback(async () => {
     await auth.logout();
+    await removeItem(storageKey.AUTHENTICATED_USER_ID_KEY);
     await removeItem(storageKey.USER_ID_KEY);
 
     setAuthUser({

src/lib/storage.ts

@@ -8,6 +8,8 @@ const AUTH_UID_KEY = 'AUTH_UID' as const;
 const AUTH_ID_TOKEN_KEY = 'AUTH_ID_TOKEN' as const;
 // Auth id tokenの期限
 const AUTH_ID_TOKEN_EXPIRATION_KEY = 'AUTH_ID_TOKEN_EXPIRATION' as const;
+// ログイン後のユーザーID
+const AUTHENTICATED_USER_ID_KEY = 'AUTHENTICATED_USER_ID' as const;
 // 振り返りの設定
 const MEMOIR_NOTIFICATION_KEY = 'MEMOIR_NOTIFICATION_KEY' as const;
 // OTA updateのリリース
@@ -20,6 +22,7 @@ export const storageKey = {
   AUTH_UID_KEY,
   AUTH_ID_TOKEN_KEY,
   AUTH_ID_TOKEN_EXPIRATION_KEY,
+  AUTHENTICATED_USER_ID_KEY,
   MEMOIR_NOTIFICATION_KEY,
   UPDATES_RELEASE_KEY,
   UPDATES_SKIPPED_KEY,