From 0ba2cbd65d8f021fa95c47376dd49211b024cad7 Mon Sep 17 00:00:00 2001
From: ivic00 <102467664+ivic00@users.noreply.github.com>
Date: Mon, 18 Nov 2024 01:43:09 +0100
Subject: [PATCH] fixed calendar after tablet merge
---
app/(auth)/_layout.tsx | 527 +++++++++---------
app/(auth)/calendar/index.tsx | 4 +-
app/(unauth)/index.tsx | 6 +-
.../tablet_components/TabletContainer.tsx | 1 +
components/pages/settings/UserSettings.tsx | 242 ++++----
5 files changed, 402 insertions(+), 378 deletions(-)
diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
index 7faff1d..27fa348 100644
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@@ -1,9 +1,9 @@
import React, { useEffect } from "react";
-import {Drawer} from "expo-router/drawer";
-import {useSignOut} from "@/hooks/firebase/useSignOut";
-import {DrawerContentScrollView,} from "@react-navigation/drawer";
-import {Button, ButtonSize, Text, View} from "react-native-ui-lib";
-import {ImageBackground, StyleSheet} from "react-native";
+import { Drawer } from "expo-router/drawer";
+import { useSignOut } from "@/hooks/firebase/useSignOut";
+import { DrawerContentScrollView } from "@react-navigation/drawer";
+import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
+import { ImageBackground, StyleSheet } from "react-native";
import DrawerButton from "@/components/shared/DrawerButton";
import NavGroceryIcon from "@/assets/svgs/NavGroceryIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
@@ -11,107 +11,114 @@ import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch";
-import {MaterialIcons} from "@expo/vector-icons";
-import {useSetAtom} from "jotai";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useSetAtom } from "jotai";
import {
- isFamilyViewAtom,
- settingsPageIndex,
- toDosPageIndex,
- userSettingsView,
+ isFamilyViewAtom,
+ settingsPageIndex,
+ toDosPageIndex,
+ userSettingsView,
} from "@/components/pages/calendar/atoms";
import Ionicons from "@expo/vector-icons/Ionicons";
-import Constants from "expo-constants";
import * as Device from "expo-device";
import { DeviceType } from "expo-device";
+import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
export default function TabLayout() {
- const {mutateAsync: signOut} = useSignOut();
- const setIsFamilyView = useSetAtom(isFamilyViewAtom);
- const setPageIndex = useSetAtom(settingsPageIndex);
- const setUserView = useSetAtom(userSettingsView);
- const setToDosIndex = useSetAtom(toDosPageIndex);
+ const { mutateAsync: signOut } = useSignOut();
+ const setIsFamilyView = useSetAtom(isFamilyViewAtom);
+ const setPageIndex = useSetAtom(settingsPageIndex);
+ const setUserView = useSetAtom(userSettingsView);
+ const setToDosIndex = useSetAtom(toDosPageIndex);
- return (
- ({
- headerShown: true,
- headerRight: () =>
- Device.deviceType === DeviceType.TABLET ? (
-
- ) : (
- <>
- ),
+ return (
+ ({
+ headerShown: true,
+ headerRight: () => {
+ // Only show ViewSwitch on calendar and todos pages
+ const showViewSwitch = ["calendar", "todos", "index"].includes(
+ route.name
+ );
+ return Device.deviceType === DeviceType.TABLET && showViewSwitch ? (
+
+
+
+ ) : null;
+ },
+ headerStyle: { height: Device.deviceType === DeviceType.TABLET ? 100 : undefined},
drawerStyle: {
- width: "90%",
- backgroundColor: "#f9f8f7",
- height: "100%",
- },
- })}
- drawerContent={(props) => {
- return (
-
-
-
- Welcome to Cally
-
-
-
- {
- props.navigation.navigate("calendar");
- setPageIndex(0);
- setToDosIndex(0);
- setUserView(true);
- setIsFamilyView(false);
- }}
- icon={}
- />
- {
- props.navigation.navigate("grocery");
- setPageIndex(0);
- setToDosIndex(0);
- setUserView(true);
- setIsFamilyView(false);
- }}
- icon={}/>
- {
- props.navigation.navigate("feedback");
- setPageIndex(0);
- setToDosIndex(0);
- setUserView(true);
- setIsFamilyView(false);
- }}
- icon={}
- />
-
-
- {/* {
+ return (
+
+
+
+ Welcome to Cally
+
+
+
+ {
+ props.navigation.navigate("calendar");
+ setPageIndex(0);
+ setToDosIndex(0);
+ setUserView(true);
+ setIsFamilyView(false);
+ }}
+ icon={}
+ />
+ {
+ props.navigation.navigate("grocery");
+ setPageIndex(0);
+ setToDosIndex(0);
+ setUserView(true);
+ setIsFamilyView(false);
+ }}
+ icon={}
+ />
+ {
+ props.navigation.navigate("feedback");
+ setPageIndex(0);
+ setToDosIndex(0);
+ setUserView(true);
+ setIsFamilyView(false);
+ }}
+ icon={}
+ />
+
+
+ {/*
}
/>*/}
- {
- props.navigation.navigate("todos");
- setPageIndex(0);
- setToDosIndex(0);
- setUserView(true);
- setIsFamilyView(false);
- }}
- icon={}
- />
- {
- props.navigation.navigate("brain_dump");
- setPageIndex(0);
- setToDosIndex(0);
- setUserView(true);
- setIsFamilyView(false);
- }}
- icon={}
- />
- {
- props.navigation.navigate("notifications");
- setPageIndex(0);
- setToDosIndex(0);
- setUserView(true);
- setIsFamilyView(false);
- }}
- icon={}
- />
-
-
-
+
+
- );
- }}
- >
- signOut()}
/>
-
-
-
-
-
-
-
-
-
- );
+
+ );
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+ );
}
const styles = StyleSheet.create({
- signOut: {fontFamily: "Poppins_500Medium", fontSize: 15},
- label: {fontFamily: "Poppins_400Medium", fontSize: 15},
- title: {
- fontSize: 26.13,
- fontFamily: "Manrope_600SemiBold",
- color: "#262627",
- },
+ signOut: { fontFamily: "Poppins_500Medium", fontSize: 15 },
+ label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
+ title: {
+ fontSize: 26.13,
+ fontFamily: "Manrope_600SemiBold",
+ color: "#262627",
+ },
});
diff --git a/app/(auth)/calendar/index.tsx b/app/(auth)/calendar/index.tsx
index 8bbbc71..e8120f2 100644
--- a/app/(auth)/calendar/index.tsx
+++ b/app/(auth)/calendar/index.tsx
@@ -30,7 +30,7 @@ export default function Screen() {
}, [setRefreshTrigger]);
return (
-
+ <>
{Device.deviceType === DeviceType.TABLET ? (
) : (
@@ -58,6 +58,6 @@ export default function Screen() {
)}
-
+
);
}
diff --git a/app/(unauth)/index.tsx b/app/(unauth)/index.tsx
index 25d0cd0..8990779 100644
--- a/app/(unauth)/index.tsx
+++ b/app/(unauth)/index.tsx
@@ -2,6 +2,8 @@ import {SafeAreaView} from "react-native-safe-area-context";
import {Button, Image, Text, View} from "react-native-ui-lib";
import React from "react";
import {useRouter} from "expo-router";
+import * as Device from "expo-device";
+import { DeviceType } from "expo-device";
export default function Screen() {
const router = useRouter()
@@ -25,7 +27,7 @@ export default function Screen() {
-
+
diff --git a/components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx b/components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx
index 68cb0a1..589e68f 100644
--- a/components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx
+++ b/components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx
@@ -32,6 +32,7 @@ const styles = StyleSheet.create({
container: {
backgroundColor: "white",
flex: 1,
+ flexDirection: 'row',
borderTopColor: "#a9a9a9",
borderTopWidth: 1,
},
diff --git a/components/pages/settings/UserSettings.tsx b/components/pages/settings/UserSettings.tsx
index bb908dd..8d9b093 100644
--- a/components/pages/settings/UserSettings.tsx
+++ b/components/pages/settings/UserSettings.tsx
@@ -1,131 +1,139 @@
-import {FloatingButton, Text, TouchableOpacity, View,} from "react-native-ui-lib";
-import React, {useState} from "react";
-import {Ionicons} from "@expo/vector-icons";
-import {ScrollView, StyleSheet} from "react-native";
+import {
+ Button,
+ FloatingButton,
+ Text,
+ TouchableOpacity,
+ View,
+} from "react-native-ui-lib";
+import React, { useState } from "react";
+import { Ionicons } from "@expo/vector-icons";
+import { Dimensions, ScrollView, StyleSheet } from "react-native";
import MyProfile from "./user_settings_views/MyProfile";
import MyGroup from "./user_settings_views/MyGroup";
-import {useAtom, useSetAtom} from "jotai";
-import {settingsPageIndex, userSettingsView} from "../calendar/atoms";
+import { useAtom, useSetAtom } from "jotai";
+import { settingsPageIndex, userSettingsView } from "../calendar/atoms";
import PlusIcon from "@/assets/svgs/PlusIcon";
const UserSettings = () => {
- const setPageIndex = useSetAtom(settingsPageIndex);
- const [userView, setUserView] = useAtom(userSettingsView);
- const [onNewUserClick, setOnNewUserClick] = useState<(boolean)>(false);
+ const setPageIndex = useSetAtom(settingsPageIndex);
+ const [userView, setUserView] = useAtom(userSettingsView);
+ const [onNewUserClick, setOnNewUserClick] = useState(false);
- return (
-
-
- {
- setPageIndex(0);
- setUserView(true);
- }}
+ return (
+
+
+ {
+ setPageIndex(0);
+ setUserView(true);
+ }}
+ >
+
+
+
+ Return to main settings
+
+
+
+
+
+ User Management
+
+
+ setUserView(true)}
+ centerV
+ centerH
+ style={userView == true ? styles.btnSelected : styles.btnNot}
+ >
+
+
-
-
-
- Return to main settings
-
-
-
-
-
- User Management
-
-
- setUserView(true)}
- centerV
- centerH
- style={userView == true ? styles.btnSelected : styles.btnNot}
- >
-
-
- My Profile
-
-
-
- setUserView(false)}
- centerV
- centerH
- style={userView == false ? styles.btnSelected : styles.btnNot}
- >
-
-
- My Group
-
-
-
-
- {userView && }
- {!userView && }
-
-
- {!userView && (
- ,
- onPress: () => setOnNewUserClick(true),
- style: styles.bottomButton,
- labelStyle: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
- }}
- />
- )}
+ My Profile
+
+
+
+ setUserView(false)}
+ centerV
+ centerH
+ style={userView == false ? styles.btnSelected : styles.btnNot}
+ >
+
+
+ My Group
+
+
+
+
+ {userView && }
+ {!userView && (
+
+ )}
- );
+
+ {!userView && (
+
+
+ )}
+
+ );
};
const styles = StyleSheet.create({
- bottomButton: {
- position: "absolute",
- bottom: 15,
- marginHorizontal: 28,
- width: 337,
- backgroundColor: "#e8156c",
- height: 53.26,
- },
- buttonSwitch: {
- borderRadius: 50,
- width: "100%",
- backgroundColor: "#ebebeb",
- height: 45,
- },
- btnSelected: {
- backgroundColor: "#05a8b6",
- height: "100%",
- width: "50%",
- borderRadius: 50,
- },
- btnTxt: {
- fontFamily: "Manrope_500Medium",
- fontSize: 15,
- },
- btnNot: {
- height: "100%",
- width: "50%",
- borderRadius: 50,
- },
- title: {fontFamily: "Manrope_600SemiBold", fontSize: 18},
+ bottomButton: {
+ position: "absolute",
+ bottom: 15,
+ marginHorizontal: 0,
+ width: "100%",
+ backgroundColor: "#e8156c",
+ height: 53.26,
+ },
+ buttonSwitch: {
+ borderRadius: 50,
+ width: "100%",
+ backgroundColor: "#ebebeb",
+ height: 45,
+ },
+ btnSelected: {
+ backgroundColor: "#05a8b6",
+ height: "100%",
+ width: "50%",
+ borderRadius: 50,
+ },
+ btnTxt: {
+ fontFamily: "Manrope_500Medium",
+ fontSize: 15,
+ },
+ btnNot: {
+ height: "100%",
+ width: "50%",
+ borderRadius: 50,
+ },
+ title: { fontFamily: "Manrope_600SemiBold", fontSize: 18 },
});
export default UserSettings;