Add signup (not work)

.gitignore

@@ -12,3 +12,5 @@ web-build/
 
 # macOS
 .DS_Store
+
+.vscode

Navigation/Navigation.js

@@ -12,7 +12,7 @@ import SignUpScreen from '../Screen/SignUpScreen'
 
 const Tab = createBottomTabNavigator()
 
-export default function App() {
+export default function Navigation() {
   return (
     <TokenContext.Consumer>
       {([token, setToken]) => (

Screen/SignInScreen.js

@@ -1,10 +1,9 @@
 import React, { useContext, useState } from 'react'
-import { Text, TextInput, StyleSheet } from 'react-native'
+import { Text, TextInput, StyleSheet, Button, View } from 'react-native'
-import signIn from '../components/SignIn.js'
+import signIn from '../components/SignIn'
-import { UsernameContext, TokenContext } from '../Context/Context.js'
+import { UsernameContext, TokenContext } from '../Context/Context'
 
-
+export default function SignInScreen({ navigation }) {
-export default function SignInScreen() {
   const [ username, setUsername] = useContext(UsernameContext)
   const [ token, setToken] = useContext(TokenContext)
   const [ password, setPassword] = useState("")
@@ -14,8 +13,8 @@ export default function SignInScreen() {
     signIn(username, password)
     .then(token => {
       setToken(token)
-      setUsername(login)
+      setUsername(username)
-      props.navigate('Home')
+      navigation.navigate('Home')
     })
     .catch(err => {
       setError(err)
@@ -23,21 +22,34 @@ export default function SignInScreen() {
   }
 
   return (
-    <>
+    <View style={styles.container}>
       <Text>{error}</Text>
       <Text>Nom d'utilisateur:</Text>
       <TextInput value={username} onChangeText={setUsername} onSubmitEditing={signin} style={styles.input}></TextInput>
       <Text>Mot de passe:</Text>
       <TextInput value={password} onChangeText={setPassword} onSubmitEditing={signin} style={styles.input} secureTextEntry={true}></TextInput>
-    </>
+      <View style={styles.button}>
+        <Button onPress={signin} title="Se connecter" />
+      </View>
+      
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    marginHorizontal: 16,
+  },
   input: {
     height: 40,
     margin: 12,
     borderWidth: 1,
     padding: 10,
   },
+  button: {
+    padding: 10,
+    marginHorizontal: 30
+  }
 });

Screen/SignOutScreen.js

@@ -1,10 +1,14 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import {Text, View } from 'react-native'
+import { UsernameContext, TokenContext } from '../Context/Context'
 
 export default function App() {
+  const [ username, setUsername] = useContext(UsernameContext)
+  const [ token, setToken] = useContext(TokenContext)
+  setToken(null)
+  setUsername("")
   return (
     <>
-    Page deconnexion
     </>
   );
 }

Screen/SignUpScreen.js

@@ -1,10 +1,53 @@
-import React from 'react'
+import React, { useContext, useState } from 'react'
-import { Text, View } from 'react-native'
+import { Text, View, TextInput, Button, StyleSheet } from 'react-native'
+import signUp from '../components/SignUp'
+import { UsernameContext, TokenContext } from '../Context/Context'
+
+export default function SignUpScreen({ navigation }) {
+  const [ username, setUsername] = useContext(UsernameContext)
+  const [ token, setToken] = useContext(TokenContext)
+  const [ password, setPassword] = useState("")
+  const [error, setError] = useState("")
+
+  const signup = () => {
+    signUp(username, password)
+    .then(token => {
+      setToken(token)
+      setUsername(username)
+    }).catch(err => setError(err))
+  }
 
-export default function SignUpScreen() {
   return (
-    <>
+    <View style={styles.container}>
-    Page Inscription
+      <Text>{error}</Text>
-    </>
+      <Text>Token is {token  === undefined ? "undefined" : (token === null ? "null" : token)}</Text>
+      <Text>username is {username}</Text>
+      <Text>Nom d'utilisateur:</Text>
+      <TextInput value={username} onChangeText={setUsername} onSubmitEditing={signup} style={styles.input}></TextInput>
+      <Text>Mot de passe:</Text>
+      <TextInput value={password} onChangeText={setPassword} onSubmitEditing={signup} style={styles.input} secureTextEntry={true}></TextInput>
+      <View style={styles.button}>
+        <Button onPress={signup} title="S'inscrire" />
+      </View>
+      
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    marginHorizontal: 16,
+  },
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+    padding: 10,
+  },
+  button: {
+    padding: 10,
+    marginHorizontal: 30
+  }
+});

Screen/TodoListsScreen.js

@@ -4,7 +4,7 @@ import { Text, View } from 'react-native'
 export default function App() {
   return (
     <>
-    Page todoLists
+      <Text>Liste des TodoList</Text>
     </>
   );
 }

components/SignUp.js

@@ -0,0 +1,32 @@
+const API_URL = 'http://127.0.0.1:4000'
+
+const SIGN_UP =
+  'mutation($username:String!, $password:String!){signUp(username:$username, password:$password)}'
+
+export default function signUp (username, password) {
+    return fetch(API_URL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            query: SIGN_UP,
+            variables: {
+                username: username,
+                password: password
+            }
+        })
+    })
+    .then(response => {
+        return response.json()
+    })
+    .then(jsonResponse => {
+        if (jsonResponse.errors != null){
+            throw(jsonResponse.errors[0].message)
+        }
+        return jsonResponse.data.signIn
+    })
+    .catch(error => {
+        throw error
+    })
+}

package.json

@@ -12,15 +12,16 @@
   "dependencies": {
     "@react-navigation/bottom-tabs": "^6.2.0",
     "@react-navigation/native": "^6.0.8",
-    "expo": "~44.0.0",
+    "expo": "~44.0.6",
     "expo-status-bar": "~1.2.0",
-    "react": "17.0.1",
+    "react": "17.0.2",
-    "react-dom": "17.0.1",
+    "react-dom": "17.0.2",
-    "react-native": "0.64.3",
+    "react-native": "0.67.2",
-    "react-native-web": "0.17.1"
+    "react-native-web": "0.17.5",
+    "expo-dev-client": "~0.8.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.17.2"
   },
   "private": true
 }