diff --git a/queries/historyQueries.js b/queries/historyQueries.js index fc0b4f3..08f91d0 100644 --- a/queries/historyQueries.js +++ b/queries/historyQueries.js @@ -3,24 +3,21 @@ import { db } from "../utils/db"; import { executeQuery } from "./tableSetup"; const fetchLogsData = async () => { - const result = await AsyncStorage.getItem("userData"); - return JSON.parse(result); + const result = await AsyncStorage.getItem("userData"); + return JSON.parse(result); }; -const graphData = async () => { - const result = executeQuery( - "SELECT * FROM data ORDER BY substr (date,5,7) || substr(date,9,10) || substr(date,12,15) DESC limit 15", - [] - ); - return result; -}; +// const graphData = async () => { +// const result = executeQuery( +// "SELECT * FROM data ORDER BY substr (date,5,7) || substr(date,9,10) || substr(date,12,15) DESC limit 15", +// [] +// ); +// return result; +// }; -const graphData2 = async () => { - const result = executeQuery( - "SELECT * FROM data ORDER BY substr (date,5,7) || substr(date,9,10) || substr(date,12,15) DESC limit 5", - [] - ); - return result; +const graphData = async () => { + const result = await AsyncStorage.getItem("userData"); + return JSON.parse(result); }; -export { fetchLogsData, graphData, graphData2 }; +export { fetchLogsData, graphData }; diff --git a/queries/tableSetup.js b/queries/tableSetup.js index ee90ec5..29a0304 100644 --- a/queries/tableSetup.js +++ b/queries/tableSetup.js @@ -2,108 +2,115 @@ import AsyncStorage from "@react-native-async-storage/async-storage"; import { db } from "../utils/db"; const dbSetup = () => { - db.transaction((tx) => { - tx.executeSql( - "CREATE TABLE IF NOT EXISTS data (id INTEGER PRIMARY KEY AUTOINCREMENT, date TEXT, intake INTEGER, goal INTEGER);" - ); - }); + db.transaction((tx) => { + tx.executeSql( + "CREATE TABLE IF NOT EXISTS data (id INTEGER PRIMARY KEY AUTOINCREMENT, date TEXT, intake INTEGER, goal INTEGER);" + ); + }); }; const createTodayRow = async () => { - let date = new Date(); - date.setHours(0, 0, 0, 0); - date = date.toString(); - const data = await AsyncStorage.getItem("userData"); - if (data === null) { - await AsyncStorage.setItem( - "userData", - JSON.stringify([ - { - date: date, - intake: 0, - goal: 0, - }, - ]) - ); - } else { - const parsedData = JSON.parse(data); - if (parsedData[parsedData.length - 1].date !== date) { - parsedData.push({ - date: date, - intake: 0, - goal: 0, - }); - await AsyncStorage.setItem("userData", JSON.stringify(parsedData)); - console.log("createTodayRow"); - } + let date = new Date(); + date.setHours(0, 0, 0, 0); + date = date.toString(); + const data = await AsyncStorage.getItem("userData"); + if (data === null) { + await AsyncStorage.setItem( + "userData", + JSON.stringify([ + { + date: date, + intake: 0, + goal: 0, + }, + ]) + ); + } else { + const parsedData = JSON.parse(data); + if (parsedData[parsedData.length - 1].date !== date) { + parsedData.push({ + date: date, + intake: 0, + goal: 0, + }); + await AsyncStorage.setItem("userData", JSON.stringify(parsedData)); + console.log("createTodayRow"); } + } - await db.transaction((tx) => { - tx.executeSql( - "SELECT * FROM data ORDER BY id DESC LIMIT 1", - [date, "0"], - (_, { rows }) => { - if (rows.length === 0 || rows._array[0].date !== date) { - db.transaction((tx) => { - tx.executeSql( - "INSERT INTO data (date, intake, goal) VALUES (?, ?, ?)", - [date, 0, 0] - ); - }); - } - } - ); - }); + await db.transaction((tx) => { + tx.executeSql( + "SELECT * FROM data ORDER BY id DESC LIMIT 1", + [date, "0"], + (_, { rows }) => { + if (rows.length === 0 || rows._array[0].date !== date) { + db.transaction((tx) => { + tx.executeSql( + "INSERT INTO data (date, intake, goal) VALUES (?, ?, ?)", + [date, 0, 0] + ); + }); + } + } + ); + }); }; const testQuery = async () => { - await db.transaction((tx) => { - testQuery2(); - tx.executeSql("SELECT * FROM data", [], (_, { rows }) => { - for (let i = 0; i < rows.length; i++) {} - }); + await db.transaction((tx) => { + testQuery2(); + tx.executeSql("SELECT * FROM data", [], (_, { rows }) => { + for (let i = 0; i < rows.length; i++) {} }); + }); }; const testQuery2 = async () => { - await db.transaction((tx) => { - tx.executeSql("SELECT * FROM data", [], (_, { rows }) => {}); - }); + await db.transaction((tx) => { + tx.executeSql("SELECT * FROM data", [], (_, { rows }) => {}); + }); }; //clear history logs, by dropping table +// old code +// const dropTable = async () => { +// await db.transaction((tx) => { +// tx.executeSql("Drop Table IF EXISTS Data"); +// //after dropping create a table +// dbSetup(); +// //create a row +// createTodayRow(); +// }); +// }; + const dropTable = async () => { - await db.transaction((tx) => { - tx.executeSql("Drop Table IF EXISTS Data"); - //after dropping create a table - dbSetup(); - //create a row - createTodayRow(); - }); + AsyncStorage.setItem("userData", ""); + dbSetup(); + createTodayRow(); }; const executeQuery = (sql, params) => { - return new Promise((resolve, reject) => { - db.transaction((tx) => { - tx.executeSql( - sql, - params, - (_, { rows }) => { - resolve(rows._array); - }, - (_, error) => { - reject(error); - } - ); - }); + return new Promise((resolve, reject) => { + db.transaction((tx) => { + tx.executeSql( + sql, + params, + (_, { rows }) => { + resolve(rows._array); + }, + (_, error) => { + reject(error); + } + ); }); + }); }; export { - dbSetup, - createTodayRow, - testQuery, - testQuery2, - executeQuery, - dropTable, + dbSetup, + createTodayRow, + testQuery, + testQuery2, + executeQuery, + dropTable, }; diff --git a/screens/History/Logs/logs.js b/screens/History/Logs/logs.js index 3890a7d..cbfa95c 100644 --- a/screens/History/Logs/logs.js +++ b/screens/History/Logs/logs.js @@ -5,15 +5,15 @@ import React from "react"; import { SafeAreaView, View } from "react-native"; import styles from "./styles"; import { - Divider, - Stack, - Heading, - VStack, - HStack, - ScrollView, - Center, - Box, - Progress, + Divider, + Stack, + Heading, + VStack, + HStack, + ScrollView, + Center, + Box, + Progress, } from "native-base"; import { useIsFocused } from "@react-navigation/native"; import { fetchLogsData } from "../../../queries/historyQueries"; @@ -23,86 +23,83 @@ import { createTodayRow } from "../../../queries/tableSetup"; import AppContext from "../../../Context/AppContext"; function Logs() { - const [logs, setLogs] = React.useState([]); - const [goal, setGoal] = React.useState(0); - const { - appState, - renderValue, - unit, - alternateTextColor, - textColor, - mainBgColor, - } = React.useContext(AppContext); - const isFocused = useIsFocused(); + const [logs, setLogs] = React.useState([]); + const [goal, setGoal] = React.useState(0); + const { + appState, + renderValue, + unit, + alternateTextColor, + textColor, + mainBgColor, + } = React.useContext(AppContext); + const isFocused = useIsFocused(); - React.useEffect( - () => { - createTodayRow(); - if (isFocused) { - async function fetchLogs() { - const data = await fetchLogsData(); - setLogs(data); - } - async function fetchGoal() { - const data = await getGoal(); - setGoal(data); - } + React.useEffect( + () => { + createTodayRow(); + if (isFocused) { + async function fetchLogs() { + const data = await fetchLogsData(); + setLogs(data); + } + async function fetchGoal() { + const data = await getGoal(); + setGoal(data); + } - fetchLogs(); - fetchGoal(); - } - }, - [isFocused], - appState - ); + fetchLogs(); + fetchGoal(); + } + }, + [isFocused], + appState + ); - return ( - - {logs.map((item, key) => ( - - -
- - {item.date.split(" ")[1]}{" "} - - {" "} - {item.date.split(" ")[2]}{" "} - - - {item.date.split(" ")[3]}{" "} - - -
-
- - - -
-
- - - {renderValue(item.intake)} - - /{renderValue(goal)} {unit} - -
- - - ))} - - ); + return ( + + {logs?.map( + (item, key) => + key < 15 && ( + + +
+ + {item.date.split(" ")[1]}{" "} + + {" "} + {item.date.split(" ")[2]}{" "} + + {item.date.split(" ")[3]} + +
+
+ + + +
+
+ + {renderValue(item.intake)}/ + {renderValue(goal)} {unit} + +
+ + + ) + )} + + ); } export default Logs; diff --git a/screens/History/Visual/visual.js b/screens/History/Visual/visual.js index 4c2af23..4daf507 100644 --- a/screens/History/Visual/visual.js +++ b/screens/History/Visual/visual.js @@ -6,183 +6,155 @@ import { SafeAreaView, View } from "react-native"; import styles from "./styles"; import { useEffect } from "react"; import { - Divider, - Stack, - Heading, - VStack, - HStack, - ScrollView, - Center, - Box, - Progress, + Divider, + Stack, + Heading, + VStack, + HStack, + ScrollView, + Center, + Box, + Progress, } from "native-base"; import { useIsFocused } from "@react-navigation/native"; -import { - fetchLogsData, - graphData, - graphData2, -} from "../../../queries/historyQueries"; +import { fetchLogsData, graphData } from "../../../queries/historyQueries"; import Moment from "moment"; import { getGoal } from "../../../utils/asyncStorage"; import { createTodayRow } from "../../../queries/tableSetup"; import AppContext from "../../../Context/AppContext"; -import { - LineChart, - BarChart, - PieChart, - ProgressChart, - ContributionGraph, - StackedBarChart, -} from "react-native-chart-kit"; +import { LineChart, BarChart } from "react-native-chart-kit"; import { Dimensions } from "react-native"; function Visual() { - const screenWidth = Dimensions.get("window").width; - const chartConfig = { - backgroundGradientFrom: "#164e63", - backgroundGradientFromOpacity: 1, - backgroundGradientTo: "#164e63", - backgroundGradientToOpacity: 1, - color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`, - strokeWidth: 2, // optional, default 3 - barPercentage: 0.5, - useShadowColorFromDataset: false, // optional - propsForLabels: { - fontSize: 8, - }, - }; - const chartConfig2 = { - backgroundGradientFrom: "#164e63", - backgroundGradientFromOpacity: 1, - backgroundGradientTo: "#164e63", - backgroundGradientToOpacity: 1, - color: (opacity = 1) => `rgba(240, 249, 255, ${opacity})`, - strokeWidth: 2, // optional, default 3 - barPercentage: 0.5, - useShadowColorFromDataset: false, // optional - propsForLabels: { - fontSize: 8, - }, - }; - const [logs, setLogs] = React.useState([]); - const [logs5days, setLogs5days] = React.useState([]); - const [goal, setGoal] = React.useState(0); - const { appState, renderValue, unit, textColor, mainBgColor } = - React.useContext(AppContext); - const isFocused = useIsFocused(); - - useEffect( - () => { - async function fetchLogs() { - const data = await graphData(); - setLogs(data); - } - async function fetchGoal() { - const data = await getGoal(); - setGoal(data); - } - - async function fetchLogs5days() { - const data = await graphData2(); - console.log(data); - setLogs5days(data); - } - - fetchGoal(); - fetchLogs(); - fetchLogs5days(); - }, - [isFocused], - appState - ); + const screenWidth = Dimensions.get("window").width; + const chartConfig = { + backgroundGradientFrom: "#164e63", + backgroundGradientFromOpacity: 1, + backgroundGradientTo: "#164e63", + backgroundGradientToOpacity: 1, + color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`, + strokeWidth: 2, // optional, default 3 + barPercentage: 0.5, + useShadowColorFromDataset: false, // optional + propsForLabels: { + fontSize: 8, + }, + }; + const chartConfig2 = { + backgroundGradientFrom: "#164e63", + backgroundGradientFromOpacity: 1, + backgroundGradientTo: "#164e63", + backgroundGradientToOpacity: 1, + color: (opacity = 1) => `rgba(240, 249, 255, ${opacity})`, + strokeWidth: 2, // optional, default 3 + barPercentage: 0.5, + useShadowColorFromDataset: false, // optional + propsForLabels: { + fontSize: 8, + }, + }; + const [logs, setLogs] = React.useState([]); + const [goal, setGoal] = React.useState(0); + const { appState, renderValue, unit, textColor, mainBgColor } = + React.useContext(AppContext); + const isFocused = useIsFocused(); - const data = { - labels: logs.map( - (item, key) => item.date.split(" ")[1] + item.date.split(" ")[2] - ), - datasets: [ - { - data: logs.map((item, key) => item.intake), - color: (opacity = 1) => `rgba(103, 232, 249, ${opacity})`, // optional - strokeWidth: 2, // optional - }, - ], - }; + useEffect( + () => { + async function fetchLogs() { + const data = await graphData(); + setLogs(data); + } + async function fetchGoal() { + const data = await getGoal(); + setGoal(data); + } + fetchGoal(); + fetchLogs(); + }, + [isFocused], + appState + ); - const data2 = { - labels: logs5days.map( - (item) => item.date.split(" ")[1] + item.date.split(" ")[2] - ), // optional - datasets: [{ data: logs5days.map((item) => item.intake) }], - }; + const data = { + labels: logs + .slice(0, 15) + .map((item, key) => item.date.split(" ")[1] + item.date.split(" ")[2]), + datasets: [ + { + data: logs.slice(0, 15).map((item, key) => item.intake), + color: (opacity = 1) => `rgba(103, 232, 249, ${opacity})`, // optional + strokeWidth: 2, // optional + }, + ], + }; - function graph15Days() { - return ( -
- -
- ); - } + const data2 = { + labels: logs + .slice(0, 5) + .map((item, key) => item.date.split(" ")[1] + item.date.split(" ")[2]), // optional + datasets: [{ data: logs.slice(0, 5).map((item, key) => item.intake) }], + }; - function graph5Days() { - return ( -
- -
- ); - } + function graph15Days() { + return ( +
+ +
+ ); + } + function graph5Days() { return ( - - - 5 Days water intake logs - - {data2.labels.length > 0 ? ( - graph5Days() - ) : ( - No record to show - )} +
+ +
+ ); + } - - 15 Days water intake logs - + return ( + + + 5 Days water intake logs + + {data2.labels.length > 0 ? graph5Days() : No record to show} - {data.labels.length > 0 ? ( - graph15Days() - ) : ( - No record to show - )} - - ); + + 15 Days water intake logs + + + {data.labels.length > 0 ? graph15Days() : No record to show} + + ); } export default Visual;