Connect communities and login

mobile-ui/.gitignore

@@ -10,4 +10,4 @@ npm-debug.*
 web-build/
 .vscode
 .DS_Store
-
+package-lock.json

mobile-ui/App.js

@@ -1,64 +1,71 @@
-import React,{useState} from "react";
+import React, { useContext, useState } from "react";
 import {
-  NativeBaseProvider, 
+  NativeBaseProvider,
   Icon
 } from "native-base";
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import LogIn from "./components/LogIn";
 import Home from "./components/Home";
 import RecoverPassword from "./components/RecoverPassword";
 import Reservas from "./components/Reservas";
-import Profile from "./components/Profile"; 
+import Profile from "./components/Profile";
-import { MaterialCommunityIcons } from '@expo/vector-icons'; 
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import AreaComun from "./components/AreaComun";
+import { UserContext, UserContextProvider } from "./context/UserContext";
 
 const Stack = createNativeStackNavigator();
-const Tab = createBottomTabNavigator(); 
+const Tab = createBottomTabNavigator();
 
 
 
-function HomeTab({route}) {
+function HomeTab({ route }) {
-
+  const { user } = useContext(UserContext);
-const [selected, setSelected] = useState(0);
+  const [selected, setSelected] = useState(0);
-const user = route.params;
-
-// console.log(user);
 
   return (
-    <Tab.Navigator params={user} initialRouteName="Comunicados" > 
+    <Tab.Navigator params={user} initialRouteName="Comunicados" >
-    <Tab.Screen  name="Comunicados" component={Home}  initialParams={user} options={{headerStyle: {
+      <Tab.Screen name="Comunicados" component={Home} initialParams={user} options={{
-      backgroundColor: "#D7A86E"
+        headerStyle: {
-    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)}
+          backgroundColor: "#D7A86E"
-     /> 
+        }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)
-    <Tab.Screen  name="Reservas" component={Reservas } initialParams={user} options={{headerStyle: {
+      }} onclick={() => setSelected(0)}
-      backgroundColor: "#D7A86E"
+      />
-    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)}  /> 
+      <Tab.Screen name="Reservas" component={Reservas} initialParams={user} options={{
-    <Tab.Screen  name="Perfil" component={Profile} initialParams={user} options={{headerStyle: {
+        headerStyle: {
-      backgroundColor: "#D7A86E"
+          backgroundColor: "#D7A86E"
-    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(2)} /> 
+        }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)
-  </Tab.Navigator>
+      }} onclick={() => setSelected(1)} />
+      <Tab.Screen name="Perfil" component={Profile} initialParams={user} options={{
+        headerStyle: {
+          backgroundColor: "#D7A86E"
+        }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="#D7A86E" size="md" />)
+      }} onclick={() => setSelected(2)} />
+    </Tab.Navigator>
   )
 }
 export default function App() {
   return (
     <NativeBaseProvider>
-
+      <UserContextProvider>
-    <NavigationContainer>
+        <NavigationContainer>
-      <Stack.Navigator initialRouteName="LogIn">
+          <Stack.Navigator initialRouteName="LogIn">
-        <Stack.Screen name="Inicio" component={LogIn} options={{headerStyle: {
+            <Stack.Screen name="Inicio" component={LogIn} options={{
-      backgroundColor: "#D7A86E"
+              headerStyle: {
-    }}} />
+                backgroundColor: "#D7A86E"
-        <Stack.Screen name="Comunicados" component={HomeTab} options={{headerShown: false}} />
+              }
-        <Stack.Screen name="Password" component={RecoverPassword} />
+            }} />
-        <Stack.Screen name="area" component={AreaComun} options={{headerStyle: {
+            <Stack.Screen name="Comunicados" component={HomeTab} options={{ headerShown: false }} />
-      backgroundColor: "#D7A86E"
+            <Stack.Screen name="Password" component={RecoverPassword} />
-    }}} />
+            <Stack.Screen name="area" component={AreaComun} options={{
-      </Stack.Navigator>
+              headerStyle: {
-
+                backgroundColor: "#D7A86E"
-    
+              }
-    </NavigationContainer>
+            }} />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </UserContextProvider>
     </NativeBaseProvider>
   );
-}
+}

mobile-ui/components/CommentCard/index.js

@@ -0,0 +1,51 @@
+import { format } from "date-fns";
+import {
+    Badge,
+    Box, HStack, Pressable,
+    Spacer, Text
+} from "native-base";
+import PropTypes from 'prop-types';
+
+import React from 'react';
+
+export const CommentCard = ({ date, comment }) => {
+    const dateFormated = format(new Date(date), "dd LL yyyy")
+    return (
+        <Pressable
+            rounded="8"
+            overflow="hidden"
+            borderWidth="1"
+            borderColor="coolGray.300"
+            maxW="96"
+            shadow="3"
+            bg="coolGray.100"
+            p="5"
+            marginTop="4"
+        >
+            <Box>
+                <HStack alignItems="center">
+                    <Badge colorScheme="darkBlue" _text={{
+                        color: "white"
+                    }} variant="solid" rounded="4">
+                        Comunicado
+                    </Badge>
+                    <Spacer />
+                    <Text fontSize={10} color="coolGray.800">
+                        {dateFormated}
+                    </Text>
+                </HStack>
+                <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
+                    Administrador de Comunidad
+                </Text>
+                <Text mt="2" fontSize="sm" color="coolGray.700">
+                    {comment}
+                </Text>
+            </Box>
+        </Pressable>
+    )
+}
+
+CommentCard.propTypes = {
+    date: PropTypes.string.isRequired,
+    comment: PropTypes.string.isRequired,
+}

mobile-ui/components/Home.js

@@ -1,88 +1,69 @@
-import React from "react";
 import {
-    Text,
+  Box, ScrollView
-    HStack,
+} from "native-base";
-    Badge,
+import React, { useContext, useEffect, useState } from "react";
-    Box,
+import { UserContext } from "../context/UserContext";
-Pressable,
+import { API } from "../environment/api";
-    Spacer, 
+import { CommentCard } from "./CommentCard";
-    ScrollView
-  } from "native-base";
-  import { MaterialCommunityIcons } from '@expo/vector-icons'; 
-export default function Home(){
 
-  const [selected, setSelected] = React.useState(0);
+export default function Home() {
-    return (
+  const { user } = useContext(UserContext)
+  const [isRequesting, setIsRequesting] = useState(false);
+  const [comments, setComments] = useState([]);
 
-      <Box alignItems="center">
+  useEffect(() => {
+
+    const onRequestCommentsData = async () => {
+      console.log("CALLED?")
+      setIsRequesting(true);
+
+      try {
+        const jsonResponse = await fetch(`${API.BASE_URL}/post/allComments`, {
+          method: "GET",
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        })
+
+        const response = await jsonResponse.json();
+
+        console.log(response);
+
+        setComments(response.message);
+
+      } catch (error) {
+
+      }
+
+      setIsRequesting(false)
+    }
+
+    onRequestCommentsData()
+
+  }, [user])
+
+
+  return (
+
+    <Box alignItems="center">
+
+      <ScrollView width='100%' h='550' ml='1' _contentContainerStyle={{
+        px: "20px",
+        mb: "4",
+        minW: "72"
+      }}>
+
+        {
+          comments.map(item => (
+            <CommentCard
+              key={item._id}
+              comment={item.comment}
+              date={item.date_entry}
+            />
+          ))
+        }
 
-<ScrollView width='100%' h='550' ml='1' _contentContainerStyle={{
-      px: "20px",
-      mb: "4",
-      minW: "72"
-    }}>
-      <Pressable onPress={() => console.log("I'm Pressed")} rounded="8" overflow="hidden" borderWidth="1" borderColor="coolGray.300" maxW="96" shadow="3" bg="coolGray.100" p="5" marginTop="4">
-        <Box>
-          <HStack alignItems="center">
-            <Badge colorScheme="darkBlue" _text={{
-            color: "white"
-          }} variant="solid" rounded="4">
-              Comunicado
-            </Badge>
-            <Spacer />
-            <Text fontSize={10} color="coolGray.800">
-              1 month ago
-            </Text>
-          </HStack>
-          <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
-            Administrador de Comunidad
-          </Text>
-          <Text mt="2" fontSize="sm" color="coolGray.700">
-            Notificacion sobre la aplicacion
-          </Text>
-         
-        </Box>
-      </Pressable>
-      
       </ScrollView>
     </Box>
-      //   <Center width={"100%"} marginTop={"auto"}>
+  )
-           
+}
-      // <Box safeAreaTop bg="#D7A86E" flex={1} />
-      // <HStack bg="#D7A86E" px="2" py="4" justifyContent="space-between" alignItems="center" w="100%" maxW="100%">
-
-      //   <Pressable opacity={selected === 0 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(0) && navigation.navigate('Home')}>
-      //       <Center>
-      //         <Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="white" size="md" />
-      //         <Text color="white" fontSize="15">
-      //           Inicio
-      //         </Text>
-      //       </Center>
-      //     </Pressable>
-      
-        
-      //   <Pressable opacity={selected === 1 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(1) && ( () => navigation.navigate('Reservas'))}>
-      //       <Center>
-      //         <Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="white" size="md" />
-      //         <Text color="white" fontSize="15">
-      //           Reservas
-      //         </Text>
-      //       </Center>
-      //     </Pressable>
-      
-       
-      //   <Pressable opacity={selected === 2 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(2)}>
-      //       <Center>
-      //         <Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="white" size="md" />
-      //         <Text color="white" fontSize="15">
-      //           Perfil
-      //         </Text>
-      //       </Center>
-      //     </Pressable>
-     
-        
-      // </HStack>
-      // </Center>
-       
-    )
-}

