Merge branch 'main' into list-gundb

app/(login)/(groupScreen)/createGroup.tsx

@@ -0,0 +1,39 @@
+import { useState, useRef } from "react"
+import { View, Text, Pressable, TextInput } from "react-native"
+import styles from "../styles"
+import { groupHandle } from '../../../handlers/group';
+import { router } from "expo-router";
+
+export default function getCreateComponent(){
+    const group = useRef(groupHandle(gun));
+    const [groupName, setGroupName] = useState("")
+    const [processing, setProcessing] = useState(false)
+    const [error, setError] = useState(false)
+
+    function createNewGroup(groupName : string){
+        if (groupName != ""){
+            group.current.create(groupName, () => {router.replace('/shoppingList')})         
+        }else {
+            setError(true)
+            setProcessing(false)
+        }
+    }
+
+    return (        
+        <>
+          <View style={{alignItems:"center"}}><Text style={styles.explainerText}>What is the name of your new group?</Text></View>
+          <Text style={styles.descriptiveText}>Group name</Text>
+          <View style={styles.inputBox}>
+          <TextInput style={styles.inputField} value={groupName} onChangeText={(groupName) =>{setGroupName(groupName)}}/>
+          </View>
+          <Pressable style={styles.button}onPress={() => {
+            if (!processing){
+                setProcessing(true)
+                createNewGroup(groupName)
+            }
+          }
+        }><Text style={styles.descriptiveText}>Create new group</Text></Pressable>
+        {error && <Text style={styles.error}>A group must have a name</Text>}
+        </>
+    )
+  }

app/(login)/(groupScreen)/group.tsx

@@ -0,0 +1,92 @@
+import { Redirect } from 'expo-router';
+import { ImageBackground, Pressable, View, Text, TextInput } from 'react-native';
+import styles from '../styles';
+import { useState, useRef } from 'react';
+import { LogoAndName } from '../../../components/LogoAndName';
+import getBluetoothComponent from './joinGroupBluetooth';
+import getIdComponent from './joinGroup';
+import getCreateComponent from './createGroup';
+import { router } from 'expo-router';
+import { userHandle } from '../../../handlers/user';
+
+enum State {
+  buttons,
+  bluetooth,
+  id,
+  create,
+}
+
+export default function GroupScreen() {
+  const user = useRef(userHandle(gun));
+  const [currentState, setCurrentState] = useState(State.buttons)
+  const createComponent = getCreateComponent()
+  const bluetoothComponent = getBluetoothComponent()
+  const idComponent = getIdComponent()
+
+  function getActiveComponent (state : State){
+    if (state == State.buttons){
+      return getButtonsComponent()
+    }
+    else if (state == State.bluetooth){
+      return bluetoothComponent
+    }
+    else if (state == State.id){
+      return idComponent
+    }
+    else if (state == State.create){
+      return createComponent
+    }
+  }
+
+  function getButtonsComponent() {
+    return (
+      <>
+          <Pressable style={styles.button}>
+            <Text style={styles.buttonText} onPress={() => {setCurrentState(State.bluetooth)}}> Join with bluetooth </Text>
+          </Pressable>
+          <Pressable style={styles.button} onPress={() => {setCurrentState(State.id)}}>
+            <Text style={styles.buttonText}> Join with group id </Text>
+          </Pressable>
+          <Pressable style={styles.buttonAlt} onPress={() => {setCurrentState(State.create)}}>
+            <Text style={styles.buttonText}> Create new group </Text>
+          </Pressable>
+      </>
+    )
+  }
+
+  function getMainScreenTextComponent() {
+    return (
+      <View style={{alignItems: "center"}}>        
+        <Pressable onPress={() => logout()}><Text style={styles.descriptiveText}>Log out</Text></Pressable>
+      </View>
+    )
+  }
+
+  function getNonMainScreenTextComponent() {
+    return (
+      <View style={{alignItems: "center"}}>        
+        <Pressable onPress={() => setCurrentState(State.buttons)}><Text style={styles.descriptiveText}>Go back</Text></Pressable>
+        <Pressable onPress={() => logout()}><Text style={styles.descriptiveText}>Log out</Text></Pressable>
+      </View>
+    )
+  }
+
+  function logout() {
+    console.log("tried to log out")
+    user.current.logout()
+    router.replace('/login')
+  }
+
+  return (
+    <>
+    <View style={styles.container}>
+      <ImageBackground source={require('../../../assets/images/accountScreensImage.png')} style={styles.backgroundImage}>
+        <LogoAndName/>        
+        {getActiveComponent(currentState)}    
+        {currentState == State.buttons && getMainScreenTextComponent()}
+        {currentState != State.buttons && getNonMainScreenTextComponent()}
+      </ImageBackground>
+    </View>
+    </>
+  )
+}

app/(login)/(groupScreen)/joinGroup.tsx

@@ -0,0 +1,42 @@
+import { useState, useRef } from "react"
+import { View, Text, Pressable, TextInput } from "react-native"
+import styles from "../styles"
+import { groupHandle } from '../../../handlers/group';
+import { router } from "expo-router";
+
+export default function getCreateComponent(){
+    const group = useRef(groupHandle(gun));
+    const [uuid, setUuid] = useState("");
+    const [processing, setProcessing] = useState(false)
+    const [error, setError] = useState(false)
+
+    function joinGroup(groupName : string){        
+          group.current.join(groupName, (ack: Boolean) => {
+               if (ack){                          
+                    router.replace('/shoppingList')
+               } else{
+                    setError(true)
+                    setProcessing(false)
+               }
+          })     
+    }
+
+    return (
+        <>
+          <View style={{alignItems:"center"}}><Text style={styles.explainerText}> Join a group by typing its unique id </Text></View>
+          <Text style={styles.descriptiveText}>Group id</Text>
+          <View style={styles.inputBox}>
+          <TextInput style={styles.inputField} autoCapitalize='none' value={uuid} onChangeText={(uuid) =>{setUuid(uuid)}}/>
+          </View>
+          <Pressable style={styles.button} onPress={() => {
+               if (!processing){
+                    setProcessing(true)
+                    joinGroup(uuid)                    
+               }
+          }}>     
+          <Text style={styles.descriptiveText}>Join group</Text></Pressable>
+          {error && <Text style={styles.error}>Wrong id</Text>}
+          <View style={{height:10}}/>
+        </>
+    )
+  }

app/(login)/(groupScreen)/joinGroupBluetooth.tsx

@@ -0,0 +1,12 @@
+import { View, Text, Pressable, TextInput } from "react-native"
+import styles from "../styles"
+import { router } from "expo-router"
+import GroupScreen from "./group"
+
+export default function getBluetoothComponent() {
+    return (
+        <View>
+            <Text> Bluetooth placeholder </Text>            
+        </View>
+    )
+  }