From 34b512e331c668f8df220ca0724ae68f9982e5f2 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 16:36:41 +0900
Subject: [PATCH 01/33] define blank login and sign up screens

---
 src/screens/loginScreen/index.tsx  | 10 ++++++++++
 src/screens/signUpScreen/index.tsx | 10 ++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 src/screens/loginScreen/index.tsx
 create mode 100644 src/screens/signUpScreen/index.tsx

diff --git a/src/screens/loginScreen/index.tsx b/src/screens/loginScreen/index.tsx
new file mode 100644
index 0000000..e771aa5
--- /dev/null
+++ b/src/screens/loginScreen/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+
+export const LoginScreen: React.VFC = () => {
+  return (
+    <View>
+      <Text>Login Screen</Text>
+    </View>
+  )
+}
diff --git a/src/screens/signUpScreen/index.tsx b/src/screens/signUpScreen/index.tsx
new file mode 100644
index 0000000..b1b3245
--- /dev/null
+++ b/src/screens/signUpScreen/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+
+export const SignUpScreen: React.VFC = () => {
+  return (
+    <View>
+      <Text>Sign Up Screen</Text>
+    </View>
+  )
+}

From 3c5b65760fa9825c3be5939166241ced9ca928a0 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 16:37:23 +0900
Subject: [PATCH 02/33] define new navigation props

---
 .../mainStackNavigation/navigationProps.ts    | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/screens/mainStackNavigation/navigationProps.ts b/src/screens/mainStackNavigation/navigationProps.ts
index 2975d12..6ba5627 100644
--- a/src/screens/mainStackNavigation/navigationProps.ts
+++ b/src/screens/mainStackNavigation/navigationProps.ts
@@ -1,3 +1,19 @@
-export type MainStackNavigationProps = {
-  mainScreen: undefined
+import { NativeStackNavigationProp } from '@react-navigation/native-stack'
+
+export type MainStackParamList = {
+  MainScreen: undefined
+  OnboardingScreen: undefined
+  LoginScreen: undefined
+  SignUpScreen: undefined
+  HomeScreen: undefined
 }
+
+export type LoginScreenNavigationProp = NativeStackNavigationProp<
+  MainStackParamList,
+  'LoginScreen'
+>
+
+export type SignUpScreenNavigationProp = NativeStackNavigationProp<
+  MainStackParamList,
+  'SignUpScreen'
+>

From 5a37c104ba8da09f1be0b1e2d2f110b0c3dc6384 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 16:37:34 +0900
Subject: [PATCH 03/33] define home screen

---
 src/screens/homeScreen/index.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/screens/homeScreen/index.tsx

diff --git a/src/screens/homeScreen/index.tsx b/src/screens/homeScreen/index.tsx
new file mode 100644
index 0000000..af90a4b
--- /dev/null
+++ b/src/screens/homeScreen/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+
+export const HomeScreen: React.VFC = () => {
+  return (
+    <View>
+      <Text>Home Screen</Text>
+    </View>
+  )
+}

From a9efb4bab696324e179bbab2081c190d3a53c423 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 16:37:59 +0900
Subject: [PATCH 04/33] define skelton onboarding screen

---
 .../components/loginButton.tsx                | 14 ++++++++++++
 .../components/signUpButton.tsx               | 14 ++++++++++++
 src/screens/onboardingScreen/index.tsx        | 22 +++++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 src/screens/onboardingScreen/components/loginButton.tsx
 create mode 100644 src/screens/onboardingScreen/components/signUpButton.tsx
 create mode 100644 src/screens/onboardingScreen/index.tsx

diff --git a/src/screens/onboardingScreen/components/loginButton.tsx b/src/screens/onboardingScreen/components/loginButton.tsx
new file mode 100644
index 0000000..b6974d3
--- /dev/null
+++ b/src/screens/onboardingScreen/components/loginButton.tsx
@@ -0,0 +1,14 @@
+import { useNavigation } from '@react-navigation/native'
+import { LoginScreenNavigationProp } from '@screens/mainStackNavigation/navigationProps'
+import React, { useCallback } from 'react'
+import { Button } from 'react-native'
+
+export const LoginButton: React.VFC = () => {
+  const navigation = useNavigation<LoginScreenNavigationProp>()
+
+  const onPress = useCallback(() => {
+    navigation.navigate('LoginScreen')
+  }, [navigation])
+
+  return <Button title="Login" onPress={onPress} />
+}
diff --git a/src/screens/onboardingScreen/components/signUpButton.tsx b/src/screens/onboardingScreen/components/signUpButton.tsx
new file mode 100644
index 0000000..f5c6035
--- /dev/null
+++ b/src/screens/onboardingScreen/components/signUpButton.tsx
@@ -0,0 +1,14 @@
+import { useNavigation } from '@react-navigation/native'
+import { SignUpScreenNavigationProp } from '@screens/mainStackNavigation/navigationProps'
+import React, { useCallback } from 'react'
+import { Button } from 'react-native'
+
+export const SignUpButton: React.VFC = () => {
+  const navigation = useNavigation<SignUpScreenNavigationProp>()
+
+  const onPress = useCallback(() => {
+    navigation.navigate('SignUpScreen')
+  }, [navigation])
+
+  return <Button title="Sign up" onPress={onPress} />
+}
diff --git a/src/screens/onboardingScreen/index.tsx b/src/screens/onboardingScreen/index.tsx
new file mode 100644
index 0000000..866a597
--- /dev/null
+++ b/src/screens/onboardingScreen/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Button, SafeAreaView, View } from 'react-native'
+import tw from 'twrnc'
+import { LoginButton } from './components/loginButton'
+import { SignUpButton } from './components/signUpButton'
+
+export const OnboardingScreen: React.VFC = () => {
+  return (
+    <SafeAreaView>
+      <View style={tw`flex flex-col w-full p-8`}>
+        <View style={tw`w-full h-72 bg-gray-300`}></View>
+        <View style={tw`flex flex-row justify-between`}>
+          <LoginButton />
+          <SignUpButton />
+        </View>
+        <View>
+          <Button title="Continue as guest" onPress={() => {}} />
+        </View>
+      </View>
+    </SafeAreaView>
+  )
+}

From e1499d06e016264fb1e3ce087ec6db4358bdadb7 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 16:38:11 +0900
Subject: [PATCH 05/33] make stack for screens

---
 src/screens/mainStackNavigation/index.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/screens/mainStackNavigation/index.tsx b/src/screens/mainStackNavigation/index.tsx
index 991bdd6..851e61b 100644
--- a/src/screens/mainStackNavigation/index.tsx
+++ b/src/screens/mainStackNavigation/index.tsx
@@ -1,14 +1,22 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { LoginScreen } from '@screens/loginScreen'
 import { MainScreen } from '@screens/mainScreen'
+import { OnboardingScreen } from '@screens/onboardingScreen'
+import { SignUpScreen } from '@screens/signUpScreen'
 import React from 'react'
-import { MainStackNavigationProps } from './navigationProps'
+import { MainStackParamList } from './navigationProps'
 
-const Stack = createNativeStackNavigator<MainStackNavigationProps>()
+const Stack = createNativeStackNavigator<MainStackParamList>()
 
 export const MainStackNavigation: React.VFC = () => {
   return (
-    <Stack.Navigator>
-      <Stack.Screen name="mainScreen">{() => <MainScreen />}</Stack.Screen>
+    <Stack.Navigator initialRouteName="OnboardingScreen">
+      <Stack.Screen name="MainScreen">{() => <MainScreen />}</Stack.Screen>
+      <Stack.Screen name="OnboardingScreen" options={{ headerShown: false }}>
+        {() => <OnboardingScreen />}
+      </Stack.Screen>
+      <Stack.Screen name="LoginScreen">{() => <LoginScreen />}</Stack.Screen>
+      <Stack.Screen name="SignUpScreen">{() => <SignUpScreen />}</Stack.Screen>
     </Stack.Navigator>
   )
 }

From 408c5719cdb41ff83a9914fc358d71bad80a953d Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 17:57:06 +0900
Subject: [PATCH 06/33] store apikey as a recoil state

---
 src/libs/apiKey/infrastructure/react/atoms/apiKey.ts       | 7 +++++++
 .../infrastructure/{ => react}/atoms/apiKeyRepository.ts   | 2 +-
 .../infrastructure/{ => react}/atoms/apiKeyUseCases.ts     | 6 +++---
 src/libs/apiKey/infrastructure/react/object/apiKey.ts      | 3 +++
 4 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 src/libs/apiKey/infrastructure/react/atoms/apiKey.ts
 rename src/libs/apiKey/infrastructure/{ => react}/atoms/apiKeyRepository.ts (67%)
 rename src/libs/apiKey/infrastructure/{ => react}/atoms/apiKeyUseCases.ts (78%)
 create mode 100644 src/libs/apiKey/infrastructure/react/object/apiKey.ts

diff --git a/src/libs/apiKey/infrastructure/react/atoms/apiKey.ts b/src/libs/apiKey/infrastructure/react/atoms/apiKey.ts
new file mode 100644
index 0000000..55cb29b
--- /dev/null
+++ b/src/libs/apiKey/infrastructure/react/atoms/apiKey.ts
@@ -0,0 +1,7 @@
+import { atom } from 'recoil'
+import { ApiKeyObj } from '../object/apiKey'
+
+export const apiKeyState = atom<ApiKeyObj | undefined>({
+  key: 'ApiKey',
+  default: undefined,
+})
diff --git a/src/libs/apiKey/infrastructure/atoms/apiKeyRepository.ts b/src/libs/apiKey/infrastructure/react/atoms/apiKeyRepository.ts
similarity index 67%
rename from src/libs/apiKey/infrastructure/atoms/apiKeyRepository.ts
rename to src/libs/apiKey/infrastructure/react/atoms/apiKeyRepository.ts
index d8d42f2..8cfdf15 100644
--- a/src/libs/apiKey/infrastructure/atoms/apiKeyRepository.ts
+++ b/src/libs/apiKey/infrastructure/react/atoms/apiKeyRepository.ts
@@ -1,5 +1,5 @@
 import { atom } from 'recoil'
