Merge pull request #6 from heitorgandolfi/feat/home-filter

Feat: add option to Filter trainnings in home page

App.tsx

@@ -1,3 +1,4 @@
+import Toast from "react-native-toast-message";
 import { ActivityIndicator, StatusBar } from "react-native";
 import { ThemeProvider } from "styled-components/native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
@@ -12,6 +13,7 @@ import {
 
 import { Routes } from "./src/routes";
 import { defaultTheme } from "./src/styles/themes/default";
+import { toastConfig } from "./src/shared/utils/toastConfigs";
 
 export default function App() {
   const [LoadFonts] = useFonts({
@@ -38,7 +40,9 @@ export default function App() {
     <>
       <GestureHandlerRootView style={{ flex: 1 }}>
         <ThemeProvider theme={defaultTheme}>{handleFontsLoading()}</ThemeProvider>
+        <Toast config={toastConfig} />
       </GestureHandlerRootView>
+
       <StatusBar backgroundColor="transparent" translucent />
     </>
   );

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@expo-google-fonts/roboto": "^0.2.3",
+    "@gorhom/bottom-sheet": "^4.6.0",
     "@hookform/resolvers": "^3.3.2",
     "@react-native-community/datetimepicker": "7.2.0",
     "@react-navigation/bottom-tabs": "^6.5.11",
@@ -26,10 +27,12 @@
     "react": "18.2.0",
     "react-hook-form": "^7.49.2",
     "react-native": "0.72.6",
-    "react-native-gesture-handler": "^2.14.0",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-paper": "^5.12.3",
     "react-native-reanimated": "~3.3.0",
-    "react-native-safe-area-context": "4.6.3",
+    "react-native-safe-area-context": "^4.6.3",
     "react-native-screens": "~3.22.0",
+    "react-native-toast-message": "^2.2.0",
     "styled-components": "^5.3.10",
     "yup": "^1.3.3"
   },

src/components/trainningCard/styles.ts

@@ -11,15 +11,15 @@ export const DeleteCardIconContainer = styled.View`
   right: 40px;
   top: 45%;
 `;
-export const TrainningCardContainer = styled(Animated.View)`
+export const TrainningCardContainer: any = styled(Animated.View)`
   gap: 14px;
   margin: 20px 16px 5px;
   padding: 16px;
 
   border: 1px solid transparent;
   border-radius: 16px;
 
-  elevation: 12;
+  elevation: 4;
   background-color: ${(props) => props.theme.primaryB};
 `;
 

src/data/Repositories/index.ts

@@ -1,5 +1,6 @@
-import { NewWorkoutFormFieldsProps } from "../../models/newWorkoutFormFieldsModel";
 import { dataBaseConnection } from "../dbConnection";
+import { formatDateForSQL } from "../../shared/utils/SqlDateFormatter";
+import { NewWorkoutFormFieldsProps } from "../../models/newWorkoutFormFieldsModel";
 
 const db = dataBaseConnection();
 
@@ -64,6 +65,37 @@ const getAllTrainningsFromDatabase = (): Promise<NewWorkoutFormFieldsProps[]> =>
   });
 };
 
+const getFilteredTrainnings = (days: any): Promise<NewWorkoutFormFieldsProps[]> => {
+  return new Promise((resolve, reject) => {
+    const numberOfDays = parseInt(days, 10);
+
+    if (isNaN(numberOfDays)) {
+      reject("Invalid number of days");
+      return;
+    }
+
+    db.transaction((tx) => {
+      const currentDate = new Date();
+      const startDate = new Date(currentDate.getTime() - (numberOfDays - 1) * 24 * 60 * 60 * 1000);
+
+      const formattedStartDate = formatDateForSQL(startDate);
+      const formattedCurrentDate = formatDateForSQL(currentDate);
+
+      tx.executeSql(
+        "SELECT *, substr(trainningDate, 7, 4) || '-' || substr(trainningDate, 4, 2) || '-' || substr(trainningDate, 1, 2) AS formattedTrainningDate FROM Trainning WHERE substr(trainningDate, 7, 4) || '/' || substr(trainningDate, 4, 2) || '/' || substr(trainningDate, 1, 2) BETWEEN ? AND ? ORDER BY trainningDate DESC",
+        [formattedStartDate, formattedCurrentDate],
+        (_, { rows }) => {
+          resolve(rows._array);
+        },
+        (_, error) => {
+          console.error("SQL Error:", error);
+          reject("Ops... Something went wrong! Try again later.");
+          return false;
+        },
+      );
+    });
+  });
+};
 
 const deleteTrainningFromDatabase = (id: number) => {
   return new Promise((resolve, reject) => {
@@ -104,6 +136,7 @@ const dropTrainningTable = () => {
 export const TrainningRepository = {
   addTrainningToDatabase,
   getAllTrainningsFromDatabase,
+  getFilteredTrainnings,
   deleteTrainningFromDatabase,
   dropTrainningTable,
 };

src/screens/home/components/bottomSheetFilter/filterHeader/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { TouchableOpacity, View } from "react-native";
+
+import {
+  BottomSheetFilterHeader,
+  BottomSheetFilterIconContainer,
+  BottomSheetFilterIcon,
+  BottomSheetFilterIconText,
+  BottomSheetFilterClearAllButton,
+  BottomSheetFilterClearAllText,
+} from "./styles";
+
+interface FilterHeaderProps {
+  handleCloseBottomSheet: () => void;
+  handleClearAllFilters: () => void;
+}
+
+export const FilterHeader = ({
+  handleCloseBottomSheet,
+  handleClearAllFilters,
+}: FilterHeaderProps) => {
+  return (
+    <BottomSheetFilterHeader>
+      <View>
+        <BottomSheetFilterIconContainer>
+          <BottomSheetFilterIcon name="filter-outline" />
+          <BottomSheetFilterIconText>Filter</BottomSheetFilterIconText>
+        </BottomSheetFilterIconContainer>
+
+        <BottomSheetFilterClearAllButton onPress={handleClearAllFilters} activeOpacity={0.9}>
+          <BottomSheetFilterClearAllText>Clear All</BottomSheetFilterClearAllText>
+        </BottomSheetFilterClearAllButton>
+      </View>
+
+      <TouchableOpacity onPress={handleCloseBottomSheet} activeOpacity={0.9}>
+        <BottomSheetFilterIcon name="close" />
+      </TouchableOpacity>
+    </BottomSheetFilterHeader>
+  );
+};