Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 1x 8x 8x 8x 8x 8x 8x 8x 1x 1x 8x 8x 1x 8x 16x 5x 1x 1x 1x 8x 8x 8x 8x 8x | import { useCallback, useState } from 'react';
import { TabBar, TabBarProps, TabView } from 'react-native-tab-view';
import { Text, useWindowDimensions } from 'react-native';
import { useQueryClient } from '@tanstack/react-query';
import { ScreenLayout } from '@repo/ui/components/ScreenLayout';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { useTheme } from '@repo/ui/themes/ThemeContext';
import { scaleFontSize } from '@repo/ui/utils/font';
import { SCREENS } from '@repo/constants/screens';
import RequestList from '@/components/RequestList';
import { useRefreshNotifications } from '@/hooks/notifications/useRefreshNotifications';
import { QUERY_KEYS } from '@/constants/apis';
import { MAIN_TABS, ROUTER_TAB } from '@/constants/tab';
import type { RootTabScreenProps } from '@/types/navigation';
import { RequestCategory, RequestStatus } from '@/types/request';
type MyRequestScreenProps = RootTabScreenProps<typeof SCREENS.MY_REQUEST>;
export const MyRequestScreen = ({ navigation }: MyRequestScreenProps) => {
const { theme } = useTheme();
const styles = useStyles();
const layout = useWindowDimensions();
const [index, setIndex] = useState(0);
const [routes] = useState(MAIN_TABS);
const queryClient = useQueryClient();
const handleNotificationRefresh = useCallback(() => {
queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.LIST_REQUESTS] });
queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.MY_REQUESTS] });
}, [queryClient]);
useRefreshNotifications({
onRefresh: handleNotificationRefresh,
});
const handlePressCard = useCallback(
(id: string, category: RequestCategory) => {
navigation.navigate(SCREENS.REQUEST_DETAIL, { id, category });
},
[navigation],
);
const renderScene = ({ route }: { route: { key: string } }) => {
switch (route.key) {
case ROUTER_TAB.ALL:
return <RequestList status={undefined} isMyRequest onPressItem={handlePressCard} />;
case ROUTER_TAB.PENDING:
return (
<RequestList status={RequestStatus.PENDING} isMyRequest onPressItem={handlePressCard} />
);
case ROUTER_TAB.APPROVED:
return (
<RequestList status={RequestStatus.APPROVE} isMyRequest onPressItem={handlePressCard} />
);
case ROUTER_TAB.REJECTED:
return (
<RequestList status={RequestStatus.REJECT} isMyRequest onPressItem={handlePressCard} />
);
default:
return null;
}
};
const renderTabBar = (props: TabBarProps<{ key: string; title: string }>) => (
<TabBar
{...props}
style={styles.tabs}
indicatorStyle={{ backgroundColor: theme.colors.background.default }}
activeColor={theme.colors.text.white}
/>
);
return (
<ScreenLayout style={styles.container}>
<Text className="text-2xl font-bold">My Request</Text>
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
renderTabBar={renderTabBar}
swipeEnabled={false}
commonOptions={{
labelStyle: {
fontSize: scaleFontSize(theme.metrics.textSize[12]),
},
}}
/>
</ScreenLayout>
);
};
const useStyles = makeStyles(theme => ({
container: {
paddingHorizontal: theme.metrics.spacing[4],
gap: theme.metrics.spacing[6],
},
title: {
fontSize: theme.metrics.textSize[20],
fontWeight: theme.metrics.fontWeight.bold,
},
tabs: {
backgroundColor: theme.colors.background.primary,
borderRadius: theme.metrics.borderRadius[2],
shadowOpacity: 0,
elevation: 0,
marginBottom: theme.metrics.spacing[4],
},
}));
|