-import { ExpoApiKeyRepository } from '../expoApiKeyRepository'
+import { ExpoApiKeyRepository } from '../../expoApiKeyRepository'
 
 export const apiKeyRepository = atom({
   key: 'apiKeyRepository',
diff --git a/src/libs/apiKey/infrastructure/atoms/apiKeyUseCases.ts b/src/libs/apiKey/infrastructure/react/atoms/apiKeyUseCases.ts
similarity index 78%
rename from src/libs/apiKey/infrastructure/atoms/apiKeyUseCases.ts
rename to src/libs/apiKey/infrastructure/react/atoms/apiKeyUseCases.ts
index 166884a..35e3528 100644
--- a/src/libs/apiKey/infrastructure/atoms/apiKeyUseCases.ts
+++ b/src/libs/apiKey/infrastructure/react/atoms/apiKeyUseCases.ts
@@ -6,17 +6,17 @@ import {
 import { selector } from 'recoil'
 import { apiKeyRepository } from './apiKeyRepository'
 
-export const getApiKey = selector({
+export const getApiKeyInstance = selector({
   key: 'getApiKeyUseCase',
   get: ({ get }) => getApiKeyUseCase(get(apiKeyRepository)),
 })
 
-export const saveApiKey = selector({
+export const saveApiKeyInstance = selector({
   key: 'saveApiKeyUseCase',
   get: ({ get }) => saveApiKeyUseCase(get(apiKeyRepository)),
 })
 
-export const deleteApiKey = selector({
+export const deleteApiKeyInstance = selector({
   key: 'deleteApiKeyUseCase',
   get: ({ get }) => deleteApiKeyUseCase(get(apiKeyRepository)),
 })
diff --git a/src/libs/apiKey/infrastructure/react/object/apiKey.ts b/src/libs/apiKey/infrastructure/react/object/apiKey.ts
new file mode 100644
index 0000000..ba11658
--- /dev/null
+++ b/src/libs/apiKey/infrastructure/react/object/apiKey.ts
@@ -0,0 +1,3 @@
+export type ApiKeyObj = {
+  value: string
+}

From 86e1f24a25d9e29f891947226d62c6f5838db3c9 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 17:57:19 +0900
Subject: [PATCH 07/33] save reporter as a recoil state

---
 .../{ => react}/atoms/fetchReporterWithApiKeyUseCase.ts   | 2 +-
 .../{ => react}/atoms/fetchReporterWithPasswordUseCase.ts | 2 +-
 src/libs/reporter/infrastructure/react/atoms/reporter.ts  | 7 +++++++
 .../infrastructure/{ => react}/atoms/reporterClient.ts    | 2 +-
 src/libs/reporter/infrastructure/react/object/reporter.ts | 4 ++++
 src/libs/reporter/infrastructure/redmineReporterClient.ts | 3 ++-
 src/libs/reporter/models/reporter.ts                      | 8 +++++++-
 src/libs/reporter/usecase/reporterDTO.ts                  | 6 ++++--
 8 files changed, 27 insertions(+), 7 deletions(-)
 rename src/libs/reporter/infrastructure/{ => react}/atoms/fetchReporterWithApiKeyUseCase.ts (82%)
 rename src/libs/reporter/infrastructure/{ => react}/atoms/fetchReporterWithPasswordUseCase.ts (82%)
 create mode 100644 src/libs/reporter/infrastructure/react/atoms/reporter.ts
 rename src/libs/reporter/infrastructure/{ => react}/atoms/reporterClient.ts (78%)
 create mode 100644 src/libs/reporter/infrastructure/react/object/reporter.ts

diff --git a/src/libs/reporter/infrastructure/atoms/fetchReporterWithApiKeyUseCase.ts b/src/libs/reporter/infrastructure/react/atoms/fetchReporterWithApiKeyUseCase.ts
similarity index 82%
rename from src/libs/reporter/infrastructure/atoms/fetchReporterWithApiKeyUseCase.ts
rename to src/libs/reporter/infrastructure/react/atoms/fetchReporterWithApiKeyUseCase.ts
index f0b788e..9a4b4bc 100644
--- a/src/libs/reporter/infrastructure/atoms/fetchReporterWithApiKeyUseCase.ts
+++ b/src/libs/reporter/infrastructure/react/atoms/fetchReporterWithApiKeyUseCase.ts
@@ -2,7 +2,7 @@ import { fetchReporterWithApiKeyUseCase } from '@libs/reporter/usecase/usecases'
 import { selector } from 'recoil'
 import { reporterClient } from './reporterClient'
 
-export const fetchReporterWithApiKey = selector({
+export const fetchReporterWithApiKeyInstance = selector({
   key: 'FetchReporterWithApiKeyUseCase',
   get: ({ get }) => fetchReporterWithApiKeyUseCase(get(reporterClient)),
 })
diff --git a/src/libs/reporter/infrastructure/atoms/fetchReporterWithPasswordUseCase.ts b/src/libs/reporter/infrastructure/react/atoms/fetchReporterWithPasswordUseCase.ts
similarity index 82%
rename from src/libs/reporter/infrastructure/atoms/fetchReporterWithPasswordUseCase.ts
rename to src/libs/reporter/infrastructure/react/atoms/fetchReporterWithPasswordUseCase.ts
index 4797b59..fb9b5bc 100644
--- a/src/libs/reporter/infrastructure/atoms/fetchReporterWithPasswordUseCase.ts
+++ b/src/libs/reporter/infrastructure/react/atoms/fetchReporterWithPasswordUseCase.ts
@@ -2,7 +2,7 @@ import { fetchReporterWithPasswordUseCase } from '@libs/reporter/usecase/usecase
 import { selector } from 'recoil'
 import { reporterClient } from './reporterClient'
 
-export const fetchReporterWithPassword = selector({
+export const fetchReporterWithPasswordInstance = selector({
   key: 'FetchReporterWithPasswordUseCase',
   get: ({ get }) => fetchReporterWithPasswordUseCase(get(reporterClient)),
 })
diff --git a/src/libs/reporter/infrastructure/react/atoms/reporter.ts b/src/libs/reporter/infrastructure/react/atoms/reporter.ts
new file mode 100644
index 0000000..5a7c4bd
--- /dev/null
+++ b/src/libs/reporter/infrastructure/react/atoms/reporter.ts
@@ -0,0 +1,7 @@
+import { atom } from 'recoil'
+import { ReporterObj } from '../object/reporter'
+
+export const reporterState = atom<ReporterObj | undefined>({
+  key: 'Reporter',
+  default: undefined,
+})
diff --git a/src/libs/reporter/infrastructure/atoms/reporterClient.ts b/src/libs/reporter/infrastructure/react/atoms/reporterClient.ts
similarity index 78%
rename from src/libs/reporter/infrastructure/atoms/reporterClient.ts
rename to src/libs/reporter/infrastructure/react/atoms/reporterClient.ts
index 37ebe3c..e3dcbe8 100644
--- a/src/libs/reporter/infrastructure/atoms/reporterClient.ts
+++ b/src/libs/reporter/infrastructure/react/atoms/reporterClient.ts
@@ -1,6 +1,6 @@
 import { redmineBaseURL } from '@libs/redmine/infrastructure/atoms/redmineBaseURL'
 import { selector } from 'recoil'
-import { RedmineReporterClient } from '../redmineReporterClient'
+import { RedmineReporterClient } from '../../redmineReporterClient'
 
 export const reporterClient = selector({
   key: 'ReporterClient',
diff --git a/src/libs/reporter/infrastructure/react/object/reporter.ts b/src/libs/reporter/infrastructure/react/object/reporter.ts
new file mode 100644
index 0000000..4a5509f
--- /dev/null
+++ b/src/libs/reporter/infrastructure/react/object/reporter.ts
@@ -0,0 +1,4 @@
+export type ReporterObj = {
+  id: number
+  nickname: string
+}
diff --git a/src/libs/reporter/infrastructure/redmineReporterClient.ts b/src/libs/reporter/infrastructure/redmineReporterClient.ts
index e36ee98..9576c31 100644
--- a/src/libs/reporter/infrastructure/redmineReporterClient.ts
+++ b/src/libs/reporter/infrastructure/redmineReporterClient.ts
@@ -57,7 +57,8 @@ export class RedmineReporterClient implements ReporterClient {
 
     const id = ReporterID.of(user.id)
     const nickname = NickName.of(user.displayname)
+    const apiKey = ApiKey.of(user.api_key)
 
-    return new Reporter(id, nickname)
+    return new Reporter(id, nickname, apiKey)
   }
 }
diff --git a/src/libs/reporter/models/reporter.ts b/src/libs/reporter/models/reporter.ts
index b48ca39..0ffe02a 100644
--- a/src/libs/reporter/models/reporter.ts
+++ b/src/libs/reporter/models/reporter.ts
@@ -1,10 +1,12 @@
+import { ApiKey } from '@libs/apiKey/models/apiKey'
 import { NickName } from './nickname'
 import { ReporterID } from './reporterID'
 
 export class Reporter {
   constructor(
     private readonly _id: ReporterID,
-    private readonly _nickname: NickName
+    private readonly _nickname: NickName,
+    private readonly _apiKey: ApiKey
   ) {}
 
   public get id(): number {
@@ -14,4 +16,8 @@ export class Reporter {
   public get nickname(): string {
     return this._nickname.value
   }
+
+  public get apiKey(): string {
+    return this._apiKey.value
+  }
 }
diff --git a/src/libs/reporter/usecase/reporterDTO.ts b/src/libs/reporter/usecase/reporterDTO.ts
index d4a4dfd..49f28c2 100644
--- a/src/libs/reporter/usecase/reporterDTO.ts
+++ b/src/libs/reporter/usecase/reporterDTO.ts
@@ -4,12 +4,14 @@ export class ReporterDTO {
   public static fromReporter(reporter: Reporter): ReporterDTO {
     const id = reporter.id
     const nickname = reporter.nickname
+    const apiKey = reporter.apiKey
 
-    return new ReporterDTO(id, nickname)
+    return new ReporterDTO(id, nickname, apiKey)
   }
 
   private constructor(
     public readonly id: number,
-    public readonly nickname: string
+    public readonly nickname: string,
+    public readonly apiKey: string
   ) {}
 }

From 510c664a65516fe4e4bab0c430f6ec9a3e78f02e Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 17:58:15 +0900
Subject: [PATCH 08/33] put logout button temporary

---
 .../homeScreen/components/logoutButton.tsx    | 21 +++++++++++++++++++
 src/screens/homeScreen/index.tsx              |  2 ++
 2 files changed, 23 insertions(+)
 create mode 100644 src/screens/homeScreen/components/logoutButton.tsx

diff --git a/src/screens/homeScreen/components/logoutButton.tsx b/src/screens/homeScreen/components/logoutButton.tsx
new file mode 100644
index 0000000..38f4cf4
--- /dev/null
+++ b/src/screens/homeScreen/components/logoutButton.tsx
@@ -0,0 +1,21 @@
+import { deleteApiKeyInstance } from '@libs/apiKey/infrastructure/react/atoms/apiKeyUseCases'
+import { reporterState } from '@libs/reporter/infrastructure/react/atoms/reporter'
+import React, { useCallback } from 'react'
+import { Button } from 'react-native'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+
+export const LogoutButton: React.VFC = () => {
+  const deleteApiKey = useRecoilValue(deleteApiKeyInstance)
+  const setReporter = useSetRecoilState(reporterState)
+
+  const logout = useCallback(async () => {
+    await deleteApiKey()
+    setReporter(undefined)
+  }, [deleteApiKey, setReporter])
+
+  const onPress = useCallback(async () => {
+    await logout()
+  }, [logout])
+
+  return <Button title="Logout" onPress={onPress} />
+}
diff --git a/src/screens/homeScreen/index.tsx b/src/screens/homeScreen/index.tsx
index af90a4b..b6ab6ed 100644
--- a/src/screens/homeScreen/index.tsx
+++ b/src/screens/homeScreen/index.tsx
@@ -1,10 +1,12 @@
 import React from 'react'
 import { Text, View } from 'react-native'
+import { LogoutButton } from './components/logoutButton'
 
 export const HomeScreen: React.VFC = () => {
   return (
     <View>
       <Text>Home Screen</Text>
+      <LogoutButton />
     </View>
   )
 }

From 30ec60a15e3353c9975eb1d25c63cf72a6c25fa4 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 17:59:30 +0900
Subject: [PATCH 09/33] echo tmp message

---
 src/screens/onboardingScreen/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/screens/onboardingScreen/index.tsx b/src/screens/onboardingScreen/index.tsx
index 866a597..ab4f963 100644
--- a/src/screens/onboardingScreen/index.tsx
+++ b/src/screens/onboardingScreen/index.tsx
@@ -14,7 +14,12 @@ export const OnboardingScreen: React.VFC = () => {
           <SignUpButton />
         </View>
         <View>
-          <Button title="Continue as guest" onPress={() => {}} />
+          <Button
+            title="Continue as guest"
+            onPress={() => {
+              console.log('continue as a guest')
+            }}
+          />
         </View>
       </View>
     </SafeAreaView>

From 1028b70e03a5f72ea19ea913448de857aeaf1844 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 18:00:29 +0900
Subject: [PATCH 10/33] add home screen

---
 src/screens/mainStackNavigation/index.tsx          | 2 ++
 src/screens/mainStackNavigation/navigationProps.ts | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/src/screens/mainStackNavigation/index.tsx b/src/screens/mainStackNavigation/index.tsx
index 851e61b..ae8c5db 100644
--- a/src/screens/mainStackNavigation/index.tsx
+++ b/src/screens/mainStackNavigation/index.tsx
@@ -1,4 +1,5 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { HomeScreen } from '@screens/homeScreen'
 import { LoginScreen } from '@screens/loginScreen'
 import { MainScreen } from '@screens/mainScreen'
 import { OnboardingScreen } from '@screens/onboardingScreen'
@@ -17,6 +18,7 @@ export const MainStackNavigation: React.VFC = () => {
       </Stack.Screen>
       <Stack.Screen name="LoginScreen">{() => <LoginScreen />}</Stack.Screen>
       <Stack.Screen name="SignUpScreen">{() => <SignUpScreen />}</Stack.Screen>
+      <Stack.Screen name="HomeScreen">{() => <HomeScreen />}</Stack.Screen>
     </Stack.Navigator>
   )
 }
diff --git a/src/screens/mainStackNavigation/navigationProps.ts b/src/screens/mainStackNavigation/navigationProps.ts
index 6ba5627..4d0bea1 100644
--- a/src/screens/mainStackNavigation/navigationProps.ts
+++ b/src/screens/mainStackNavigation/navigationProps.ts
@@ -17,3 +17,8 @@ export type SignUpScreenNavigationProp = NativeStackNavigationProp<
   MainStackParamList,
   'SignUpScreen'
 >
+
+export type HomeScreenNavigationprop = NativeStackNavigationProp<
+  MainStackParamList,
+  'HomeScreen'
+>

From aac191f8e57fb88c424b062143ceaae6f0576794 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 18:01:00 +0900
Subject: [PATCH 11/33] implement login button

---
 .../components/forgetPasswordButton.tsx       |  9 ++++
 .../loginScreen/components/loginButton.tsx    | 47 +++++++++++++++++++
 src/screens/loginScreen/hooks/useEmail.ts     | 16 +++++++
 src/screens/loginScreen/hooks/usePassword.ts  | 16 +++++++
 src/screens/loginScreen/index.tsx             | 29 +++++++++++-
 5 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 src/screens/loginScreen/components/forgetPasswordButton.tsx
 create mode 100644 src/screens/loginScreen/components/loginButton.tsx
 create mode 100644 src/screens/loginScreen/hooks/useEmail.ts
 create mode 100644 src/screens/loginScreen/hooks/usePassword.ts

diff --git a/src/screens/loginScreen/components/forgetPasswordButton.tsx b/src/screens/loginScreen/components/forgetPasswordButton.tsx
new file mode 100644
index 0000000..4285130
--- /dev/null
+++ b/src/screens/loginScreen/components/forgetPasswordButton.tsx
@@ -0,0 +1,9 @@
+import React, { useCallback } from 'react'
+import { Button } from 'react-native'
+
+export const ForgetPasswordButton: React.VFC = () => {
+  const onPress = useCallback(() => {
+    console.log('forget password')
+  }, [])
+  return <Button title="Forget password" onPress={onPress} />
+}
diff --git a/src/screens/loginScreen/components/loginButton.tsx b/src/screens/loginScreen/components/loginButton.tsx
new file mode 100644
index 0000000..a921ce9
--- /dev/null
+++ b/src/screens/loginScreen/components/loginButton.tsx
@@ -0,0 +1,47 @@
+import { saveApiKeyInstance } from '@libs/apiKey/infrastructure/react/atoms/apiKeyUseCases'
+import { fetchReporterWithPasswordInstance } from '@libs/reporter/infrastructure/react/atoms/fetchReporterWithPasswordUseCase'
+import { reporterState } from '@libs/reporter/infrastructure/react/atoms/reporter'
+import { CommonActions, useNavigation } from '@react-navigation/native'
+import { HomeScreenNavigationprop } from '@screens/mainStackNavigation/navigationProps'
+import React, { useCallback } from 'react'
+import { Button } from 'react-native'
+import { useSetRecoilState, useRecoilValue } from 'recoil'
+
+type LoginButtonProps = {
+  email: string
+  password: string
+}
+
+export const LoginButton: React.VFC<LoginButtonProps> = ({
+  email,
+  password,
+}) => {
+  const setReporter = useSetRecoilState(reporterState)
+  const fetchReporterWithPassword = useRecoilValue(
+    fetchReporterWithPasswordInstance
+  )
+  const saveApiKey = useRecoilValue(saveApiKeyInstance)
+
+  const login = useCallback(
+    async (email: string, password: string) => {
+      const reporterDTO = await fetchReporterWithPassword(email, password)
+      const { apiKey, ...reporterObj } = reporterDTO
+      await saveApiKey(apiKey)
+      setReporter(reporterObj)
+    },
+    [fetchReporterWithPassword, saveApiKey, setReporter]
+  )
+
+  const navigation = useNavigation<HomeScreenNavigationprop>()
+
+  const onPress = useCallback(async () => {
+    await login(email, password)
+    const resetAction = CommonActions.reset({
+      index: 1,
+      routes: [{ name: 'HomeScreen' }],
+    })
+    navigation.dispatch(resetAction)
+  }, [email, login, navigation, password])
+
+  return <Button title="Login" onPress={onPress} />
+}
diff --git a/src/screens/loginScreen/hooks/useEmail.ts b/src/screens/loginScreen/hooks/useEmail.ts
new file mode 100644
index 0000000..b8d5beb
--- /dev/null
+++ b/src/screens/loginScreen/hooks/useEmail.ts
@@ -0,0 +1,16 @@
+import { useCallback, useState } from 'react'
+
+type UseEmail = {
+  email: string
+  setEmail: (value: string) => void
+}
+
+export function useEmail(): UseEmail {
+  const [email, _setEmail] = useState('')
+
+  const setEmail = useCallback((value: string) => {
+    _setEmail(value)
+  }, [])
+
+  return { email, setEmail }
+}
diff --git a/src/screens/loginScreen/hooks/usePassword.ts b/src/screens/loginScreen/hooks/usePassword.ts
new file mode 100644
index 0000000..cf39c30
--- /dev/null
+++ b/src/screens/loginScreen/hooks/usePassword.ts
@@ -0,0 +1,16 @@
+import { useCallback, useState } from 'react'
+
+type usePassword = {
+  password: string
+  setPassword: (value: string) => void
+}
+
+export function usePassword(): usePassword {
+  const [password, _setPassword] = useState('')
+
+  const setPassword = useCallback((value: string) => {
+    _setPassword(value)
+  }, [])
+
+  return { password, setPassword }
+}
diff --git a/src/screens/loginScreen/index.tsx b/src/screens/loginScreen/index.tsx
index e771aa5..c485182 100644
--- a/src/screens/loginScreen/index.tsx
+++ b/src/screens/loginScreen/index.tsx
@@ -1,10 +1,35 @@
 import React from 'react'
-import { Text, View } from 'react-native'
+import { TextInput, View } from 'react-native'
+import tw from 'twrnc'
+import { ForgetPasswordButton } from './components/forgetPasswordButton'
+import { LoginButton } from './components/loginButton'
+import { useEmail } from './hooks/useEmail'
+import { usePassword } from './hooks/usePassword'
 
 export const LoginScreen: React.VFC = () => {
+  const { email, setEmail } = useEmail()
+  const { password, setPassword } = usePassword()
+
   return (
     <View>
-      <Text>Login Screen</Text>
+      <View style={tw`flex flex-col p-8`}>
+        <View style={tw`w-full h-72 bg-gray-300`}></View>
+        <TextInput
+          style={tw`h-12 border`}
+          value={email}
+          onChangeText={setEmail}
+          placeholder="Email"
+        />
+        <TextInput
+          style={tw`h-12 border`}
+          value={password}
+          onChangeText={setPassword}
+          placeholder="Password"
+          secureTextEntry={true}
+        />
+        <LoginButton email={email} password={password} />
+        <ForgetPasswordButton />
+      </View>
     </View>
   )
 }

From 863c04d3a71ad7166693671a4092b7662ebe6097 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 22:11:49 +0900
Subject: [PATCH 12/33] install expo-app-loading

---
 package.json |   1 +
 yarn.lock    | 111 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 110 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index e7bfc15..fff7d6f 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@react-navigation/native-stack": "^6.5.0",
     "dotenv": "^16.0.0",
     "expo": "~44.0.0",
+    "expo-app-loading": "~1.3.0",
     "expo-secure-store": "~11.1.0",
     "expo-status-bar": "~1.2.0",
     "react": "17.0.1",
diff --git a/yarn.lock b/yarn.lock
index 222e25a..4c8f4ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1188,6 +1188,28 @@
     xcode "^3.0.1"
     xml2js "0.4.23"
 
+"@expo/config-plugins@4.0.18":
+  version "4.0.18"
+  resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-4.0.18.tgz#80cf6a3aed83e78f714ad097d80e5a7cca48591a"
+  integrity sha512-tW4bnrnKhn+PPHF8wf1KAoubICAVUHW8CcagvyFqaRIzeh6yavMIOsQShxOVTbgx7LzSyymZ1nEs45yCGAiMfA==
+  dependencies:
+    "@expo/config-types" "^44.0.0"
+    "@expo/json-file" "8.2.34"
+    "@expo/plist" "0.0.17"
+    "@expo/sdk-runtime-versions" "^1.0.0"
+    "@react-native/normalize-color" "^2.0.0"
+    chalk "^4.1.2"
+    debug "^4.3.1"
+    find-up "~5.0.0"
+    fs-extra "9.0.0"
+    getenv "^1.0.0"
+    glob "7.1.6"
+    resolve-from "^5.0.0"
+    semver "^7.3.5"
+    slash "^3.0.0"
+    xcode "^3.0.1"
+    xml2js "0.4.23"
+
 "@expo/config-plugins@4.0.6":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-4.0.6.tgz#ef52f0e4d96ddd52b4cd4cc8c6efbe3d9576c72d"
@@ -1214,6 +1236,11 @@
   resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-43.0.1.tgz#3e047dccb371741a540980eaff26fb0c95039c30"
   integrity sha512-EtllpCGDdB/UdwAIs5YXJwBLpbFQNdlLLrxIvoILA9cXrpQMWkeDCT9lQPJzFRMFcLUaMuGvkzX2tR4tx5EQFQ==
 
+"@expo/config-types@^44.0.0":
+  version "44.0.0"
+  resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-44.0.0.tgz#d3480fe2c99f9e895dae4ebba58b74ed72d03e26"
+  integrity sha512-d+gpdKOAhqaD5RmcMzGgKzNtvE1w+GCqpFQNSXLliYlXjj+Tv0eL8EPeAdPtvke0vowpPFwd5McXLA90dgY6Jg==
+
 "@expo/config@6.0.16":
   version "6.0.16"
   resolved "https://registry.yarnpkg.com/@expo/config/-/config-6.0.16.tgz#3e603700b8d270d90718f8ca16a82e761a7f71fc"
@@ -1248,6 +1275,23 @@
     slugify "^1.3.4"
     sucrase "^3.20.0"
 
+"@expo/config@6.0.18":
+  version "6.0.18"
+  resolved "https://registry.yarnpkg.com/@expo/config/-/config-6.0.18.tgz#fb3dd2dcf319a7ced77765c43e6825de4e14dff8"
+  integrity sha512-60z0YICI9eJWlvajl/Wgq8+lKm0jfkZOMdATDQtWz6GvWshUxd+A8EYhtgjJ9eWMGqOYkwrCpRNLHz5TZtCKWA==
+  dependencies:
+    "@babel/code-frame" "~7.10.4"
+    "@expo/config-plugins" "4.0.18"
+    "@expo/config-types" "^44.0.0"
+    "@expo/json-file" "8.2.34"
+    getenv "^1.0.0"
+    glob "7.1.6"
+    require-from-string "^2.0.2"
+    resolve-from "^5.0.0"
+    semver "7.3.2"
+    slugify "^1.3.4"
+    sucrase "^3.20.0"
+
 "@expo/config@6.0.6":
   version "6.0.6"
   resolved "https://registry.yarnpkg.com/@expo/config/-/config-6.0.6.tgz#64b49b93f07cb046f5a8538a1793bef9070d8d52"
@@ -1265,6 +1309,20 @@
     slugify "^1.3.4"
     sucrase "^3.20.0"
 
+"@expo/configure-splash-screen@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@expo/configure-splash-screen/-/configure-splash-screen-0.6.0.tgz#07d97ee512fd859fcc09506ba3762fd6263ebc39"
+  integrity sha512-4DyPoNXJqx9bN4nEwF3HQreo//ECu7gDe1Xor3dnnzFm9P/VDxAKdbEhA0n+R6fgkNfT2onVHWijqvdpTS3Xew==
+  dependencies:
+    color-string "^1.5.3"
+    commander "^5.1.0"
+    fs-extra "^9.0.0"
+    glob "^7.1.6"
+    lodash "^4.17.15"
+    pngjs "^5.0.0"
+    xcode "^3.0.0"
+    xml-js "^1.6.11"
+
 "@expo/dev-server@0.1.104":
   version "0.1.104"
   resolved "https://registry.yarnpkg.com/@expo/dev-server/-/dev-server-0.1.104.tgz#ff5f8b06adaf386eeb1510f1282933621cbc19a1"
@@ -1498,6 +1556,23 @@
     semver "7.3.2"
     xml2js "0.4.23"
 
+"@expo/prebuild-config@^3.0.15":
+  version "3.0.18"
+  resolved "https://registry.yarnpkg.com/@expo/prebuild-config/-/prebuild-config-3.0.18.tgz#5eb0358edc0173e9809f515cc1a280c48943cc73"
+  integrity sha512-Eyb+HJCsxYba2sWlDi3rqXWQ3jDjN41rSiYmvApY121Zqdrrj/384ntHZh6cbz0LWPeHXjPZBM3SDbK0ri9FTw==
+  dependencies:
+    "@expo/config" "6.0.18"
+    "@expo/config-plugins" "4.0.18"
+    "@expo/config-types" "^44.0.0"
+    "@expo/image-utils" "0.3.18"
+    "@expo/json-file" "8.2.34"
+    debug "^4.3.1"
+    expo-modules-autolinking "~0.5.1"
+    fs-extra "^9.0.0"
+    resolve-from "^5.0.0"
+    semver "7.3.2"
+    xml2js "0.4.23"
+
 "@expo/results@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@expo/results/-/results-1.0.0.tgz#fd4b22f936ceafce23b04799f54b87fe2a9e18d1"
@@ -4307,7 +4382,7 @@ color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.6.0:
+color-string@^1.5.3, color-string@^1.6.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.0.tgz#63b6ebd1bec11999d1df3a79a7569451ac2be8aa"
   integrity sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==
@@ -4365,6 +4440,11 @@ commander@^4.0.0, commander@^4.1.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
+  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
+
 commander@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
@@ -5868,6 +5948,13 @@ expect@^26.6.2:
     jest-message-util "^26.6.2"
     jest-regex-util "^26.0.0"
 
+expo-app-loading@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/expo-app-loading/-/expo-app-loading-1.3.0.tgz#2023f11e1420d423478474942c0d1c74e1afa335"
+  integrity sha512-IbMI1w2a79IXw2uH/dgwxWmXW9uR5DNjY/mDKdUCGR0tjMeeliZRq66gGdRLgCkfXS2b2WMIi03gB05l7SiQeg==
+  dependencies:
+    expo-splash-screen "~0.14.0"
+
 expo-application@~4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/expo-application/-/expo-application-4.0.2.tgz#860dbd12132a56de7cf75fe7b5146b6cd97ed30e"
@@ -6016,6 +6103,14 @@ expo-secure-store@~11.1.0:
   resolved "https://registry.yarnpkg.com/expo-secure-store/-/expo-secure-store-11.1.1.tgz#16f727f56f5b0eef9817fc0d64d79be26f8a34a8"
   integrity sha512-pCajYYoZbl8IORxXw83SLUsWlU6a+HmjJZP8oiSvkG1KnZ5gPepiAMRRmcFUApYXBgiOvKRGOBEUfVwmR7yO4A==
 
+expo-splash-screen@~0.14.0:
+  version "0.14.2"
+  resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.14.2.tgz#2598d6980e71ecd8b7467ca821fb9dbfb80f355b"
+  integrity sha512-X25D/0E2AWEFGgDWIVXZ5Bl7FhYk7TgVhEWvplBqrDY7G7vg5l1aoH6PelOQINWPsa1dcRyA7REdN2ltO+0LAw==
+  dependencies:
+    "@expo/configure-splash-screen" "^0.6.0"
+    "@expo/prebuild-config" "^3.0.15"
+
 expo-status-bar@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/expo-status-bar/-/expo-status-bar-1.2.0.tgz#16e73205da563f9536f562e439081e30e318a82e"
@@ -10635,6 +10730,11 @@ pngjs@3.4.0, pngjs@^3.3.0:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
+pngjs@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
+  integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
+
 pnp-webpack-plugin@^1.5.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.7.0.tgz#65741384f6d8056f36e2255a8d67ffc20866f5c9"
@@ -14088,7 +14188,7 @@ xcode@^2.0.0:
     simple-plist "^1.0.0"
     uuid "^3.3.2"
 
-xcode@^3.0.1:
+xcode@^3.0.0, xcode@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/xcode/-/xcode-3.0.1.tgz#3efb62aac641ab2c702458f9a0302696146aa53c"
   integrity sha512-kCz5k7J7XbJtjABOvkc5lJmkiDh8VhjVCGNiqdKCscmVpdVUpEAyXv1xmCLkQJ5dsHqx3IPO4XW+NTDhU/fatA==
@@ -14166,6 +14266,13 @@ xdl@59.2.26:
     webpack-dev-server "3.11.0"
     wrap-ansi "^7.0.0"
 
+xml-js@^1.6.11:
+  version "1.6.11"
+  resolved "https://registry.yarnpkg.com/xml-js/-/xml-js-1.6.11.tgz#927d2f6947f7f1c19a316dd8eea3614e8b18f8e9"
+  integrity sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==
+  dependencies:
+    sax "^1.2.4"
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"

From a5458821a9c4b1cf4792bc03a9752c51db5d248e Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 23:33:38 +0900
Subject: [PATCH 13/33] define init screen

---
 .../initScreen/hooks/useAuthenticate.ts       | 33 +++++++++++++++++++
 .../initScreen/hooks/useIsAuthenticated.ts    | 21 ++++++++++++
 src/screens/initScreen/index.tsx              | 26 +++++++++++++++
 3 files changed, 80 insertions(+)
 create mode 100644 src/screens/initScreen/hooks/useAuthenticate.ts
 create mode 100644 src/screens/initScreen/hooks/useIsAuthenticated.ts
 create mode 100644 src/screens/initScreen/index.tsx

diff --git a/src/screens/initScreen/hooks/useAuthenticate.ts b/src/screens/initScreen/hooks/useAuthenticate.ts
new file mode 100644
index 0000000..6357a47
--- /dev/null
+++ b/src/screens/initScreen/hooks/useAuthenticate.ts
@@ -0,0 +1,33 @@
+import { apiKeyState } from '@libs/apiKey/infrastructure/react/atoms/apiKey'
+import { getApiKeyInstance } from '@libs/apiKey/infrastructure/react/atoms/apiKeyUseCases'
+import { ApiKey } from '@libs/apiKey/models/apiKey'
+import { fetchReporterWithApiKeyInstance } from '@libs/reporter/infrastructure/react/atoms/fetchReporterWithApiKeyUseCase'
+import { reporterState } from '@libs/reporter/infrastructure/react/atoms/reporter'
+import { useCallback } from 'react'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+
+export function useAuthenticate() {
+  const fetchReporterWithApiKey = useRecoilValue(
+    fetchReporterWithApiKeyInstance
+  )
+  const setReporter = useSetRecoilState(reporterState)
+  const getApiKey = useRecoilValue(getApiKeyInstance)
+  const setApiKey = useSetRecoilState(apiKeyState)
+
+  const authenticate = useCallback(async () => {
+    try {
+      const apiKeyDTO = await getApiKey()
+      const apiKey = ApiKey.of(apiKeyDTO.value)
+      const reporterDTO = await fetchReporterWithApiKey(apiKey)
+      setReporter(reporterDTO)
+      setApiKey(apiKey)
+    } catch (e) {
+      if (e instanceof Error) {
+        // TODO: This message should sent into Sentry
+        console.log(`Failed to auth with stored api key: ${e.message}`)
+      }
+    }
+  }, [fetchReporterWithApiKey, getApiKey, setApiKey, setReporter])
+
+  return { authenticate }
+}
diff --git a/src/screens/initScreen/hooks/useIsAuthenticated.ts b/src/screens/initScreen/hooks/useIsAuthenticated.ts
new file mode 100644
index 0000000..e9dfbcf
--- /dev/null
+++ b/src/screens/initScreen/hooks/useIsAuthenticated.ts
@@ -0,0 +1,21 @@
+import { apiKeyState } from '@libs/apiKey/infrastructure/react/atoms/apiKey'
+import { reporterState } from '@libs/reporter/infrastructure/react/atoms/reporter'
+import { useEffect, useState } from 'react'
+import { useRecoilValue } from 'recoil'
+
+export function useIsAuthenticated() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+
+  const apiKey = useRecoilValue(apiKeyState)
+  const reporter = useRecoilValue(reporterState)
+
+  useEffect(() => {
+    const hasApiKey = apiKey !== undefined
+    const hasReporter = reporter !== undefined
+    const state = hasApiKey && hasReporter
+
+    setIsAuthenticated(state)
+  }, [apiKey, reporter])
+
+  return { isAuthenticated }
+}
diff --git a/src/screens/initScreen/index.tsx b/src/screens/initScreen/index.tsx
new file mode 100644
index 0000000..485caeb
--- /dev/null
+++ b/src/screens/initScreen/index.tsx
@@ -0,0 +1,26 @@
+import { MainStackNavigation } from '@screens/mainStackNavigation'
+import React, { useEffect, useState } from 'react'
+import { useAuthenticate } from './hooks/useAuthenticate'
+import { useIsAuthenticated } from './hooks/useIsAuthenticated'
+import AppLoading from 'expo-app-loading'
+
+export const InitScreen: React.VFC = () => {
+  const [isLoading, setIsLoading] = useState(true)
+  const { authenticate } = useAuthenticate()
+  const { isAuthenticated } = useIsAuthenticated()
+
+  useEffect(() => {
+    async function init() {
+      await authenticate()
+      setIsLoading(false)
+    }
+    init()
+    /* eslint react-hooks/exhaustive-deps: 0 */
+  }, [])
+
+  if (isLoading) {
+    return <AppLoading autoHideSplash={true} />
+  }
+
+  return <MainStackNavigation isAuthenticated={isAuthenticated} />
+}

From 1e3b84016a3456324ebb790e22d6416f47fb7f73 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 23:34:56 +0900
Subject: [PATCH 14/33] pass authenticated state

---
 src/screens/mainStackNavigation/index.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/screens/mainStackNavigation/index.tsx b/src/screens/mainStackNavigation/index.tsx
index ae8c5db..0a347b6 100644
--- a/src/screens/mainStackNavigation/index.tsx
+++ b/src/screens/mainStackNavigation/index.tsx
@@ -9,9 +9,17 @@ import { MainStackParamList } from './navigationProps'
 
 const Stack = createNativeStackNavigator<MainStackParamList>()
 
-export const MainStackNavigation: React.VFC = () => {
+type MainStackNavigationProps = {
+  isAuthenticated: boolean
+}
+
+export const MainStackNavigation: React.VFC<MainStackNavigationProps> = ({
+  isAuthenticated,
+}) => {
   return (
-    <Stack.Navigator initialRouteName="OnboardingScreen">
+    <Stack.Navigator
+      initialRouteName={isAuthenticated ? 'HomeScreen' : 'OnboardingScreen'}
+    >
       <Stack.Screen name="MainScreen">{() => <MainScreen />}</Stack.Screen>
       <Stack.Screen name="OnboardingScreen" options={{ headerShown: false }}>
         {() => <OnboardingScreen />}

From 3acac747a6c135f61754c7d94dd5af3f75725e0c Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 23:35:10 +0900
Subject: [PATCH 15/33] show init screen

---
 src/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index af53853..0e3fd9e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
 import { StatusBar } from 'expo-status-bar'
 import { NavigationContainer } from '@react-navigation/native'
-import { MainStackNavigation } from '@screens/mainStackNavigation'
 import { RecoilRoot } from 'recoil'
+import { InitScreen } from '@screens/initScreen'
 
 export const App: React.VFC = () => {
   return (
     <RecoilRoot>
       <NavigationContainer>
-        <MainStackNavigation />
+        <InitScreen />
         <StatusBar style="auto" />
       </NavigationContainer>
     </RecoilRoot>

From c6f6144436315528fb5b825d275ab0f4e5aac151 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 23:47:24 +0900
Subject: [PATCH 16/33] remove unused screen

---
 src/screens/mainScreen/index.tsx                   | 10 ----------
 src/screens/mainStackNavigation/index.tsx          |  2 --
 src/screens/mainStackNavigation/navigationProps.ts |  1 -
 3 files changed, 13 deletions(-)
 delete mode 100644 src/screens/mainScreen/index.tsx

diff --git a/src/screens/mainScreen/index.tsx b/src/screens/mainScreen/index.tsx
deleted file mode 100644
index f84f10e..0000000
--- a/src/screens/mainScreen/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { SafeAreaView, Text } from 'react-native'
-
-export const MainScreen: React.VFC = () => {
-  return (
-    <SafeAreaView>
-      <Text>MainScreen</Text>
-    </SafeAreaView>
-  )
-}
diff --git a/src/screens/mainStackNavigation/index.tsx b/src/screens/mainStackNavigation/index.tsx
index 0a347b6..fbad7c7 100644
--- a/src/screens/mainStackNavigation/index.tsx
+++ b/src/screens/mainStackNavigation/index.tsx
@@ -1,7 +1,6 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { HomeScreen } from '@screens/homeScreen'
 import { LoginScreen } from '@screens/loginScreen'
-import { MainScreen } from '@screens/mainScreen'
 import { OnboardingScreen } from '@screens/onboardingScreen'
 import { SignUpScreen } from '@screens/signUpScreen'
 import React from 'react'
@@ -20,7 +19,6 @@ export const MainStackNavigation: React.VFC<MainStackNavigationProps> = ({
     <Stack.Navigator
       initialRouteName={isAuthenticated ? 'HomeScreen' : 'OnboardingScreen'}
     >
-      <Stack.Screen name="MainScreen">{() => <MainScreen />}</Stack.Screen>
       <Stack.Screen name="OnboardingScreen" options={{ headerShown: false }}>
         {() => <OnboardingScreen />}
       </Stack.Screen>
diff --git a/src/screens/mainStackNavigation/navigationProps.ts b/src/screens/mainStackNavigation/navigationProps.ts
index 4d0bea1..adf76d8 100644
--- a/src/screens/mainStackNavigation/navigationProps.ts
+++ b/src/screens/mainStackNavigation/navigationProps.ts
@@ -1,7 +1,6 @@
 import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 
 export type MainStackParamList = {
-  MainScreen: undefined
   OnboardingScreen: undefined
   LoginScreen: undefined
   SignUpScreen: undefined

From 36dc6782e55610b76b393feddeacd6f294f3ab3d Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Wed, 16 Feb 2022 23:53:12 +0900
Subject: [PATCH 17/33] remove api key in logout button

---
 src/screens/homeScreen/components/logoutButton.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/screens/homeScreen/components/logoutButton.tsx b/src/screens/homeScreen/components/logoutButton.tsx
index 38f4cf4..72f355e 100644
--- a/src/screens/homeScreen/components/logoutButton.tsx
+++ b/src/screens/homeScreen/components/logoutButton.tsx
@@ -1,3 +1,4 @@
+import { apiKeyState } from '@libs/apiKey/infrastructure/react/atoms/apiKey'
 import { deleteApiKeyInstance } from '@libs/apiKey/infrastructure/react/atoms/apiKeyUseCases'
 import { reporterState } from '@libs/reporter/infrastructure/react/atoms/reporter'
 import React, { useCallback } from 'react'
@@ -7,11 +8,13 @@ import { useRecoilValue, useSetRecoilState } from 'recoil'
 export const LogoutButton: React.VFC = () => {
   const deleteApiKey = useRecoilValue(deleteApiKeyInstance)
   const setReporter = useSetRecoilState(reporterState)
+  const setApiKey = useSetRecoilState(apiKeyState)
 
   const logout = useCallback(async () => {
     await deleteApiKey()
     setReporter(undefined)
-  }, [deleteApiKey, setReporter])
+    setApiKey(undefined)
+  }, [deleteApiKey, setApiKey, setReporter])
 
   const onPress = useCallback(async () => {
     await logout()

From 8583410acd4091da4510d5fef03df2a8bbeb6fab Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Feb 2022 00:01:21 +0900
Subject: [PATCH 18/33] navigate screen in logout button

---
 src/screens/homeScreen/components/logoutButton.tsx | 11 ++++++++++-
 src/screens/mainStackNavigation/navigationProps.ts |  5 +++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/screens/homeScreen/components/logoutButton.tsx b/src/screens/homeScreen/components/logoutButton.tsx
index 72f355e..5dde0af 100644
--- a/src/screens/homeScreen/components/logoutButton.tsx
+++ b/src/screens/homeScreen/components/logoutButton.tsx
@@ -1,6 +1,8 @@
 import { apiKeyState } from '@libs/apiKey/infrastructure/react/atoms/apiKey'
 import { deleteApiKeyInstance } from '@libs/apiKey/infrastructure/react/atoms/apiKeyUseCases'
 import { reporterState } from '@libs/reporter/infrastructure/react/atoms/reporter'
+import { CommonActions, useNavigation } from '@react-navigation/native'
+import { OnboardingScreenNavigationProp } from '@screens/mainStackNavigation/navigationProps'
 import React, { useCallback } from 'react'
 import { Button } from 'react-native'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
@@ -16,9 +18,16 @@ export const LogoutButton: React.VFC = () => {
     setApiKey(undefined)
   }, [deleteApiKey, setApiKey, setReporter])
 
+  const navigation = useNavigation<OnboardingScreenNavigationProp>()
+
   const onPress = useCallback(async () => {
     await logout()
-  }, [logout])
+    const resetAction = CommonActions.reset({
+      index: 1,
+      routes: [{ name: 'OnboardingScreen' }],
+    })
+    navigation.dispatch(resetAction)
+  }, [logout, navigation])
 
   return <Button title="Logout" onPress={onPress} />
 }
diff --git a/src/screens/mainStackNavigation/navigationProps.ts b/src/screens/mainStackNavigation/navigationProps.ts
index adf76d8..ed748d0 100644
--- a/src/screens/mainStackNavigation/navigationProps.ts
+++ b/src/screens/mainStackNavigation/navigationProps.ts
@@ -7,6 +7,11 @@ export type MainStackParamList = {
   HomeScreen: undefined
 }
 
+export type OnboardingScreenNavigationProp = NativeStackNavigationProp<
+  MainStackParamList,
+  'OnboardingScreen'
+>
+
 export type LoginScreenNavigationProp = NativeStackNavigationProp<
   MainStackParamList,
   'LoginScreen'

From 7f2b109f677ff8bd78217f8e1a45e4528524e0ea Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Feb 2022 00:04:22 +0900
Subject: [PATCH 19/33] hide header in home screen

---
 src/screens/mainStackNavigation/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/screens/mainStackNavigation/index.tsx b/src/screens/mainStackNavigation/index.tsx
index fbad7c7..84cfa7d 100644
--- a/src/screens/mainStackNavigation/index.tsx
+++ b/src/screens/mainStackNavigation/index.tsx
@@ -24,7 +24,9 @@ export const MainStackNavigation: React.VFC<MainStackNavigationProps> = ({
       </Stack.Screen>
       <Stack.Screen name="LoginScreen">{() => <LoginScreen />}</Stack.Screen>
       <Stack.Screen name="SignUpScreen">{() => <SignUpScreen />}</Stack.Screen>
-      <Stack.Screen name="HomeScreen">{() => <HomeScreen />}</Stack.Screen>
+      <Stack.Screen name="HomeScreen" options={{ headerShown: false }}>
+        {() => <HomeScreen />}
+      </Stack.Screen>
     </Stack.Navigator>
   )
 }

From fa76dee07ef1d042aba6ad6d5044a8d38b869104 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Feb 2022 00:42:07 +0900
Subject: [PATCH 20/33] install rn-elements

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index fff7d6f..8ce91d1 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     ]
   },
   "dependencies": {
+    "@react-navigation/elements": "^1.3.1",
     "@react-navigation/native": "^6.0.8",
     "@react-navigation/native-stack": "^6.5.0",
     "dotenv": "^16.0.0",

From 920368f7352d258fd4fe1fcbfea15d0f33066e0c Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Feb 2022 00:42:24 +0900
Subject: [PATCH 21/33] support avoiding keyboard screen

---
 src/screens/loginScreen/index.tsx | 57 +++++++++++++++++++------------
 1 file changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/screens/loginScreen/index.tsx b/src/screens/loginScreen/index.tsx
index c485182..2d8ae40 100644
--- a/src/screens/loginScreen/index.tsx
+++ b/src/screens/loginScreen/index.tsx
@@ -1,5 +1,13 @@
 import React from 'react'
-import { TextInput, View } from 'react-native'
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  StatusBar,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+import { useHeaderHeight } from '@react-navigation/elements'
 import tw from 'twrnc'
 import { ForgetPasswordButton } from './components/forgetPasswordButton'
 import { LoginButton } from './components/loginButton'
@@ -9,27 +17,34 @@ import { usePassword } from './hooks/usePassword'
 export const LoginScreen: React.VFC = () => {
   const { email, setEmail } = useEmail()
   const { password, setPassword } = usePassword()
+  const headerHeight = useHeaderHeight()
+  const statusBarHeight = StatusBar.currentHeight ?? 0
 
   return (
-    <View>
-      <View style={tw`flex flex-col p-8`}>
-        <View style={tw`w-full h-72 bg-gray-300`}></View>
-        <TextInput
-          style={tw`h-12 border`}
-          value={email}
-          onChangeText={setEmail}
-          placeholder="Email"
-        />
-        <TextInput
-          style={tw`h-12 border`}
-          value={password}
-          onChangeText={setPassword}
-          placeholder="Password"
-          secureTextEntry={true}
-        />
-        <LoginButton email={email} password={password} />
-        <ForgetPasswordButton />
-      </View>
-    </View>
+    <KeyboardAvoidingView
+      behavior="position"
+      keyboardVerticalOffset={headerHeight + statusBarHeight}
+    >
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <View style={tw`flex flex-col p-8`}>
+          <View style={tw`w-full h-72 bg-gray-300`}></View>
+          <TextInput
+            style={tw`h-12 border`}
+            value={email}
+            onChangeText={setEmail}
+            placeholder="Email"
+          />
+          <TextInput
+            style={tw`h-12 border`}
+            value={password}
+            onChangeText={setPassword}
+            placeholder="Password"
+            secureTextEntry={true}
+          />
+          <LoginButton email={email} password={password} />
+          <ForgetPasswordButton />
+        </View>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
   )
 }

From 6e01e144415d363f782693b2fa267ac5f9889992 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Feb 2022 00:46:25 +0900
Subject: [PATCH 22/33] define blank forget password screen

---
 src/screens/forgetPasswordScreen/index.tsx             | 10 ++++++++++
 .../loginScreen/components/forgetPasswordButton.tsx    |  9 +++++++--
 src/screens/mainStackNavigation/index.tsx              |  4 ++++
 src/screens/mainStackNavigation/navigationProps.ts     |  6 ++++++
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 src/screens/forgetPasswordScreen/index.tsx

diff --git a/src/screens/forgetPasswordScreen/index.tsx b/src/screens/forgetPasswordScreen/index.tsx
new file mode 100644
index 0000000..48b5891
--- /dev/null
+++ b/src/screens/forgetPasswordScreen/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+
+export const ForgetPasswordScreen: React.VFC = () => {
+  return (
+    <View>
+      <Text>Forget Password</Text>
+    </View>
+  )
+}
diff --git a/src/screens/loginScreen/components/forgetPasswordButton.tsx b/src/screens/loginScreen/components/forgetPasswordButton.tsx
index 4285130..1437f5a 100644
--- a/src/screens/loginScreen/components/forgetPasswordButton.tsx
+++ b/src/screens/loginScreen/components/forgetPasswordButton.tsx
@@ -1,9 +1,14 @@
+import { useNavigation } from '@react-navigation/native'
+import { ForgetPasswordScreenNavigationProp } from '@screens/mainStackNavigation/navigationProps'
 import React, { useCallback } from 'react'
 import { Button } from 'react-native'
 
 export const ForgetPasswordButton: React.VFC = () => {
+  const navigation = useNavigation<ForgetPasswordScreenNavigationProp>()
+
   const onPress = useCallback(() => {
-    console.log('forget password')
-  }, [])
+    navigation.navigate('ForgetPasswordScreen')
+  }, [navigation])
+
   return <Button title="Forget password" onPress={onPress} />
 }
diff --git a/src/screens/mainStackNavigation/index.tsx b/src/screens/mainStackNavigation/index.tsx
index 84cfa7d..a8e7a7b 100644
--- a/src/screens/mainStackNavigation/index.tsx
+++ b/src/screens/mainStackNavigation/index.tsx
@@ -1,4 +1,5 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { ForgetPasswordScreen } from '@screens/forgetPasswordScreen'
 import { HomeScreen } from '@screens/homeScreen'
 import { LoginScreen } from '@screens/loginScreen'
 import { OnboardingScreen } from '@screens/onboardingScreen'
@@ -27,6 +28,9 @@ export const MainStackNavigation: React.VFC<MainStackNavigationProps> = ({
       <Stack.Screen name="HomeScreen" options={{ headerShown: false }}>
         {() => <HomeScreen />}
       </Stack.Screen>
+      <Stack.Screen name="ForgetPasswordScreen">
+        {() => <ForgetPasswordScreen />}
+      </Stack.Screen>
     </Stack.Navigator>
   )
 }
diff --git a/src/screens/mainStackNavigation/navigationProps.ts b/src/screens/mainStackNavigation/navigationProps.ts
index ed748d0..304aa9b 100644
--- a/src/screens/mainStackNavigation/navigationProps.ts
+++ b/src/screens/mainStackNavigation/navigationProps.ts
@@ -5,6 +5,7 @@ export type MainStackParamList = {
   LoginScreen: undefined
   SignUpScreen: undefined
   HomeScreen: undefined
+  ForgetPasswordScreen: undefined
 }
 
 export type OnboardingScreenNavigationProp = NativeStackNavigationProp<
@@ -26,3 +27,8 @@ export type HomeScreenNavigationprop = NativeStackNavigationProp<
   MainStackParamList,
   'HomeScreen'
 >
+
+export type ForgetPasswordScreenNavigationProp = NativeStackNavigationProp<
+  MainStackParamList,
+  'ForgetPasswordScreen'
+>

From cd761c7350267c5d5c5f58d5d4e65c145d1a68f0 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Feb 2022 00:46:43 +0900
Subject: [PATCH 23/33] fix typo

---
 src/screens/loginScreen/components/loginButton.tsx | 4 ++--
 src/screens/mainStackNavigation/navigationProps.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/screens/loginScreen/components/loginButton.tsx b/src/screens/loginScreen/components/loginButton.tsx
index a921ce9..ed6fe13 100644
--- a/src/screens/loginScreen/components/loginButton.tsx
+++ b/src/screens/loginScreen/components/loginButton.tsx
@@ -2,7 +2,7 @@ import { saveApiKeyInstance } from '@libs/apiKey/infrastructure/react/atoms/apiK
 import { fetchReporterWithPasswordInstance } from '@libs/reporter/infrastructure/react/atoms/fetchReporterWithPasswordUseCase'
 import { reporterState } from '@libs/reporter/infrastructure/react/atoms/reporter'
 import { CommonActions, useNavigation } from '@react-navigation/native'
-import { HomeScreenNavigationprop } from '@screens/mainStackNavigation/navigationProps'
+import { HomeScreenNavigationProp } from '@screens/mainStackNavigation/navigationProps'
 import React, { useCallback } from 'react'
 import { Button } from 'react-native'
 import { useSetRecoilState, useRecoilValue } from 'recoil'
@@ -32,7 +32,7 @@ export const LoginButton: React.VFC<LoginButtonProps> = ({
     [fetchReporterWithPassword, saveApiKey, setReporter]
   )
 
-  const navigation = useNavigation<HomeScreenNavigationprop>()
+  const navigation = useNavigation<HomeScreenNavigationProp>()
 
   const onPress = useCallback(async () => {
     await login(email, password)
diff --git a/src/screens/mainStackNavigation/navigationProps.ts b/src/screens/mainStackNavigation/navigationProps.ts
index 304aa9b..a9551ef 100644
--- a/src/screens/mainStackNavigation/navigationProps.ts
+++ b/src/screens/mainStackNavigation/navigationProps.ts
@@ -23,7 +23,7 @@ export type SignUpScreenNavigationProp = NativeStackNavigationProp<
   'SignUpScreen'
 >
 
-export type HomeScreenNavigationprop = NativeStackNavigationProp<
+export type HomeScreenNavigationProp = NativeStackNavigationProp<
   MainStackParamList,
   'HomeScreen'
 >

From 003030c1e4a94829fefb1aecab924a1f0530fed6 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Feb 2022 00:52:41 +0900
Subject: [PATCH 24/33] use safe area view

---
 src/screens/homeScreen/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/screens/homeScreen/index.tsx b/src/screens/homeScreen/index.tsx
index b6ab6ed..92ddecd 100644
--- a/src/screens/homeScreen/index.tsx
+++ b/src/screens/homeScreen/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Text, View } from 'react-native'
+import { SafeAreaView, Text } from 'react-native'
 import { LogoutButton } from './components/logoutButton'
 
 export const HomeScreen: React.VFC = () => {
   return (
-    <View>
+    <SafeAreaView>
       <Text>Home Screen</Text>
       <LogoutButton />
-    </View>
+    </SafeAreaView>
   )
 }

From cc7b1454581c8e666e04be0c3e2f27adfe52f5df Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Feb 2022 00:53:00 +0900
Subject: [PATCH 25/33] inplement continue as guest button

---
 .../components/continueAsGuestButton.tsx            | 13 +++++++++++++
 src/screens/onboardingScreen/index.tsx              | 10 +++-------
 2 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 src/screens/onboardingScreen/components/continueAsGuestButton.tsx

diff --git a/src/screens/onboardingScreen/components/continueAsGuestButton.tsx b/src/screens/onboardingScreen/components/continueAsGuestButton.tsx
new file mode 100644
index 0000000..78ac6eb
--- /dev/null
+++ b/src/screens/onboardingScreen/components/continueAsGuestButton.tsx
@@ -0,0 +1,13 @@
+import { useNavigation } from '@react-navigation/native'
+import { HomeScreenNavigationProp } from '@screens/mainStackNavigation/navigationProps'
+import React, { useCallback } from 'react'
+import { Button } from 'react-native'
+
+export const ContinueAsGuestButton: React.VFC = () => {
+  const navigation = useNavigation<HomeScreenNavigationProp>()
+  const onPress = useCallback(() => {
+    navigation.navigate('HomeScreen')
+  }, [navigation])
+
+  return <Button title="Continue as guest" onPress={onPress} />
+}
diff --git a/src/screens/onboardingScreen/index.tsx b/src/screens/onboardingScreen/index.tsx
index ab4f963..ef3136d 100644
--- a/src/screens/onboardingScreen/index.tsx
+++ b/src/screens/onboardingScreen/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
-import { Button, SafeAreaView, View } from 'react-native'
+import { SafeAreaView, View } from 'react-native'
 import tw from 'twrnc'
+import { ContinueAsGuestButton } from './components/continueAsGuestButton'
 import { LoginButton } from './components/loginButton'
 import { SignUpButton } from './components/signUpButton'
 
@@ -14,12 +15,7 @@ export const OnboardingScreen: React.VFC = () => {
           <SignUpButton />
         </View>
         <View>
-          <Button
-            title="Continue as guest"
-            onPress={() => {
-              console.log('continue as a guest')
-            }}
-          />
+          <ContinueAsGuestButton />
         </View>
       </View>
     </SafeAreaView>

From 82c27f67fc9edc5f9d5566dd36f37c1c9f14c726 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Feb 2022 01:06:35 +0900
Subject: [PATCH 26/33] fix tests

---
 __tests__/reporter/models/reporter.test.ts                 | 5 ++++-
 __tests__/reporter/usecase/InMemoryReporterClient.ts       | 5 +++--
 __tests__/reporter/usecase/fetchReporterWithApiKey.test.ts | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/__tests__/reporter/models/reporter.test.ts b/__tests__/reporter/models/reporter.test.ts
index d81e4e5..80d37e8 100644
--- a/__tests__/reporter/models/reporter.test.ts
+++ b/__tests__/reporter/models/reporter.test.ts
@@ -1,3 +1,4 @@
+import { ApiKey } from '@libs/apiKey/models/apiKey'
 import { NickName } from '@libs/reporter/models/nickname'
 import { Reporter } from '@libs/reporter/models/reporter'
 import { ReporterID } from '@libs/reporter/models/reporterID'
@@ -6,8 +7,10 @@ describe('Reporter model', () => {
   it('valid case', () => {
     const reporterID = ReporterID.of(1)
     const nickName = NickName.of('example')
-    const reporter = new Reporter(reporterID, nickName)
+    const apiKey = ApiKey.of('8023caed8f0843f84aa69444898ad31c6c9ce599')
+    const reporter = new Reporter(reporterID, nickName, apiKey)
     expect(reporter.id).toEqual(reporterID.value)
     expect(reporter.nickname).toEqual(nickName.value)
+    expect(reporter.apiKey).toEqual(apiKey.value)
   })
 })
diff --git a/__tests__/reporter/usecase/InMemoryReporterClient.ts b/__tests__/reporter/usecase/InMemoryReporterClient.ts
index b8824b6..37acbe0 100644
--- a/__tests__/reporter/usecase/InMemoryReporterClient.ts
+++ b/__tests__/reporter/usecase/InMemoryReporterClient.ts
@@ -18,8 +18,9 @@ export class InMemoryReporterClient implements ReporterClient {
 
     const id = ReporterID.of(1)
     const nickname = NickName.of(username)
+    const apikey = ApiKey.of('d012ded50105308c87f1b595f9c34b3ed3d078e1')
 
-    return new Reporter(id, nickname)
+    return new Reporter(id, nickname, apikey)
   }
 
   public async fetchWithApiKey(apiKey: ApiKey): Promise<Reporter> {
@@ -32,6 +33,6 @@ export class InMemoryReporterClient implements ReporterClient {
     const id = ReporterID.of(1)
     const nickname = NickName.of('example')
 
-    return new Reporter(id, nickname)
+    return new Reporter(id, nickname, apiKey)
   }
 }
diff --git a/__tests__/reporter/usecase/fetchReporterWithApiKey.test.ts b/__tests__/reporter/usecase/fetchReporterWithApiKey.test.ts
index 2d34abb..336f9c6 100644
--- a/__tests__/reporter/usecase/fetchReporterWithApiKey.test.ts
+++ b/__tests__/reporter/usecase/fetchReporterWithApiKey.test.ts
@@ -12,6 +12,7 @@ describe('Reporter usecases', () => {
 
     expect(fetchedReporter.id).toEqual(1)
     expect(fetchedReporter.nickname).toEqual('example')
+    expect(fetchedReporter.apiKey).toEqual(apiKey.value)
   })
 
   it('invalid api key', () => {

From 06da5e5734d20358e26d331739c016bd5b22b59a Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Feb 2022 14:20:47 +0900
Subject: [PATCH 27/33] refactoring

---
 src/screens/initScreen/hooks/useIsLoading.ts | 18 ++++++++++++++++++
 src/screens/initScreen/index.tsx             | 18 ++++--------------
 2 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 src/screens/initScreen/hooks/useIsLoading.ts

diff --git a/src/screens/initScreen/hooks/useIsLoading.ts b/src/screens/initScreen/hooks/useIsLoading.ts
new file mode 100644
index 0000000..c2e8dd9
--- /dev/null
+++ b/src/screens/initScreen/hooks/useIsLoading.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react'
+import { useAuthenticate } from './useAuthenticate'
+
+export function useIsLoading() {
+  const [isLoading, setIsLoading] = useState(true)
+  const { authenticate } = useAuthenticate()
+
+  useEffect(() => {
+    async function init() {
+      await authenticate()
+      setIsLoading(false)
+    }
+    init()
+    /* eslint react-hooks/exhaustive-deps: 0 */
+  }, [])
+
+  return { isLoading }
+}
diff --git a/src/screens/initScreen/index.tsx b/src/screens/initScreen/index.tsx
index 485caeb..0e313f2 100644
--- a/src/screens/initScreen/index.tsx
+++ b/src/screens/initScreen/index.tsx
@@ -1,25 +1,15 @@
 import { MainStackNavigation } from '@screens/mainStackNavigation'
-import React, { useEffect, useState } from 'react'
-import { useAuthenticate } from './hooks/useAuthenticate'
+import React from 'react'
 import { useIsAuthenticated } from './hooks/useIsAuthenticated'
 import AppLoading from 'expo-app-loading'
+import { useIsLoading } from './hooks/useIsLoading'
 
 export const InitScreen: React.VFC = () => {
-  const [isLoading, setIsLoading] = useState(true)
-  const { authenticate } = useAuthenticate()
+  const { isLoading } = useIsLoading()
   const { isAuthenticated } = useIsAuthenticated()
 
-  useEffect(() => {
-    async function init() {
-      await authenticate()
-      setIsLoading(false)
-    }
-    init()
-    /* eslint react-hooks/exhaustive-deps: 0 */
-  }, [])
-
   if (isLoading) {
-    return <AppLoading autoHideSplash={true} />
+    return <AppLoading />
   }
 
   return <MainStackNavigation isAuthenticated={isAuthenticated} />

From f191bcec996c0a977e871f7f47acb5fa975e4fd3 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Mar 2022 01:10:37 +0900
Subject: [PATCH 28/33] use async default value

---
 .../infrastructure/react/atoms/apiKey.ts      | 33 ++++++++++++++--
 .../infrastructure/react/atoms/reporter.ts    | 39 +++++++++++++++++--
 2 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/src/libs/apiKey/infrastructure/react/atoms/apiKey.ts b/src/libs/apiKey/infrastructure/react/atoms/apiKey.ts
index 55cb29b..bc3c45c 100644
--- a/src/libs/apiKey/infrastructure/react/atoms/apiKey.ts
+++ b/src/libs/apiKey/infrastructure/react/atoms/apiKey.ts
@@ -1,7 +1,34 @@
-import { atom } from 'recoil'
+import { ApiKey } from '@libs/apiKey/models/apiKey'
+import { atom, selector } from 'recoil'
 import { ApiKeyObj } from '../object/apiKey'
+import { getApiKeyInstance } from './apiKeyUseCases'
 
-export const apiKeyState = atom<ApiKeyObj | undefined>({
-  key: 'ApiKey',
+const apiKeyAtom = atom<ApiKeyObj | undefined>({
+  key: 'ApiKeyAtom',
   default: undefined,
 })
+
+export const apiKeyState = selector<ApiKeyObj | undefined>({
+  key: 'ApiKey',
+  get: async ({ get }) => {
+    const storedApiKey = get(apiKeyAtom)
+    if (storedApiKey !== undefined) {
+      return storedApiKey
+    }
+    try {
+      const getApiKey = get(getApiKeyInstance)
+      const apiKeyDTO = await getApiKey()
+      const apiKey = ApiKey.of(apiKeyDTO.value)
+      return apiKey
+    } catch (e) {
+      if (e instanceof Error) {
+        // TODO: This message should sent into Sentry
+        console.log(`API key is not saved: ${e.message}`)
+      }
+      return undefined
+    }
+  },
+  set: ({ set }, newApiKey) => {
+    set(apiKeyAtom, newApiKey)
+  },
+})
diff --git a/src/libs/reporter/infrastructure/react/atoms/reporter.ts b/src/libs/reporter/infrastructure/react/atoms/reporter.ts
index 5a7c4bd..1a13419 100644
--- a/src/libs/reporter/infrastructure/react/atoms/reporter.ts
+++ b/src/libs/reporter/infrastructure/react/atoms/reporter.ts
@@ -1,7 +1,40 @@
-import { atom } from 'recoil'
+import { apiKeyState } from '@libs/apiKey/infrastructure/react/atoms/apiKey'
+import { ApiKey } from '@libs/apiKey/models/apiKey'
+import { atom, selector } from 'recoil'
 import { ReporterObj } from '../object/reporter'
+import { fetchReporterWithApiKeyInstance } from './fetchReporterWithApiKeyUseCase'
 
-export const reporterState = atom<ReporterObj | undefined>({
-  key: 'Reporter',
+const reporterAtom = atom<ReporterObj | undefined>({
+  key: 'ReporterAtom',
   default: undefined,
 })
+
+export const reporterState = selector<ReporterObj | undefined>({
+  key: 'Reporter',
+  get: async ({ get }) => {
+    const storedReporter = get(reporterAtom)
+    if (storedReporter !== undefined) {
+      return storedReporter
+    }
+    const fetchReporterWithApiKey = get(fetchReporterWithApiKeyInstance)
+    const apiKeyObj = get(apiKeyState)
+    if (apiKeyObj !== undefined) {
+      try {
+        const apiKey = ApiKey.of(apiKeyObj.value)
+        const reporterDTO = await fetchReporterWithApiKey(apiKey)
+        return reporterDTO
+      } catch (e) {
+        if (e instanceof Error) {
+          // TODO: This message should sent into Sentry
+          console.log(`Failed to auth with stored api key: ${e.message}`)
+        }
+        return undefined
+      }
+    } else {
+      return undefined
+    }
+  },
+  set: ({ set }, newReporter) => {
+    set(reporterAtom, newReporter)
+  },
+})

From 216e35bf9853a6b74c4d49949fbf02b75744e5a1 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Mar 2022 01:11:36 +0900
Subject: [PATCH 29/33] remove unused lines

---
 .../initScreen/hooks/useAuthenticate.ts       | 33 -------------------
 src/screens/initScreen/hooks/useIsLoading.ts  | 18 ----------
 2 files changed, 51 deletions(-)

diff --git a/src/screens/initScreen/hooks/useAuthenticate.ts b/src/screens/initScreen/hooks/useAuthenticate.ts
index 6357a47..e69de29 100644
--- a/src/screens/initScreen/hooks/useAuthenticate.ts
+++ b/src/screens/initScreen/hooks/useAuthenticate.ts
@@ -1,33 +0,0 @@
-import { apiKeyState } from '@libs/apiKey/infrastructure/react/atoms/apiKey'
-import { getApiKeyInstance } from '@libs/apiKey/infrastructure/react/atoms/apiKeyUseCases'
-import { ApiKey } from '@libs/apiKey/models/apiKey'
-import { fetchReporterWithApiKeyInstance } from '@libs/reporter/infrastructure/react/atoms/fetchReporterWithApiKeyUseCase'
-import { reporterState } from '@libs/reporter/infrastructure/react/atoms/reporter'
-import { useCallback } from 'react'
-import { useRecoilValue, useSetRecoilState } from 'recoil'
-
-export function useAuthenticate() {
-  const fetchReporterWithApiKey = useRecoilValue(
-    fetchReporterWithApiKeyInstance
-  )
-  const setReporter = useSetRecoilState(reporterState)
-  const getApiKey = useRecoilValue(getApiKeyInstance)
-  const setApiKey = useSetRecoilState(apiKeyState)
-
-  const authenticate = useCallback(async () => {
-    try {
-      const apiKeyDTO = await getApiKey()
-      const apiKey = ApiKey.of(apiKeyDTO.value)
-      const reporterDTO = await fetchReporterWithApiKey(apiKey)
-      setReporter(reporterDTO)
-      setApiKey(apiKey)
-    } catch (e) {
-      if (e instanceof Error) {
-        // TODO: This message should sent into Sentry
-        console.log(`Failed to auth with stored api key: ${e.message}`)
-      }
-    }
-  }, [fetchReporterWithApiKey, getApiKey, setApiKey, setReporter])
-
-  return { authenticate }
-}
diff --git a/src/screens/initScreen/hooks/useIsLoading.ts b/src/screens/initScreen/hooks/useIsLoading.ts
index c2e8dd9..e69de29 100644
--- a/src/screens/initScreen/hooks/useIsLoading.ts
+++ b/src/screens/initScreen/hooks/useIsLoading.ts
@@ -1,18 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useAuthenticate } from './useAuthenticate'
-
-export function useIsLoading() {
-  const [isLoading, setIsLoading] = useState(true)
-  const { authenticate } = useAuthenticate()
-
-  useEffect(() => {
-    async function init() {
-      await authenticate()
-      setIsLoading(false)
-    }
-    init()
-    /* eslint react-hooks/exhaustive-deps: 0 */
-  }, [])
-
-  return { isLoading }
-}

From fe54b1dacc2f0ff8d995b48fc0e521b725db498d Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Mar 2022 01:11:47 +0900
Subject: [PATCH 30/33] remove unused files

---
 src/screens/initScreen/hooks/useAuthenticate.ts | 0
 src/screens/initScreen/hooks/useIsLoading.ts    | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/screens/initScreen/hooks/useAuthenticate.ts
 delete mode 100644 src/screens/initScreen/hooks/useIsLoading.ts

diff --git a/src/screens/initScreen/hooks/useAuthenticate.ts b/src/screens/initScreen/hooks/useAuthenticate.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/screens/initScreen/hooks/useIsLoading.ts b/src/screens/initScreen/hooks/useIsLoading.ts
deleted file mode 100644
index e69de29..0000000

From a0e246b4db71435b55106e6f88bfbc1462cfc3ad Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Mar 2022 01:12:10 +0900
Subject: [PATCH 31/33] use selector

---
 .../initScreen/hooks/useIsAuthenticated.ts    | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/screens/initScreen/hooks/useIsAuthenticated.ts b/src/screens/initScreen/hooks/useIsAuthenticated.ts
index e9dfbcf..125fefc 100644
--- a/src/screens/initScreen/hooks/useIsAuthenticated.ts
+++ b/src/screens/initScreen/hooks/useIsAuthenticated.ts
@@ -1,21 +1,15 @@
 import { apiKeyState } from '@libs/apiKey/infrastructure/react/atoms/apiKey'
 import { reporterState } from '@libs/reporter/infrastructure/react/atoms/reporter'
-import { useEffect, useState } from 'react'
-import { useRecoilValue } from 'recoil'
+import { selector } from 'recoil'
 
-export function useIsAuthenticated() {
-  const [isAuthenticated, setIsAuthenticated] = useState(false)
+export const isAuthenticated = selector<boolean>({
+  key: 'IsAuthenticated',
+  get: ({ get }) => {
+    const apiKey = get(apiKeyState)
+    const reporter = get(reporterState)
 
-  const apiKey = useRecoilValue(apiKeyState)
-  const reporter = useRecoilValue(reporterState)
-
-  useEffect(() => {
     const hasApiKey = apiKey !== undefined
     const hasReporter = reporter !== undefined
-    const state = hasApiKey && hasReporter
-
-    setIsAuthenticated(state)
-  }, [apiKey, reporter])
-
-  return { isAuthenticated }
-}
+    return hasApiKey && hasReporter
+  },
+})

From 9ebf29b917b27d4795745a90149035834fbe96be Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Mar 2022 01:12:53 +0900
Subject: [PATCH 32/33] refactoring

---
 src/screens/initScreen/index.tsx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/screens/initScreen/index.tsx b/src/screens/initScreen/index.tsx
index 0e313f2..30dabbf 100644
--- a/src/screens/initScreen/index.tsx
+++ b/src/screens/initScreen/index.tsx
@@ -1,16 +1,10 @@
 import { MainStackNavigation } from '@screens/mainStackNavigation'
 import React from 'react'
-import { useIsAuthenticated } from './hooks/useIsAuthenticated'
-import AppLoading from 'expo-app-loading'
-import { useIsLoading } from './hooks/useIsLoading'
+import { isAuthenticated } from './hooks/useIsAuthenticated'
+import { useRecoilValue } from 'recoil'
 
 export const InitScreen: React.VFC = () => {
-  const { isLoading } = useIsLoading()
-  const { isAuthenticated } = useIsAuthenticated()
+  const authenticated = useRecoilValue(isAuthenticated)
 
-  if (isLoading) {
-    return <AppLoading />
-  }
-
-  return <MainStackNavigation isAuthenticated={isAuthenticated} />
+  return <MainStackNavigation isAuthenticated={authenticated} />
 }

From a9464a49c9d5756f9216178f11914c6f6242bc74 Mon Sep 17 00:00:00 2001
From: Aruneko <aruneko99@gmail.com>
Date: Thu, 17 Mar 2022 01:13:00 +0900
Subject: [PATCH 33/33] use suspense

---
 src/App.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0e3fd9e..d8a432b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { Suspense } from 'react'
+import AppLoading from 'expo-app-loading'
 import { StatusBar } from 'expo-status-bar'
 import { NavigationContainer } from '@react-navigation/native'
 import { RecoilRoot } from 'recoil'
@@ -8,7 +9,9 @@ export const App: React.VFC = () => {
   return (
     <RecoilRoot>
       <NavigationContainer>
-        <InitScreen />
+        <Suspense fallback={<AppLoading />}>
+          <InitScreen />
+        </Suspense>
         <StatusBar style="auto" />
       </NavigationContainer>
     </RecoilRoot>