Connect communities and login
This commit is contained in:
Maria Sanchez
parent
ee456580d3
commit
88ca9b6f11
|
|
@ -10,4 +10,4 @@ npm-debug.*
|
|||
web-build/
|
||||
.vscode
|
||||
.DS_Store
|
||||
|
||||
package-lock.json
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React,{useState} from "react";
|
||||
import React, { useContext, useState } from "react";
|
||||
import {
|
||||
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";
|
||||
|
|
@ -13,52 +13,59 @@ 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();
|
||||
|
||||
|
||||
|
||||
function HomeTab({route}) {
|
||||
|
||||
const [selected, setSelected] = useState(0);
|
||||
const user = route.params;
|
||||
|
||||
// console.log(user);
|
||||
function HomeTab({ route }) {
|
||||
const { user } = useContext(UserContext);
|
||||
const [selected, setSelected] = useState(0);
|
||||
|
||||
return (
|
||||
<Tab.Navigator params={user} initialRouteName="Comunicados" >
|
||||
<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)}
|
||||
/>
|
||||
<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)} />
|
||||
<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>
|
||||
<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)}
|
||||
/>
|
||||
<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)} />
|
||||
<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>
|
||||
|
||||
<NavigationContainer>
|
||||
<Stack.Navigator initialRouteName="LogIn">
|
||||
<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: {
|
||||
backgroundColor: "#D7A86E"
|
||||
}}} />
|
||||
</Stack.Navigator>
|
||||
|
||||
|
||||
</NavigationContainer>
|
||||
<UserContextProvider>
|
||||
<NavigationContainer>
|
||||
<Stack.Navigator initialRouteName="LogIn">
|
||||
<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: {
|
||||
backgroundColor: "#D7A86E"
|
||||
}
|
||||
}} />
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
</UserContextProvider>
|
||||
</NativeBaseProvider>
|
||||
);
|
||||
}
|
||||
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -1,88 +1,69 @@
|
|||
import React from "react";
|
||||
import {
|
||||
Text,
|
||||
HStack,
|
||||
Badge,
|
||||
Box,
|
||||
Pressable,
|
||||
Spacer,
|
||||
ScrollView
|
||||
} from "native-base";
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
export default function Home(){
|
||||
Box, ScrollView
|
||||
} from "native-base";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { UserContext } from "../context/UserContext";
|
||||
import { API } from "../environment/api";
|
||||
import { CommentCard } from "./CommentCard";
|
||||
|
||||
const [selected, setSelected] = React.useState(0);
|
||||
return (
|
||||
export default function Home() {
|
||||
const { user } = useContext(UserContext)
|
||||
const [isRequesting, setIsRequesting] = useState(false);
|
||||
const [comments, setComments] = useState([]);
|
||||
|
||||
<Box alignItems="center">
|
||||
useEffect(() => {
|
||||
|
||||
<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>
|
||||
const onRequestCommentsData = async () => {
|
||||
console.log("CALLED?")
|
||||
setIsRequesting(true);
|
||||
|
||||
</Box>
|
||||
</Pressable>
|
||||
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>
|
||||
</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>
|
||||
|
||||
)
|
||||
)
|
||||
}
|
||||
|
|
@ -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) => {
|
||||
|
|
@ -24,31 +26,26 @@ const cookies = new Cookies();
|
|||
|
||||
// }
|
||||
|
||||
export default function LogIn({navigation}) {
|
||||
export default function LogIn({ navigation }) {
|
||||
|
||||
const [email, setEmail] = useState();
|
||||
const [password, setPassword] = useState();
|
||||
// const [inputs, setInputs] = useState();
|
||||
const { addUser } = useContext(UserContext);
|
||||
|
||||
const iniciarSesion = async () => {
|
||||
const [credentials, setCredentials] = useState({
|
||||
email: "",
|
||||
password: ""
|
||||
});
|
||||
|
||||
console.log(email);
|
||||
|
||||
const userData = {
|
||||
email: "lalo@lalo.com",
|
||||
password: '12345'
|
||||
}
|
||||
|
||||
console.log(userData);
|
||||
// const userData = JSON.stringify(FormControl.toString);
|
||||
// console.log(userData);
|
||||
const onHandleChange = (name) => (value) => setCredentials(prev => ({ ...prev, [name]: value }))
|
||||
|
||||
const iniciarSesion = async () => {
|
||||
console.log(credentials)
|
||||
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,62 +74,73 @@ export default function LogIn({navigation}) {
|
|||
console.log("ERROR: " +error);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
|
||||
<Center w="100%">
|
||||
<Box safeArea p="2" py="8" w="90%" maxW="290">
|
||||
<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>
|
||||
<Image source={
|
||||
logo
|
||||
} width={500} height={550} m='2'
|
||||
alt="Katoikia logo" size="xl" justifyContent="center" />
|
||||
|
||||
</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>
|
||||
<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">
|
||||
<View style={styles.container}>
|
||||
<VStack space={3} mt="5">
|
||||
<FormControl isRequired >
|
||||
<FormControl.Label> Correo Electrónico </FormControl.Label>
|
||||
|
||||
<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) } />
|
||||
<Entypo name="email" size={20} color="grey" style={styles.iconStyle} />
|
||||
<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>
|
||||
<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)} />
|
||||
</View>
|
||||
<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}
|
||||
value={credentials.password}
|
||||
placeholder='Contraseña'
|
||||
onChangeText={onHandleChange("password")} />
|
||||
</View>
|
||||
<Link
|
||||
_text={{
|
||||
fontSize: "xs",
|
||||
|
|
@ -152,19 +154,19 @@ export default function LogIn({navigation}) {
|
|||
|
||||
>
|
||||
|
||||
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>
|
||||
</Center>
|
||||
</Box>
|
||||
</Center>
|
||||
);
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
|
||||
export class API {
|
||||
static BASE_URL = "http://10.0.2.2:4000"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue