Sprint 4 commit of Radices

Radices/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

Radices/.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

Radices/App.js

@@ -0,0 +1,14 @@
+//Nathalia A. Alicea Maldonado
+
+import React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import TopTabNavigator from './Navigators/TopBarNavigator';
+
+export default function App() {
+  return (
+    <SafeAreaProvider>
+      <TopTabNavigator />
+    </SafeAreaProvider>
+  );
+}
+

Radices/Navigators/DrawerNavigation.js

@@ -0,0 +1,76 @@
+//Nathalia A. Alicea
+//codigo para Drawer Navigation. No está en uso. Pero si el cliente deseará tener Drawer Navigation se podría utilizar.
+
+import * as React from 'react';
+import {View, StyleSheet, ScrollView, Image} from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import {
+    createDrawerNavigator,
+    DrawerContentScrollView,
+    DrawerItemList, 
+    DrawerItem
+} from '@react-navigation/drawer';
+import Home from '../Screens/Home';
+import Contact from '../Screens/Contact';
+import About from '../Screens/About';
+
+
+
+
+function CustomDrawerConten(props) {
+    return(
+        <ScrollView style={styles.container}>
+            <View style={styles.drawerHeader}>
+                <View>
+                    <Image style ={styles.drawerHeaderImage} source={require('../image/logowebes.png')} />
+                </View>
+            </View>
+            <DrawerContentScrollView {...props}>
+                <DrawerItemList {...props} />
+                <DrawerItem 
+                    
+                    label ="Close drawer"
+                    onPress={ () => props.navigation.closeDrawer()}
+                />
+            </DrawerContentScrollView>
+        </ScrollView>
+    );
+}
+
+const Drawer = createDrawerNavigator();
+
+function MyDrawer(){
+    return(
+        <Drawer.Navigator backBehavior="history" drawerContent={props => <CustomDrawerConten{...props}/>}>
+            <Drawer.Screen name = "Sobre Nosotros" component={About}/>
+            <Drawer.Screen name ="Tienda" component={Home}/>
+            <Drawer.Screen name = "Contáctanos" component={Contact}/>
+        </Drawer.Navigator>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    }, 
+    drawerHeader: {
+        backgroundColor: "#ffffff",
+        height: 150, 
+        alignItems:'center',
+        justifyContent: 'center',
+        flex: 1, 
+        flexDirection: 'row'
+    }, drawerHeaderImage: {
+        width: 260, 
+        height: 130
+
+    }
+})
+
+export default function DrawerNavigation(){
+    return (
+        <NavigationContainer>
+            <MyDrawer />
+        </NavigationContainer>
+    )
+}

Radices/Navigators/TopBarNavigator.js

