GH Actions, Filtros

.github/workflows/new_build.yml

@@ -0,0 +1,28 @@
+on:
+  release:
+    types: [released]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🏗 Setup repo
+        uses: actions/checkout@v3
+
+      - name: 🏗 Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: npm
+
+      - name: 🏗 Setup EAS
+        uses: expo/expo-github-action@v8
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+
+      - name: 📦 Install dependencies
+        run: npm install
+
+      - name: 🚀 Build app
+        run: eas build --non-interactive -p android --auto-submit

.github/workflows/new_preview.yml

@@ -0,0 +1,30 @@
+on:
+  push:
+    branches: ["main"]
+
+jobs:
+  preview:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🏗 Setup repo
+        uses: actions/checkout@v3
+
+      - name: 🏗 Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: npm
+
+      - name: 🏗 Setup EAS
+        uses: expo/expo-github-action@v8
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+
+      - name: 📦 Install dependencies
+        run: npm install
+
+      - name: 🚀 Create preview
+        uses: expo/expo-github-action/preview@v8
+        with:
+          command: eas update --auto

.github/workflows/node.js.yml

@@ -5,32 +5,31 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   # pull_request:
   #   branches: [ "main" ]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
+        node-version: [18.x]
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm test
-    - name: Coveralls GitHub Action
-      uses: coverallsapp/github-action@v2
-    - name: Run codacy-coverage-reporter
-      uses: codacy/codacy-coverage-reporter-action@v1
-      with:
-        project-token: ${{ secrets.CODACY_PROJECT_TOKEN }}
-        coverage-reports: "coverage/lcov.info"
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm test
+      - name: Coveralls GitHub Action
+        uses: coverallsapp/github-action@v2
+      - name: Run codacy-coverage-reporter
+        uses: codacy/codacy-coverage-reporter-action@v1
+        with:
+          project-token: ${{ secrets.CODACY_PROJECT_TOKEN }}
+          coverage-reports: "coverage/lcov.info"

app/comuna/[comuna].js

@@ -0,0 +1,22 @@
+import { useLocalSearchParams, Stack } from "expo-router";
+import { StyleSheet, View } from "react-native";
+import ListaFerias from "../../components/ListaFerias";
+
+export default function Comuna() {
+  const { comuna } = useLocalSearchParams();
+  return (
+    <View style={styles.container}>
+      <Stack.Screen options={{ title: `Ferias de ${comuna}` }} />
+
+      <ListaFerias />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#ecf0f1",
+    overflowX: "hidden",
+  },
+});

components/ListaFerias.js

