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,4 +1,4 @@
-import React,{useState} from "react";
+import React, { useContext, useState } from "react";
 import {
   NativeBaseProvider,
   Icon
@@ -13,6 +13,7 @@ import Reservas from "./components/Reservas";
 import Profile from "./components/Profile";
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import AreaComun from "./components/AreaComun";
+import { UserContext, UserContextProvider } from "./context/UserContext";
 
 const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator();
@@ -20,45 +21,51 @@ const Tab = createBottomTabNavigator();
 
 
 function HomeTab({ route }) {
-
+  const { user } = useContext(UserContext);
   const [selected, setSelected] = useState(0);
-const user = route.params;
-
-// console.log(user);
 
   return (
     <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={{
+        headerStyle: {
           backgroundColor: "#D7A86E"
-    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)}
+        }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)
+      }} onclick={() => setSelected(0)}
       />
-    <Tab.Screen  name="Reservas" component={Reservas } initialParams={user} options={{headerStyle: {
+      <Tab.Screen name="Reservas" component={Reservas} initialParams={user} options={{
+        headerStyle: {
           backgroundColor: "#D7A86E"
-    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)}  /> 
+        }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)
-    <Tab.Screen  name="Perfil" component={Profile} initialParams={user} options={{headerStyle: {
+      }} 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)} /> 
+        }, 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>
           <Stack.Navigator initialRouteName="LogIn">
-        <Stack.Screen name="Inicio" component={LogIn} options={{headerStyle: {
+            <Stack.Screen name="Inicio" component={LogIn} options={{
+              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="area" component={AreaComun} options={{
+              headerStyle: {
                 backgroundColor: "#D7A86E"
-    }}} />
+              }
+            }} />
           </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,17 +1,48 @@
-import React from "react";
 import {
-    Text,
+  Box, ScrollView
-    HStack,
-    Badge,
-    Box,
-Pressable,
-    Spacer, 
-    ScrollView
 } from "native-base";
-  import { MaterialCommunityIcons } from '@expo/vector-icons'; 
+import React, { useContext, useEffect, useState } from "react";
-export default function Home(){
+import { UserContext } from "../context/UserContext";
+import { API } from "../environment/api";
+import { CommentCard } from "./CommentCard";
+
+export default function Home() {
+  const { user } = useContext(UserContext)
+  const [isRequesting, setIsRequesting] = useState(false);
+  const [comments, setComments] = useState([]);
+
+  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])
+
 
-  const [selected, setSelected] = React.useState(0);
   return (
 
     <Box alignItems="center">
@@ -21,68 +52,18 @@ export default function Home(){
         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>
+          comments.map(item => (
+            <CommentCard
+              key={item._id}
+              comment={item.comment}
+              date={item.date_entry}
+            />
+          ))
+        }
 
       </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,
@@ -15,8 +15,10 @@ import logo from "../assets/logo-katoikia.png";
 import { Entypo } 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 handleChange = (value) => {
@@ -26,29 +28,24 @@ const cookies = new Cookies();
 
 export default function LogIn({ navigation }) {
 
-  const [email, setEmail] = useState(); 
+  const { addUser } = useContext(UserContext);
-  const [password, setPassword] = useState();
+
-  // const [inputs, setInputs] = useState();
+  const [credentials, setCredentials] = useState({
+    email: "",
+    password: ""
+  });
+
+
+  const onHandleChange = (name) => (value) => setCredentials(prev => ({ ...prev, [name]: value }))
 
   const iniciarSesion = async () => {
-
+    console.log(credentials)
-    console.log(email);
-
-    const userData = {
-      email: "lalo@lalo.com", 
-      password: '12345'
-    }
-  
-    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,18 +61,12 @@ 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')
           }
       })
       
@@ -83,7 +74,6 @@ export default function LogIn({navigation}) {
       console.log("ERROR: " +error);
     }
 
-     
   }
 
   return (
@@ -129,7 +119,13 @@ export default function LogIn({navigation}) {
 
               <View style={styles.viewSection}>
                 <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>
@@ -137,7 +133,13 @@ export default function LogIn({navigation}) {
               <FormControl.Label Text='bold'> Contraseña </FormControl.Label>
               <View style={styles.viewSection}>
                 <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
+                  name='password'
+                  type="password"
+                  style={styles.input}
+                  value={credentials.password}
+                  placeholder='Contraseña'
+                  onChangeText={onHandleChange("password")} />
               </View>
               <Link
                 _text={{
@@ -156,7 +158,7 @@ export default function LogIn({navigation}) {
 
               </Link>
             </FormControl>
-            <Button  mt="2" backgroundColor="#D7A86E" onPress={() => iniciarSesion()}
+            <Button mt="2" backgroundColor="#D7A86E" onPress={iniciarSesion}
             >
               <Text>Continuar</Text>
             </Button>

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",