From 81477ed85ba6fd71d961abf65c5849daad1d1cda Mon Sep 17 00:00:00 2001
From: ivic00 <102467664+ivic00@users.noreply.github.com>
Date: Wed, 20 Nov 2024 00:27:43 +0100
Subject: [PATCH] fixed refresh, tablet drawer, drawer titles
---
app/(auth)/_layout.tsx | 44 ++++-
app/(auth)/calendar/index.tsx | 104 +++++++-----
assets/svgs/DrawerIcon.tsx | 19 +++
.../pages/(tablet_pages)/ViewSwitch.tsx | 150 +++++++++---------
.../calendar/TabletCalendarPage.tsx | 4 +-
.../tablet_components/TabletContainer.tsx | 73 +++++----
components/pages/calendar/CalendarPage.tsx | 29 +---
components/shared/DrawerButton.tsx | 6 +-
8 files changed, 251 insertions(+), 178 deletions(-)
create mode 100644 assets/svgs/DrawerIcon.tsx
diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
index acb68fd..394628a 100644
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@@ -2,7 +2,13 @@ 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 {
+ Button,
+ ButtonSize,
+ Text,
+ TouchableOpacity,
+ View,
+} from "react-native-ui-lib";
import { ImageBackground, StyleSheet } from "react-native";
import DrawerButton from "@/components/shared/DrawerButton";
import NavGroceryIcon from "@/assets/svgs/NavGroceryIcon";
@@ -11,7 +17,6 @@ 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 {
isFamilyViewAtom,
@@ -23,6 +28,7 @@ import Ionicons from "@expo/vector-icons/Ionicons";
import * as Device from "expo-device";
import { DeviceType } from "expo-device";
import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
+import DrawerIcon from "@/assets/svgs/DrawerIcon";
export default function TabLayout() {
const { mutateAsync: signOut } = useSignOut();
@@ -37,6 +43,20 @@ export default function TabLayout() {
detachInactiveScreens
screenOptions={({ navigation, route }) => ({
headerShown: true,
+ headerTitleAlign:
+ Device.deviceType === DeviceType.TABLET ? "left" : "center",
+ headerTitleStyle: {
+ fontFamily: "Manrope_600SemiBold",
+ fontSize: Device.deviceType === DeviceType.TABLET ? 22 : 17,
+ },
+ headerLeft: (props) => (
+
+
+
+ ),
headerRight: () => {
// Only show ViewSwitch on calendar and todos pages
const showViewSwitch = ["calendar", "todos", "index"].includes(
@@ -48,9 +68,8 @@ export default function TabLayout() {
) : null;
},
- headerStyle: { height: Device.deviceType === DeviceType.TABLET ? 100 : undefined},
drawerStyle: {
- width: Device.deviceType === DeviceType.TABLET ? "50%" : "90%",
+ width: Device.deviceType === DeviceType.TABLET ? "30%" : "90%",
backgroundColor: "#f9f8f7",
height: "100%",
},
@@ -117,7 +136,7 @@ export default function TabLayout() {
icon={}
/>
-
+
{/*
@@ -276,7 +301,10 @@ export default function TabLayout() {
name="todos"
options={{
drawerLabel: "To-Do",
- title: "To-Dos",
+ title:
+ Device.deviceType === DeviceType.TABLET
+ ? "Family To Do's"
+ : "To Do's",
}}
/>
{
setRefreshing(true);
@@ -18,45 +28,65 @@ export default function Screen() {
const minimumDelay = new Promise((resolve) => setTimeout(resolve, 1000));
try {
- setRefreshTrigger((prev) => !prev);
-
- await Promise.all([minimumDelay]);
+ if (isConnectedToGoogle || isConnectedToMicrosoft || isConnectedToApple) {
+ await Promise.all([resyncAllCalendars(), minimumDelay]);
+ } else {
+ await minimumDelay;
+ }
} catch (error) {
console.error("Refresh failed:", error);
} finally {
setRefreshing(false);
+ setShouldRefresh((prev) => !prev);
}
- }, [setRefreshTrigger]);
-
+ }, [
+ resyncAllCalendars,
+ isConnectedToGoogle,
+ isConnectedToMicrosoft,
+ isConnectedToApple,
+ ]);
+
return (
- <>
- {Device.deviceType === DeviceType.TABLET ? (
-
- ) : (
-
- }
- bounces={true}
- showsVerticalScrollIndicator={false}
- >
-
-
- )}
-
+
+
+ {Device.deviceType === DeviceType.TABLET ? (
+
+ ) : (
+
+ )}
+
+
+
+ }
+ bounces={true}
+ showsVerticalScrollIndicator={false}
+ pointerEvents={refreshing || isSyncing ? "auto" : "none"}
+ />
+
);
}
diff --git a/assets/svgs/DrawerIcon.tsx b/assets/svgs/DrawerIcon.tsx
new file mode 100644
index 0000000..c3424e9
--- /dev/null
+++ b/assets/svgs/DrawerIcon.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import Svg, { SvgProps, Path } from "react-native-svg"
+const DrawerIcon = (props: SvgProps) => (
+
+)
+export default DrawerIcon
diff --git a/components/pages/(tablet_pages)/ViewSwitch.tsx b/components/pages/(tablet_pages)/ViewSwitch.tsx
index 0f1455e..b450364 100644
--- a/components/pages/(tablet_pages)/ViewSwitch.tsx
+++ b/components/pages/(tablet_pages)/ViewSwitch.tsx
@@ -1,92 +1,88 @@
-import { Text, TouchableOpacity, View } from "react-native-ui-lib";
-import React, { useEffect, useState } from "react";
+import { SegmentedControl, View } from "react-native-ui-lib";
+import React, { memo, useCallback, useEffect, useRef, useState } from "react";
import { StyleSheet } from "react-native";
-import { NavigationProp } from "@react-navigation/native";
-import view from "react-native-ui-lib/src/components/view";
+import { NavigationProp, useNavigationState } from "@react-navigation/native";
-interface ViewSwitchProps {
- navigation: NavigationProp; // Adjust according to your navigation structure
-}
-
-const ViewSwitch: React.FC = ({ navigation }) => {
- const [pageIndex, setPageIndex] = useState(navigation.getState().index);
+const ViewSwitch = memo(function ViewSwitch({
+ navigation,
+}: {
+ navigation: any;
+}) {
+ const isNavigating = useRef(false);
+ const navigationState = useNavigationState((state) => state);
+ const [selectedIndex, setSelectedIndex] = useState(
+ navigationState.index === 6 ? 1 : 0
+ );
+ // Sync the selected index with navigation state
useEffect(() => {
- setPageIndex(navigation.getState().index);
- }, [navigation.getState().index])
-
- return (
-
- {
- navigation.navigate("calendar");
- }}
- >
-
-
- Calendar
-
-
-
+ const newIndex = navigationState.index === 6 ? 1 : 0;
+ if (selectedIndex !== newIndex) {
+ setSelectedIndex(newIndex);
+ }
+ isNavigating.current = false;
+ }, [navigationState.index]);
- {
- navigation.navigate("todos");
- }}
- >
-
-
- Chores
-
-
-
+ const handleSegmentChange = useCallback(
+ (index: number) => {
+ if (isNavigating.current) return;
+ if (index === selectedIndex) return;
+
+ isNavigating.current = true;
+ setSelectedIndex(index);
+
+ // Delay navigation slightly to allow the segment control to update
+ requestAnimationFrame(() => {
+ navigation.navigate(index === 0 ? "calendar" : "todos");
+ });
+ console.log(selectedIndex)
+ },
+ [navigation, selectedIndex]
+ );
+
+ return (
+
+
);
-};
-
+});
export default ViewSwitch;
const styles = StyleSheet.create({
- switchBtnActive: {
- backgroundColor: "#ea156c",
- borderRadius: 50,
- width: 110,
- },
- switchBtn: {
+ container: {
+ borderRadius: 30,
backgroundColor: "#ebebeb",
- borderRadius: 50,
- width: 110,
+ shadowColor: "#000",
+ shadowOffset: { width: 0, height: 0 },
+ shadowOpacity: 0,
+ shadowRadius: 0,
+ elevation: 0,
},
- switchTxt: {
+ segmentContainer: {
+ height: 44,
+ width: 220,
+ },
+ segment: {
+ borderRadius: 50,
+ borderWidth: 0,
+ height: 44,
+ },
+ labelStyle: {
fontSize: 16,
fontFamily: "Manrope_600SemiBold",
},
diff --git a/components/pages/(tablet_pages)/calendar/TabletCalendarPage.tsx b/components/pages/(tablet_pages)/calendar/TabletCalendarPage.tsx
index 8465b9b..d951372 100644
--- a/components/pages/(tablet_pages)/calendar/TabletCalendarPage.tsx
+++ b/components/pages/(tablet_pages)/calendar/TabletCalendarPage.tsx
@@ -21,7 +21,9 @@ const TabletCalendarPage = () => {
return (
-
+
+
+
);
};
diff --git a/components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx b/components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx
index 4471b2c..52a9d3e 100644
--- a/components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx
+++ b/components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx
@@ -1,6 +1,6 @@
import { View, Text, ViewProps } from "react-native-ui-lib";
-import React, { ReactNode } from "react";
-import { Dimensions, StyleSheet } from "react-native";
+import React, { ReactNode, useEffect, useState } from "react";
+import { Dimensions, StyleSheet, useWindowDimensions } from "react-native";
import UsersList from "./UsersList";
import { ScrollView } from "react-native-gesture-handler";
@@ -8,12 +8,52 @@ interface TabletContainerProps extends ViewProps {
children: ReactNode;
}
-const { width, height } = Dimensions.get("window");
-
const TabletContainer: React.FC = ({
children,
...props
}) => {
+ const window = useWindowDimensions();
+ const [containerWidth, setContainerWidth] = useState(Dimensions.get('window').width);
+ const [containerHeight, setContainerHeight] = useState(Dimensions.get('window').height);
+
+ // Update dimensions on mount and when window size changes
+ useEffect(() => {
+ const updateDimensions = () => {
+ setContainerWidth(window.width);
+ setContainerHeight(window.height);
+ };
+
+ updateDimensions();
+
+ // Force a second update after a brief delay to handle any initial rendering issues
+ const timer = setTimeout(updateDimensions, 100);
+
+ return () => clearTimeout(timer);
+ }, [window.width, window.height]);
+
+ const styles = StyleSheet.create({
+ container: {
+ backgroundColor: "white",
+ flex: 1,
+ flexDirection: 'row',
+ borderTopColor: "#a9a9a9",
+ width: containerWidth,
+ borderTopWidth: 1,
+ },
+ calendarContainer: {
+ backgroundColor: "white",
+ height: containerHeight,
+ width: containerWidth * 0.89,
+ },
+ profilesContainer: {
+ width: containerWidth * 0.11,
+ height: containerHeight,
+ borderLeftWidth: 1,
+ borderLeftColor: "#a9a9a9",
+ backgroundColor: "white",
+ },
+ });
+
return (
@@ -28,27 +68,4 @@ const TabletContainer: React.FC = ({
);
};
-const styles = StyleSheet.create({
- container: {
- backgroundColor: "white",
- flex: 1,
- flexDirection: 'row',
- borderTopColor: "#a9a9a9",
- width: '80%',
- borderTopWidth: 1,
- },
- calendarContainer: {
- backgroundColor: "white",
- height: height,
- width: width * 0.89,
- },
- profilesContainer: {
- width: width * 0.11,
- height: height,
- borderLeftWidth: 1,
- borderLeftColor: "#a9a9a9",
- backgroundColor: "white",
- },
-});
-
-export default TabletContainer;
+export default TabletContainer;
\ No newline at end of file
diff --git a/components/pages/calendar/CalendarPage.tsx b/components/pages/calendar/CalendarPage.tsx
index 960beee..d6d2d7e 100644
--- a/components/pages/calendar/CalendarPage.tsx
+++ b/components/pages/calendar/CalendarPage.tsx
@@ -2,38 +2,19 @@ import React from "react";
import { View } from "react-native-ui-lib";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import { InnerCalendar } from "@/components/pages/calendar/InnerCalendar";
-import { useSetAtom } from "jotai";
-import { refreshEnabledAtom } from "./atoms";
export default function CalendarPage() {
- const setRefreshEnabled = useSetAtom(refreshEnabledAtom);
-
- const disableRefreshControl = () => setRefreshEnabled(false);
- const enableRefreshControl = () => setRefreshEnabled(true);
return (
- {
- enableRefreshControl();
- console.log("yeah");
- return true;
- }}
- onResponderRelease={() => {
- disableRefreshControl();
- console.log("sure");
- console.log(refreshEnabledAtom)
- }}
- >
-
-
+
);
diff --git a/components/shared/DrawerButton.tsx b/components/shared/DrawerButton.tsx
index 53b6c7f..6a15e9e 100644
--- a/components/shared/DrawerButton.tsx
+++ b/components/shared/DrawerButton.tsx
@@ -17,9 +17,9 @@ const DrawerButton = (props: IDrawerButtonProps) => {
const styles = StyleSheet.create({
iconContainer: {
- width: "70%",
+ width: isTablet ? '50%' : "70%",
aspectRatio: 1,
- borderRadius: 50,
+ borderRadius: 100,
},
labelStyle: { fontSize: 15, fontFamily: "Poppins_400Regular" },
});
@@ -42,7 +42,7 @@ const DrawerButton = (props: IDrawerButtonProps) => {
)}
style={{
- aspectRatio: 1,
+ aspectRatio: isTablet ? 1.2 : 1,
borderRadius: 18.55,
marginBottom: 12,
flexDirection: "column",