From d9c4af775a4f4310f478c16d6275fe421fb7dc6d Mon Sep 17 00:00:00 2001 From: Rica2021 Date: Thu, 11 Jul 2024 21:21:38 -0400 Subject: [PATCH] Original UI Design started --- api/curl/index.graphql | 33 ---- api/index.graphql | 8 +- api/workouts/index.graphql | 31 +++ package-lock.json | 91 ++++++++- package.json | 4 + src/app/(tabs)/_layout.jsx | 28 ++- src/app/(tabs)/index.js | 3 - src/app/(tabs)/workouts.jsx | 316 +++++++++++++++++++------------ src/components/DashboardInfo.jsx | 3 + src/{app/(tabs) => }/getDate.jsx | 0 10 files changed, 348 insertions(+), 169 deletions(-) delete mode 100644 api/curl/index.graphql create mode 100644 api/workouts/index.graphql rename src/{app/(tabs) => }/getDate.jsx (100%) diff --git a/api/curl/index.graphql b/api/curl/index.graphql deleted file mode 100644 index 53e6f2c..0000000 --- a/api/curl/index.graphql +++ /dev/null @@ -1,33 +0,0 @@ -type DocumentsEntry { - _id: String - exercise: String - reps: Int - weight: Int -} - -type Root { - documents: [DocumentsEntry] -} - -type Query { - sets: Root - @rest( - method: POST - endpoint: "https://us-east-1.aws.data.mongodb-api.com/app/data-wixvufj/endpoint/data/v1/action/find" - headers: [ - { name: "access-control-request-headers", value: "*" } - { - name: "api-key" - value: "W4LK2YC39eB6kln9WuSlwUKXTgx1yDSnZcd2jtkLVcO9OdiUAJtdPJFVPcJqLhtD" - } - ], - postbody: """ - { - "collection": "Sets", - "dataSource": "Cluster0", - "database": "Workouts" - } - """ - - ) -} diff --git a/api/index.graphql b/api/index.graphql index b70e2b1..0d4d8f3 100644 --- a/api/index.graphql +++ b/api/index.graphql @@ -1,3 +1,9 @@ -schema @sdl(files: ["exercises/index.graphql", "curl/index.graphql"]) { +schema + @sdl( + files: [ + "exercises/index.graphql" + "workouts/index.graphql" + ] + ) { query: Query } diff --git a/api/workouts/index.graphql b/api/workouts/index.graphql new file mode 100644 index 0000000..134b169 --- /dev/null +++ b/api/workouts/index.graphql @@ -0,0 +1,31 @@ +type UserWorkouts { + _id: String + workout_name: String + times_completed: Int + tonnage: Int + weekdays_scheduled: [String] + exercises: JSON +} + +type Root { + documents: [UserWorkouts] +} + +type Query { + workouts: Root + @rest( + method: POST + endpoint: "https://us-east-1.aws.data.mongodb-api.com/app/data-wixvufj/endpoint/data/v1/action/find" + headers: [ + { name: "access-control-request-headers", value: "*" }, + { name: "api-key", value: "2oM8HXmfdTkHpy9n3MXWimJ273KWTNrNCYEdW0GYhpJNdKmLOCQRfgi6ln37R2Fb" } + ], + postbody: """ + { + "collection": "workouts", + "dataSource": "Cluster0", + "database": "workoutApp" + } + """ + ) +} diff --git a/package-lock.json b/package-lock.json index 7a3fdf2..a54f669 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "workoutapp", "version": "1.0.0", "dependencies": { + "@react-navigation/bottom-tabs": "^6.6.0", + "@react-navigation/native": "^6.1.17", "@tanstack/react-query": "^5.49.2", "expo": "~51.0.17", "expo-constants": "~16.0.2", @@ -21,6 +23,8 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.74.2", + "react-native-gesture-handler": "^2.17.1", + "react-native-reanimated": "^3.14.0", "react-native-safe-area-context": "4.10.1", "react-native-screens": "3.31.1", "react-native-web": "~0.19.10" @@ -1513,7 +1517,6 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.7.tgz", "integrity": "sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==", "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.24.7", "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3" @@ -1599,7 +1602,6 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.7.tgz", "integrity": "sha512-tK+0N9yd4j+x/4hxF3F0e0fu/VdcxU18y5SevtyM/PCFlQvXbR0Zmlo2eBrKtVipGNFzpq56o8WsIIKcJFUCRQ==", "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.24.7", "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7", @@ -1876,7 +1878,6 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.7.tgz", "integrity": "sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.24.7" }, @@ -2240,6 +2241,17 @@ "node": ">=6.9.0" } }, + "node_modules/@egjs/hammerjs": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", + "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==", + "dependencies": { + "@types/hammerjs": "^2.0.36" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/@expo/bunyan": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz", @@ -6277,10 +6289,9 @@ } }, "node_modules/@react-navigation/bottom-tabs": { - "version": "6.5.20", - "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.20.tgz", - "integrity": "sha512-ow6Z06iS4VqBO8d7FP+HsGjJLWt2xTWIvuWjpoCvsM/uQXzCRDIjBv9HaKcXbF0yTW7IMir0oDAbU5PFzEDdgA==", - "license": "MIT", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.6.0.tgz", + "integrity": "sha512-IuKp1nUk4VLI3pNMvEczLROWfrYsPQIDyi+wtpHnm0pD+UbNtarH3crl76UrB/ALZho+5rKJZ8JNr+QfVTiUzg==", "dependencies": { "@react-navigation/elements": "^1.3.30", "color": "^4.2.3", @@ -6339,7 +6350,6 @@ "version": "6.1.17", "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.17.tgz", "integrity": "sha512-mer3OvfwWOHoUSMJyLa4vnBH3zpFmCwuzrBPlw7feXklurr/ZDiLjLxUScOot6jLRMz/67GyilEYMmP99LL0RQ==", - "license": "MIT", "dependencies": { "@react-navigation/core": "^6.4.16", "escape-string-regexp": "^4.0.0", @@ -6647,6 +6657,11 @@ "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", "license": "MIT" }, + "node_modules/@types/hammerjs": { + "version": "2.0.45", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.45.tgz", + "integrity": "sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ==" + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz", @@ -9093,6 +9108,23 @@ } } }, + "node_modules/expo-router/node_modules/@react-navigation/bottom-tabs": { + "version": "6.5.20", + "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.20.tgz", + "integrity": "sha512-ow6Z06iS4VqBO8d7FP+HsGjJLWt2xTWIvuWjpoCvsM/uQXzCRDIjBv9HaKcXbF0yTW7IMir0oDAbU5PFzEDdgA==", + "dependencies": { + "@react-navigation/elements": "^1.3.30", + "color": "^4.2.3", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, "node_modules/expo-splash-screen": { "version": "0.27.5", "resolved": "https://registry.npmjs.org/expo-splash-screen/-/expo-splash-screen-0.27.5.tgz", @@ -9803,6 +9835,14 @@ "node": ">=8" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/hosted-git-info": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz", @@ -13944,6 +13984,21 @@ } } }, + "node_modules/react-native-gesture-handler": { + "version": "2.17.1", + "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.17.1.tgz", + "integrity": "sha512-pWfniN6NuVKUq40KACuD3NCMe+bWNQCpD3cmxL6aLSCTwPKYmf7l4Lp0/E/almpjvxhybJZtFLU0w4tmxnIKaA==", + "dependencies": { + "@egjs/hammerjs": "^2.0.17", + "hoist-non-react-statics": "^3.3.0", + "invariant": "^2.2.4", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-helmet-async": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/react-native-helmet-async/-/react-native-helmet-async-2.0.4.tgz", @@ -13958,6 +14013,26 @@ "react": "^16.6.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-native-reanimated": { + "version": "3.14.0", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.14.0.tgz", + "integrity": "sha512-TAxLtCfRyC/nOLeWoX/8MhdIF+Fi1e1NbLhIgEm5Kv9/gioAwSNaqLUYxjIClU1RaLwSTE8iaiHNVhTU4TS9DA==", + "dependencies": { + "@babel/plugin-transform-arrow-functions": "^7.0.0-0", + "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", + "@babel/plugin-transform-optional-chaining": "^7.0.0-0", + "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", + "@babel/plugin-transform-template-literals": "^7.0.0-0", + "@babel/preset-typescript": "^7.16.7", + "convert-source-map": "^2.0.0", + "invariant": "^2.2.4" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0", + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-safe-area-context": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.10.1.tgz", diff --git a/package.json b/package.json index 2e54ff8..07d09b2 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ "web": "expo start --web" }, "dependencies": { + "@react-navigation/bottom-tabs": "^6.6.0", + "@react-navigation/native": "^6.1.17", "@tanstack/react-query": "^5.49.2", "expo": "~51.0.17", "expo-constants": "~16.0.2", @@ -22,6 +24,8 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.74.2", + "react-native-gesture-handler": "^2.17.1", + "react-native-reanimated": "^3.14.0", "react-native-safe-area-context": "4.10.1", "react-native-screens": "3.31.1", "react-native-web": "~0.19.10" diff --git a/src/app/(tabs)/_layout.jsx b/src/app/(tabs)/_layout.jsx index 4aeaabf..4873114 100644 --- a/src/app/(tabs)/_layout.jsx +++ b/src/app/(tabs)/_layout.jsx @@ -1,12 +1,30 @@ -import { FontAwesome6 } from '@expo/vector-icons'; -import { FontAwesome5 } from '@expo/vector-icons'; -import { Octicons } from '@expo/vector-icons'; -import { FontAwesome } from '@expo/vector-icons'; +import { FontAwesome6 } from "@expo/vector-icons"; +import { FontAwesome5 } from "@expo/vector-icons"; +import { Octicons } from "@expo/vector-icons"; +import { FontAwesome } from "@expo/vector-icons"; import { Tabs } from "expo-router"; + export default function TabLayout() { return ( - + {/* - - - ; } diff --git a/src/app/(tabs)/workouts.jsx b/src/app/(tabs)/workouts.jsx index 9d42e30..9d18e95 100644 --- a/src/app/(tabs)/workouts.jsx +++ b/src/app/(tabs)/workouts.jsx @@ -1,144 +1,222 @@ -import { StyleSheet, Text, View, Pressable, ScrollView } from "react-native"; -import ExerciseListItem from "../../components/ExerciseListItem"; -import { useQuery } from "@tanstack/react-query"; -import { gql } from "graphql-request"; -import client from "../../graphqlClient"; -import { LinearGradient } from "expo-linear-gradient"; -import { useState } from "react"; -import DashboardInfo from "../../components/DashboardInfo"; -import { getDate } from "./getDate"; +import React from 'react'; +import { View, Text, StyleSheet, SafeAreaView, TouchableOpacity, ScrollView, Dimensions } from 'react-native'; +import { MaterialCommunityIcons } from '@expo/vector-icons'; +import { Ionicons } from '@expo/vector-icons'; -const exercisesQuery = gql` - query MyQuery($muscle: String, $name: String) { - exercises(name: $name, muscle: $muscle) { - muscle - name - equipment - } - } -`; - -export default function workouts() { - const [currentDate, setCurrentDate] = useState(getDate()); +const { height, width } = Dimensions.get('window'); +const workouts = () => { return ( - - {/* Title */} - Dashbord - - - - {/* User Workouts */} - - {/* User Workouts Title + Show All */} - - - MY WORKOUTS - - - Show All - + + + + Fitness Dashboard + + + + + + + + + 25 + Workouts + + + + 70 kg + Current Weight + - {/* Workouts Container */} - - - - - Back & Shoulders - - {currentDate} + + Previous Workout + + + 22 + May - - - - - 7 - - times completed - - - - - START - - + + Quads & Deltoids + 7 exercises completed - + + + View Details + + + + + + Next Workout + Upper Body + Tomorrow, 9:00 AM + + Start Workout + - - + + + + Add New Workout + + + + + ); -} +}; const styles = StyleSheet.create({ container: { flex: 1, - marginTop: 64, + backgroundColor: '#1E1E1E', }, - title: { - fontSize: 35, - fontWeight: "bold", + scrollContent: { + minHeight: height - 80, + paddingBottom: 20, + }, + header: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + paddingHorizontal: 20, + paddingTop: 20, + paddingBottom: 10, + }, + headerTitle: { + fontSize: 24, + fontWeight: 'bold', + color: '#FFFFFF', + }, + notificationIcon: { + padding: 5, + }, + statsContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + marginVertical: 20, + paddingHorizontal: 20, + }, + statCard: { + backgroundColor: '#2A2A2A', + borderRadius: 15, + padding: 15, + alignItems: 'center', + width: '48%', + }, + statValue: { + fontSize: 24, + fontWeight: 'bold', + color: '#FFFFFF', + marginTop: 10, + }, + statLabel: { + fontSize: 14, + color: '#CCCCCC', + marginTop: 5, + }, + previousWorkoutCard: { + backgroundColor: '#2A2A2A', + borderRadius: 15, padding: 20, + marginHorizontal: 20, + marginBottom: 20, }, - - workouts: { + cardTitle: { + fontSize: 18, + fontWeight: 'bold', + color: '#FFFFFF', + marginBottom: 15, + }, + previousWorkoutContent: { + flexDirection: 'row', + alignItems: 'center', + }, + dateBox: { + backgroundColor: '#FFD700', + borderRadius: 10, padding: 10, + alignItems: 'center', + marginRight: 15, + }, + dateNumber: { + color: '#1E1E1E', + fontSize: 18, + fontWeight: 'bold', }, - cardContainer: { - shadowColor: "#000", - shadowOffset: { - width: 0, - height: 4, - }, - shadowOpacity: 0.32, - shadowRadius: 5.46, - elevation: 9, - }, - card: { - marginHorizontal: 10, + dateMonth: { + color: '#1E1E1E', + fontSize: 14, + }, + workoutInfo: { flex: 1, - borderRadius: 2, - padding: 25, }, - button: { - alignItems: "center", - justifyContent: "center", + workoutInfoTitle: { + fontSize: 16, + fontWeight: 'bold', + color: '#FFFFFF', + }, + workoutInfoDetails: { + fontSize: 14, + color: '#CCCCCC', + marginTop: 5, + }, + detailsButton: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + marginTop: 15, + }, + detailsButtonText: { + color: '#FFD700', + marginRight: 5, + }, + upcomingWorkoutCard: { + backgroundColor: '#2A2A2A', + borderRadius: 15, + padding: 20, + marginHorizontal: 20, + marginBottom: 20, + }, + upcomingWorkoutTitle: { + fontSize: 20, + fontWeight: 'bold', + color: '#FFFFFF', + marginBottom: 5, + }, + upcomingWorkoutDate: { + fontSize: 14, + color: '#CCCCCC', + marginBottom: 15, + }, + startButton: { + backgroundColor: '#FFD700', + borderRadius: 25, paddingVertical: 12, - paddingHorizontal: 32, - borderRadius: 4, - elevation: 3, - backgroundColor: "black", + alignItems: 'center', }, - text2: { + startButtonText: { + color: '#1E1E1E', fontSize: 16, - lineHeight: 21, - fontWeight: "bold", - letterSpacing: 0.25, - color: "white", + fontWeight: 'bold', }, + addWorkoutButton: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#FFD700', + borderRadius: 25, + paddingVertical: 12, + marginHorizontal: 20, + }, + addWorkoutButtonText: { + color: '#1E1E1E', + fontSize: 16, + fontWeight: 'bold', + marginLeft: 10, + }, + }); + +export default workouts; \ No newline at end of file diff --git a/src/components/DashboardInfo.jsx b/src/components/DashboardInfo.jsx index ab7d32c..b9f50df 100644 --- a/src/components/DashboardInfo.jsx +++ b/src/components/DashboardInfo.jsx @@ -2,6 +2,9 @@ import { View, Text } from "react-native"; import React from "react"; import { Pressable, StyleSheet } from "react-native"; import { AntDesign } from "@expo/vector-icons"; +import { gql } from "graphql-request"; + +// const dashboardQuery = gql const DashboardInfo = () => { return ( diff --git a/src/app/(tabs)/getDate.jsx b/src/getDate.jsx similarity index 100% rename from src/app/(tabs)/getDate.jsx rename to src/getDate.jsx