@@ -10,7 +10,7 @@ export default function ListaFerias() {
   const [listaFerias, setListaFerias] = useState();
   const [modalVisible, setModalVisible] = useState(false);
   const headers = {
-    "User-Agent": "ferias-libres/1.2.0 components/ListaFerias",
+    "User-Agent": "ferias-libres/1.3.1 components/ListaFerias",
   };
   const { comuna } = useLocalSearchParams();
 

components/ListaFeriasItem.js

@@ -1,63 +1,28 @@
 import { View, Text, StyleSheet } from "react-native";
-import * as Linking from "expo-linking";
+import { Link } from "expo-router";
+import { Entypo } from "@expo/vector-icons";
 
 export default function ListaFeriasItem({ data }) {
-  const renderDias = (semana) => {
-    let dias = [];
-    if (semana.lunes) {
-      dias.push("Lun");
-    }
-    if (semana.martes) {
-      dias.push("Mar");
-    }
-    if (semana.miercoles) {
-      dias.push("Mie");
-    }
-    if (semana.jueves) {
-      dias.push("Jue");
-    }
-    if (semana.viernes) {
-      dias.push("Vie");
-    }
-    if (semana.sabado) {
-      dias.push("Sab");
-    }
-    if (semana.domingo) {
-      dias.push("Dom");
-    }
-    return dias.join(", ");
-  };
-
-  const renderLatLongGeo = (ubicaciones) => {
-    let lat = ubicaciones[0].latitude;
-    let lon = ubicaciones[0].longitude;
-    let tag = `${lat},${lon}`;
-    return tag;
-  };
-
   return (
     <View style={styles.container}>
-      <View style={styles.layout}>
-        <View style={styles.contentLayout}>
-          <View style={[styles.icon, { backgroundColor: "#34D058" }]} />
-          <View>
-            <Text style={styles.title}>{data.nombre}</Text>
-            <Text style={styles.location}>
-              Dias de Postura: {renderDias(data.dias)}.
-            </Text>
+      <Link href={`/info?feria=${data.slug}`}>
+        <View style={styles.layout}>
+          <View style={styles.contentLayout}>
+            <Entypo
+              name="shop"
+              size={31}
+              color="#60a37c"
+              style={[styles.icon]}
+            />
+            <View>
+              <Text style={styles.title}>{data.nombre}</Text>
+              <Text style={styles.location}>
+                {data.comuna_str} - {data.dias_str}
+              </Text>
+            </View>
           </View>
         </View>
-        <Text
-          style={[styles.icon, { backgroundColor: "lightblue" }]}
-          onPress={() => {
-            let qs = renderLatLongGeo(data.ubicacion);
-            let link = `geo:${qs},500?q=Feria ${data.nombre}`;
-            Linking.openURL(link);
-          }}
-        >
-          MAP
-        </Text>
-      </View>
+      </Link>
     </View>
   );
 }

components/TabComuna.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import TabComunaItem from "./TabComunaItem";
-import { StyleSheet, View, FlatList, TextInput } from "react-native";
+import { StyleSheet, View, FlatList, TextInput, Text } from "react-native";
 
 export default function TabHoy() {
   const headers = {
@@ -32,7 +32,6 @@ export default function TabHoy() {
   }, []);
 
   const searchFilterFunction = (text) => {
-    console.log({ text });
     // Check if searched text is not blank
     if (text) {
       // Inserted text is not blank
@@ -58,20 +57,23 @@ export default function TabHoy() {
 
   return (
     <>
+      <TextInput
+        style={styles.textInputStyle}
+        onChangeText={(text) => searchFilterFunction(text)}
+        value={search}
+        underlineColorAndroid="transparent"
+        placeholder="Busca tu comuna"
+      />
       <FlatList
         data={filteredDataSource}
         style={{ flex: 1 }}
         renderItem={({ item }) => <TabComunaItem data={item} />}
         keyExtractor={(item, index) => index.toString()}
         ListHeaderComponent={() => (
           <View style={styles.header}>
-            <TextInput
-              style={styles.textInputStyle}
-              onChangeText={(text) => searchFilterFunction(text)}
-              value={search}
-              underlineColorAndroid="transparent"
-              placeholder="Busca tu comuna"
-            />
+            <Text style={styles.headerTitle}>
+              Las Ferias Libres funcionan de 7 de la mañana a 5 de la tarde.
+            </Text>
           </View>
         )}
         stickyHeaderIndices={[0]}

components/TabComunaItem.js

@@ -1,5 +1,6 @@
 import { View, Text, StyleSheet } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Link } from "expo-router";
 
 export default function ListaComunasItem({ data }) {
   return (
@@ -13,7 +14,12 @@ export default function ListaComunasItem({ data }) {
             style={[styles.icon]}
           />
           <View>
-            <Text style={styles.title}>{data.nombre}</Text>
+            <Link
+              href={{ pathname: "/comuna/[c]", params: { c: data.slug } }}
+              style={styles.title}
+            >
+              <Text style={styles.title}>{data.nombre}</Text>
+            </Link>
           </View>
         </View>
       </View>

components/TabHoy.js

@@ -1,13 +1,17 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import FeriaHoyItem from "./FeriaHoyItem";
-import { StyleSheet, View, FlatList, Text, Button } from "react-native";
+import { StyleSheet, View, FlatList, Text, TextInput } from "react-native";
 
 export default function TabHoy() {
   const [ferias, setFerias] = useState();
   const headers = {
     "User-Agent": "ferias-libres/1.3.1 components/TabHoy",
   };
+  const [search, setSearch] = useState("");
+  const [filteredDataSource, setFilteredDataSource] = useState([]);
+  const [masterDataSource, setMasterDataSource] = useState([]);
+
   useEffect(() => {
     const cancelToken = axios.CancelToken.source();
 
@@ -18,6 +22,8 @@ export default function TabHoy() {
       })
       .then((respuesta) => {
         setFerias(respuesta.data.datos);
+        setFilteredDataSource(respuesta.data.datos);
+        setMasterDataSource(respuesta.data.datos);
       })
       .catch((err) => {
         console.log(err);
@@ -27,10 +33,41 @@ export default function TabHoy() {
     };
   }, []);
 
+  const searchFilterFunction = (text) => {
+    // Check if searched text is not blank
+    if (text) {
+      // Inserted text is not blank
+      // Filter the masterDataSource and update FilteredDataSource
+      const newData = masterDataSource.filter(function (item) {
+        // Applying filter for the inserted text in search bar
+        const itemData = item.comuna_str
+          ? item.comuna_str.toLowerCase()
+          : "".toLowerCase();
+        const textData = text.toLowerCase();
+        return itemData.indexOf(textData) > -1;
+      });
+
+      setFilteredDataSource(newData);
+      setSearch(text);
+    } else {
+      // Inserted text is blank
+      // Update FilteredDataSource with masterDataSource
+      setFilteredDataSource(masterDataSource);
+      setSearch(text);
+    }
+  };
+
   return (
     <>
+      <TextInput
+        style={styles.textInputStyle}
+        onChangeText={(text) => searchFilterFunction(text)}
+        value={search}
+        underlineColorAndroid="transparent"
+        placeholder="Busca tu comuna"
+      />
       <FlatList
-        data={ferias}
+        data={filteredDataSource}
         style={{ flex: 1 }}
         renderItem={({ item }) => <FeriaHoyItem data={item} />}
         keyExtractor={(item, index) => index.toString()}
@@ -59,4 +96,9 @@ const styles = StyleSheet.create({
   headerTitle: {
     color: "#666",
   },
+  textInputStyle: {
+    borderWidth: 1,
+    paddingLeft: 20,
+    borderColor: "#009688",
+  },
 });