@@ -0,0 +1,231 @@
+//Nathalia A. Alicea
+//código para la implementación de los Tabs y las pantalla de "Sobre Nosotros", "Insignia", "Tienda" y "Contacto"
+
+import * as React from 'react';
+import {useState, useEffect}  from 'react';
+import {Text, View, Button, Linking, Image, FlatList, TextInput, StyleSheet, ScrollView } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+//Json que se están usando como ejemplo de lo que se usaría con una API
+//import JsonNosotros from '../nosotros.json' 
+//import insignias from '../insignias.json'
+
+import HomeScreen from '../codes/screen/Homescreen/index';
+
+import fetch_json from '../fetch_json';
+
+//función con código para la pantalla de "Sobre Nosotros" donde la data se extrae de Json files.
+function Nosotros() {
+
+    const [jsonNosotros, setNosotros] = useState([]);
+    const url = 'http://136.145.231.41/raices_api/api/nosotros/read.php?id=2';
+
+    useEffect(() => {
+        fetch_json(url, setNosotros);
+    });
+
+    return (
+        <View style = {{
+            flex:1,
+            alignItems: "center",
+            justifyContent: "space-evenly",
+            backgroundColor: "#efffea"}}
+            >
+            <Text></Text>
+            <Image style = {{width: 260, height: 130}} source={require('../image/logowebes.png')}/>
+            <Text></Text>
+            <Text></Text>
+            <ScrollView>
+            {jsonNosotros.map((item)=>{
+                return (
+                    <View key ={item.key} >
+                        <Image style = {styles.image} source={{uri: item.imagen}} />
+                        <Text style={styles.item}>{item.nombre} {item.apellido} </Text>
+                        <Text style={styles.itemLetters}>{item.descripcion}</Text>
+                        <Text></Text>
+                    </View>
+                )
+            })}
+            </ScrollView>
+            <ScrollView>
+            <View >
+                <View>
+                    <Text style={styles.itemMVV}>Misión</Text>
+                    <Text style={styles.itemLettersMVV}>Aportar a la transformación hacia la sostenibilidad a nivel individual, empresarial y organizacional a través de la educación y de la promoción y validación de negocios locales que venden productos o servicios sostenibles.</Text>
+                </View>
+                <View>
+                    <Text style={styles.itemMVV}>Visión</Text>
+                    <Text style={styles.itemLettersMVV}>Ser reconocidos globalmente como una organización educativa con confiabilidad y compromiso con la educación sobre la sostenibilidad y la promoción y validación de productos y servicios sostenibles locales, destacando y contribuyendo al bienestar de la ciudadanía, el desarrollo económico local, el comercio justo y la conservación del ambiente.</Text>
+                </View>
+                <View>
+                    <Text style={styles.itemMVV}>Valores</Text>
+                    <Text style={styles.itemLettersMVV}>Educación, Respeto y responsabilidad social y ambiental, Comercio justo, Confiabilidad, Disciplina, Empatía y solidaridad, Equidad, Honestidad, Humanidad y respeto, Integridad y objetividad</Text>
+                </View>
+            </View>
+            </ScrollView>
+            
+        </View>     
+    );
+
+}
+
+//función donde se extraen las insignias y las descripciones de las mismas y se muestran en el tab de "Insignias".
+function Logos() {
+    const [jsonInsignias, setInsignias] = useState([]);
+    const url = 'http://136.145.231.41/raices_api/api/nosotros/read.php?id=1';
+
+    useEffect(() => {
+        fetch_json(url, setInsignias);
+    });
+
+    return (
+        <View style = {{
+            flex:1,
+            alignItems: "center",
+            justifyContent: "space-evenly",
+            backgroundColor: "#efffea"}}
+            >
+            <Text></Text>
+            <Image style = {{width: 260, height: 130}} source={require('../image/logowebes.png')}/>
+            <Text></Text>
+            <Text></Text>
+            <ScrollView>
+            {jsonInsignias.map((item)=>{
+                return (
+                    <View key ={item.id} >
+                        <Image style = {styles.image} source={{uri: item.imagen}} />
+                        <Text style={styles.description}>{item.nombre} </Text>
+                        <Text></Text>
+                    </View>
+                )
+            })}
+            </ScrollView>
+        </View>
+    );
+}
+
+//función para Tienda. 
+function Tienda() {
+
+    return (
+        <View style={{
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: "#efffea"
+        }}>
+            <HomeScreen />
+        </View>
+    );
+}
+
+//función donde los clientes o personas interesadas pueden escribir un email a raices.
+function Contacto() {
+    return (
+        <View style = {{
+            flex:1,
+            alignItems: "center",
+            justifyContent: "space-evenly",
+            backgroundColor: "#efffea"}}>
+
+            <Image style = {{width: 260, height: 130}} source={require('../image/logowebes.png')}/>
+            <Text style={{ fontSize: 20, color: '#2d4b09', fontWeight: '800' }}>Para solicitudes o reclamos: </Text>
+            <View style={{padding:20}}>
+                
+                <Text style={{ fontSize: 10, color: '#4c5b4b', fontWeight: '500' }}>
+                    Con el próposito de poder comunicarnos de la manera más efectiva posible, favor de proveer la siguiente información: propósito de comunicación, nombre, apellido y correo electrónico. Nos estaremos comunicando con usted prontamente.
+                </Text>
+                <Button onPress={() => Linking.openURL('mailto:contacto@raices.com?subject=SendMail&body=Favor de incluir motivo de comunicación e información personal.') } title="Contáctanos!" color="#2d4b09" />
+            </View>
+    </View>
+    );
+        
+
+}
+
+//estilos de stylesheets
+const styles = StyleSheet.create({
+    image:{
+        flex:2,
+        height: 150,
+        resizeMode: "contain"
+    },
+    container: {
+        flex: 1,
+        backgroundColor:'#58AB63', 
+        paddingTop:40, 
+        paddingHorizontal: 20, 
+    },
+    item: { 
+        marginTop:30,
+        padding:10,
+        backgroundColor: '#77aa5a',
+        fontSize: 20, 
+        color: "#fff",
+        justifyContent: "flex-end"
+
+    },
+    description: {
+        padding:10,
+        backgroundColor: '#77aa5a',
+        fontSize: 20, 
+        color: "#fff",
+        textAlign: "center",
+        alignItems: "stretch"
+
+    },
+    itemLetters: { 
+        padding: 30,
+        backgroundColor: '#77aa5a',
+        fontSize: 10, 
+        color: "#fff", 
+        justifyContent: "flex-start"
+    },
+    itemMVV:{
+        padding: 10,
+        fontSize: 15, 
+        color: "green"},
+    itemLettersMVV: { 
+        padding: 10,
+        fontSize: 10, 
+        color: "#77aa5a", 
+        justifyContent: "flex-start"
+        }
+});
+
+const Tab = createMaterialTopTabNavigator();
+
+//todas las pantalla de los tabs.
+function MyTabs() {
+    const insets = useSafeAreaInsets();
+    return (
+        <Tab.Navigator screenOptions ={{ style: { backgroundColor: "white", marginTop: insets.top }, activeTintColor: "#228B22", labelStyle: { fontSize: 12 } }}>
+            <Tab.Screen name="Sobre Nosotros"
+                component={Nosotros}
+                options={{ tabBarLabel: 'Sobre Nosotros' }}
+            />
+            <Tab.Screen name="Insignias"
+                component={Logos}
+                options={{ tabBarLabel: 'Insignias' }}
+            />
+            <Tab.Screen name="Tienda"
+                component={Tienda}
+                options={{ tabBarLabel: 'Tienda' }}
+            />
+            <Tab.Screen name="Contacto"
+                component={Contacto}
+                options={{ tabBarLabel: 'Contacto' }}
+            />
+        </Tab.Navigator>
+    );
+}
+
+export default function TopTabNavigator() {
+    return (
+        <NavigationContainer>
+            <MyTabs />
+        </NavigationContainer>
+    )
+}