mobile-ui/components/LogIn.js

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, { useContext, useState } from "react";
 import Cookies from 'universal-cookie';
 import {
   Text,
@@ -12,43 +12,40 @@ import {
   Image
 } from "native-base";
 import logo from "../assets/logo-katoikia.png";
-import { Entypo } from '@expo/vector-icons'; 
+import { Entypo } from '@expo/vector-icons';
-import { MaterialCommunityIcons } from '@expo/vector-icons'; 
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { View, TextInput, StyleSheet } from "react-native";
+import { UserContext } from "../context/UserContext";
+import { API } from "../environment/api";
 
-const baseURL = "http://localhost:4000/user/loginUser"; 
+const baseURL = `${API.BASE_URL}/user/loginUser`;
-const cookies = new Cookies(); 
+const cookies = new Cookies();
 
 // const handleChange = (value) => {
 // console.log(value);
 
 // }
 
-export default function LogIn({navigation}) {
+export default function LogIn({ navigation }) {
 
-  const [email, setEmail] = useState(); 
+  const { addUser } = useContext(UserContext);
-  const [password, setPassword] = useState();
-  // const [inputs, setInputs] = useState();
 
-  const iniciarSesion = async ()  => {
+  const [credentials, setCredentials] = useState({
+    email: "",
+    password: ""
+  });
 
-    console.log(email);
 
-    const userData = {
+  const onHandleChange = (name) => (value) => setCredentials(prev => ({ ...prev, [name]: value }))
-      email: "lalo@lalo.com", 
+
-      password: '12345'
+  const iniciarSesion = async () => {
-    }
+    console.log(credentials)
-  
-    console.log(userData);
-    // const userData = JSON.stringify(FormControl.toString);
-    // console.log(userData);
-  
     try {
   
       await fetch(baseURL, {
         cache: 'no-cache', 
         method: 'POST', 
-        body: JSON.stringify(userData), 
+        body: JSON.stringify(credentials), 
         headers: {
           'Content-Type': 'application/json'
         }
@@ -64,81 +61,86 @@ export default function LogIn({navigation}) {
 
         // inqulino 4 y guarda 63
          const user = response.message
-
-         //console.log(user);
-  
-         cookies.set('id',user._id, {path: "/"} )
-         cookies.set('name',user.name, {path: "/"} )
-         cookies.set('email',user.email, {path: "/"} )
-         cookies.set('type',user.user_type, {path: "/"} )
           if(user.user_type == '4'){
 
            
           }else if(user.user_type == '3'){
-            navigation.navigate('Comunicados', {user})
+            addUser(user);
+            navigation.navigate('Comunicados')
           }
       })
       
     } catch (error) {
       console.log("ERROR: " +error);
     }
-  
+
-     
   }
 
   return (
-  
-      
-      <Center w="100%">
-        <Box safeArea p="2" py="8" w="90%" maxW="290">
 
-          <Center> 
-          <Image  source={
-          logo
-        } width={500} height={550} m='2'
-    alt="Katoikia logo" size="xl" justifyContent="center" />
 
-          </Center>
+    <Center w="100%">
-      
+      <Box safeArea p="2" py="8" w="90%" maxW="290">
-          <Heading
-            size="lg"
-            fontWeight="600"
-            color="coolGray.800"
-            _dark={{
-              color: "warmGray.50",
-            }}
-          >
-            Bienvenido a Katoikia 
-          </Heading>
-          <Heading
-            mt="1"
-            _dark={{
-              color: "warmGray.200",
-            }}
-            color="coolGray.600"
-            fontWeight="medium"
-            size="xs"
-          >
-             Su app de comunidad de confianza
-          </Heading>
 
-<View style={styles.container}>
+        <Center>
-  <VStack space={3} mt="5">
+          <Image source={
+            logo
+          } width={500} height={550} m='2'
+            alt="Katoikia logo" size="xl" justifyContent="center" />
+
+        </Center>
+
+        <Heading
+          size="lg"
+          fontWeight="600"
+          color="coolGray.800"
+          _dark={{
+            color: "warmGray.50",
+          }}
+        >
+          Bienvenido a Katoikia
+        </Heading>
+        <Heading
+          mt="1"
+          _dark={{
+            color: "warmGray.200",
+          }}
+          color="coolGray.600"
+          fontWeight="medium"
+          size="xs"
+        >
+          Su app de comunidad de confianza
+        </Heading>
+
+        <View style={styles.container}>
+          <VStack space={3} mt="5">
             <FormControl isRequired >
               <FormControl.Label> Correo Electrónico </FormControl.Label>
 
-              <View style={styles.viewSection}> 
+              <View style={styles.viewSection}>
-              <Entypo name="email" size={20} color="grey" style={styles.iconStyle} />
+                <Entypo name="email" size={20} color="grey" style={styles.iconStyle} />
-              <TextInput name='email' type="text" style={styles.input} placeholder='Correo electrónico' onChangeText={(value) => setEmail(value) } />
+                <TextInput
+                  name='email'
+                  type="text"
+                  style={styles.input}
+                  value={credentials.email}
+                  placeholder='Correo electrónico'
+                  onChangeText={onHandleChange("email")} />
               </View>
-              
+
             </FormControl>
             <FormControl isRequired>
-            <FormControl.Label Text='bold'> Contraseña </FormControl.Label>
+              <FormControl.Label Text='bold'> Contraseña </FormControl.Label>
-                <View style={styles.viewSection}> 
+              <View style={styles.viewSection}>
-                <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle}/>
+                <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle} />
-                <TextInput name='password' type="password" style={styles.input} placeholder='Contraseña' onChangeText={(value) => setPassword(value)} />
+                <TextInput
-                </View>
+                  name='password'
+                  type="password"
+                  style={styles.input}
+                  value={credentials.password}
+                  placeholder='Contraseña'
+                  onChangeText={onHandleChange("password")} />
+              </View>
               <Link
                 _text={{
                   fontSize: "xs",
@@ -149,24 +151,24 @@ export default function LogIn({navigation}) {
                 alignSelf="flex-end"
                 mt="1"
                 onPress={() => navigation.navigate('Password')}
-                
+
               >
-             
+
-                  Recuperar contraseña
+                Recuperar contraseña
-               
+
               </Link>
             </FormControl>
-            <Button  mt="2" backgroundColor="#D7A86E" onPress={() => iniciarSesion()}
+            <Button mt="2" backgroundColor="#D7A86E" onPress={iniciarSesion}
             >
               <Text>Continuar</Text>
             </Button>
-           
+
           </VStack></View>
-          
+
-        </Box>
+      </Box>
-      </Center>
+    </Center>
   );
- 
+
 }
 
 const styles = StyleSheet.create({
@@ -180,16 +182,16 @@ const styles = StyleSheet.create({
     paddingRight: 10,
     paddingBottom: 10,
     paddingLeft: 0,
-    marginTop: 50, 
+    marginTop: 50,
-    marginBottom: 10, 
+    marginBottom: 10,
     borderRadius: 4
-  }, 
+  },
 
   iconStyle: {
     paddingBottom: 20,
-    marginTop: 3, 
+    marginTop: 3,
     paddingTop: 35
-  }, 
+  },
 
   viewSection: {
     flex: 1,
@@ -203,4 +205,4 @@ const styles = StyleSheet.create({
   container: {
 
   }
-})
+})

mobile-ui/context/UserContext.js

@@ -0,0 +1,23 @@
+import React, { createContext, useState } from 'react'
+
+export const UserContext = createContext({});
+
+export const UserContextProvider = ({ children }) => {
+    const [user, setUser] = useState(null);
+
+    const addUser = (user) => setUser(user);
+
+    const removeUser = () => setUser(null);
+
+    const value = {
+        user,
+        addUser,
+        removeUser
+    }
+
+    return (
+        <UserContext.Provider value={value}>
+            {children}
+        </UserContext.Provider>
+    )
+}

mobile-ui/environment/api.js

@@ -0,0 +1,5 @@
+
+
+export class API {
+    static BASE_URL = "http://10.0.2.2:4000"
+}

mobile-ui/package.json

@@ -22,9 +22,11 @@
     "@react-navigation/native": "^6.0.11",
     "@react-navigation/native-stack": "^6.7.0",
     "@react-navigation/stack": "^6.2.2",
+    "date-fns": "^2.29.2",
     "expo": "^44.0.0",
     "expo-status-bar": "~1.2.0",
     "native-base": "3.4.0",
+    "prop-types": "^15.8.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-native": "0.64.3",