Radices/Screens/About.js

@@ -0,0 +1,35 @@
+//Nathalia A. ALicea Maldonado
+//Pantalla de Sobre Nosotros. No se está utilizando.
+
+import React from 'react';
+import {View, Text, StyleSheet, Button} from 'react-native';
+
+export default function About({navigation}){
+    return(
+        <View style = {styles.container}>
+            <View style = {styles.content}>
+                <Text style = {styles.text}>
+                    About is here!
+                </Text>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container:{
+        flex:1
+    },
+    content:{
+        flex:1,
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        backgroundColor: '#c303ac'
+    }, 
+    text:{
+        fontSize: 20, 
+        color: '#ffffff', 
+        fontWeight: "800"
+    }
+
+})

Radices/Screens/Contact.js

@@ -0,0 +1,36 @@
+//Nathalia A. ALicea Maldonado
+//Pantalla de Sobre Contacto. No se está utilizando.
+
+import React from 'react';
+import {View, Text, StyleSheet, Button} from 'react-native';
+
+export default function Contact({navigation}){
+    return(
+        <View style = {styles.container}>
+            <View style = {styles.content}>
+                <Text style = {styles.text}>
+                    Contact is here!
+                </Text>
+                <Button title = "Go back!" onPress ={()=> navigation.goBack()} />
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container:{
+        flex:1
+    },
+    content:{
+        flex:1,
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        backgroundColor: '#c203fc'
+    }, 
+    text:{
+        fontSize: 20, 
+        color: '#ffffff', 
+        fontWeight: "800"
+    }
+
+})

Radices/Screens/Home.js

@@ -0,0 +1,34 @@
+//Nathalia A. ALicea Maldonado
+//Pantalla de Home. No se está utilizando.
+
+import React from 'react';
+import {View, Text, StyleSheet, Button} from 'react-native';
+
+export default function Home({navigation}){
+    return(
+        <View style = {styles.container}>
+            <View style = {styles.content}>
+                <Text style = {styles.text}>
+                    Home is here
+                </Text>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    content: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center', 
+        backgroundColor: '#03cafc'
+    },
+    text: {
+        fontSize: 20,
+        color: '#ffffff',
+        fontWeight: '800'
+    }
+})

Radices/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "Radices",
+    "slug": "Radices",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

Radices/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

Radices/codes/ProductItems/ProductItem.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {useState,useEffect} from 'react';
+import {Image,View,Text} from 'react-native';
+import styles from './styles';
+
+import fetch_json from '../../fetch_json';
+
+interface ProductItemProps{
+  item: {
+    id_producto: string,
+    producto: string;
+    imagen: string;
+    comerciante: string;
+    precio: number;
+    insignias: string[];
+  }
+}
+
+export default function ProductItems(props: ProductItemProps) {
+  const [jsonInsignias, setInsignias] = useState([]);
+  const url = 'http://136.145.231.41/raices_api/api/nosotros/read.php?id=1';
+
+  async function fetch_() {
+    try {
+        const response = await fetch(url);
+        const json = await response.json();
+        setInsignias(json);
+    } catch (error) {
+        //console.error(error);
+    };
+}
+
+  useEffect(() => {
+      //fetch_();
+      fetch_json(url, setInsignias);
+
+  });
+
+
+const {item} = props;
+  return(
+    <View style={styles.root} key={item.id_producto}>
+    <Image style={styles.imagen} source={{uri: item.imagen}} />
+      <View>
+        
+        {item.insignias.map((id)=>{
+
+          let imagen = '';
+          for (let i = 0; i < jsonInsignias.length; i++) {
+            if (jsonInsignias[i].id == id) {
+              imagen = jsonInsignias[i].imagen;
+              break;
+            }
+          }
+
+          if (imagen.length == 0) {
+            //console.log(id + 'empty imagen');
+            return;
+          }
+          else {
+
+            return (
+              <Image key={id} style = {styles.insignia} source={{uri: imagen}} />
+            )
+
+          }
+
+        })}            
+        
+        <Text style={styles.producto} numberOfLines={3}> {item.producto} </Text>
+        <Text style={styles.comerciante} numberOfLines={1}> by {item.comerciante} </Text>
+        <Text style={styles.price}> For ${item.precio}</Text>
+      </View>
+    </View>
+  );
+}

Radices/codes/ProductItems/styles.ts

@@ -0,0 +1,38 @@
+import {StyleSheet} from 'react-native';
+const styles = StyleSheet.create({
+  root:{
+    flexDirection: 'row',
+    borderWidth: 2,
+    borderColor:'#d1d1d1',
+    borderRadius: 20,
+    backgroundColor: '#fff',
+    marginVertical: 5,
+  },
+  imagen:{
+    flex:2,
+    height:150,
+    resizeMode:'contain',
+  },
+  right_container: {
+    padding:10,
+    flex:3,
+  },
+  producto: {
+    fontSize:18,
+  },
+  price:{
+    fontSize:18,
+    fontWeight:'bold',
+    padding:10,
+  },
+  comerciante:{
+    fontSize:10,
+    padding:10,
+  },
+  insignia:{
+    width: 50,
+    height: 50,
+    resizeMode:'contain',
+  },
+});
+export default styles;

Radices/codes/screen/Homescreen/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import {useState,useEffect} from 'react';
+import {View,TextInput,StyleSheet,FlatList} from "react-native";
+import ProductItems from "../../ProductItems/ProductItem";
+
+import fetch_json from '../../../fetch_json';
+
+export default function HomeScreen() {
+
+const [jsonProductos, setProductos] = useState([]);
+const urlProductos = 'http://136.145.231.41/raices_api/api/inventario/read.php';
+
+/*
+const [query, setQuery] = useState('');
+
+const filter = (query: string) => {
+  return jsonProductos.filter((item) =>
+    item.producto.toLocaleLowerCase().includes(query.toLocaleLowerCase())
+  );
+};
+
+async function fetch_() {
+  try {
+      const response = await fetch(urlProductos);
+      const json = await response.json();
+      if (query.length === 0) {
+        console.log('empty');
+        setProductos(json);
+      }
+      else {
+        console.log(query);
+        setProductos(json.filter((item) => item.producto.includes(query)));
+      }
+  } catch (error) {
+      console.error(error);
+  };
+}
+*/
+
+useEffect(() => {
+    fetch_json(urlProductos, setProductos);
+    //fetch_();
+});
+
+const [jsonInsignias, setInsignias] = useState([]);
+const url = 'http://136.145.231.41/raices_api/api/nosotros/read.php?id=1';
+
+useEffect(() => {
+    fetch_json(url, setInsignias);
+});
+
+  return (
+    <View style={styles.page}>
+      {/*
+      <TextInput
+        placeholder="Hacer búsqueda..."
+        onChangeText={(query) => {setQuery(query)}}
+      />
+      */}
+
+      <FlatList
+        data={jsonProductos}
+        renderItem={({item}) => <ProductItems item={item} />}
+        keyExtractor={(item, index) => item.id_producto}
+      />
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  page: {
+    padding: 10,
+  },
+});

Radices/fetch_json.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export default async function fetch_json(url, setJson) {
+    try {
+        const response = await fetch(url);
+        const json = await response.json();
+        setJson(json);
+    } catch (error) {
+        console.error(error);
+    };
+}

Radices/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "finalreact",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "^0.1.11",
+    "@react-navigation/drawer": "^6.1.8",
+    "@react-navigation/material-top-tabs": "^6.0.6",
+    "@react-navigation/native": "^6.0.6",
+    "expo": "~43.0.2",
+    "expo-status-bar": "~1.1.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-native": "0.64.3",
+    "react-native-gesture-handler": "~1.10.2",
+    "react-native-reanimated": "~2.2.0",
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.8.0",
+    "react-native-tab-view": "^3.1.1",
+    "react-native-web": "0.17.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "typescript": "~4.3.5",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.64.12"
+  },
+  "private": true
+}

Radices/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}