diff --git a/friends/src/app/components/NotificationDot.tsx b/friends/src/app/components/NotificationDot.tsx
new file mode 100644
index 0000000..44530e7
--- /dev/null
+++ b/friends/src/app/components/NotificationDot.tsx
@@ -0,0 +1,11 @@
+import { StyleSheet, View } from 'react-native';
+
+import { COLORS } from '../styles/colors';
+
+type Props = { style?: { position?: 'absolute'; top?: number; left?: number; right?: number; bottom?: number } };
+
+export const NotificationDot = ({ style }: Props) => {
+ return ;
+};
+
+const styles = StyleSheet.create({ dot: { width: 4, height: 4, borderRadius: 2, backgroundColor: COLORS.red } });
diff --git a/friends/src/app/screens/MainScreen/ManageFriendsDrawerContent/index.tsx b/friends/src/app/screens/MainScreen/ManageFriendsDrawerContent/index.tsx
index ee7df73..b86d405 100644
--- a/friends/src/app/screens/MainScreen/ManageFriendsDrawerContent/index.tsx
+++ b/friends/src/app/screens/MainScreen/ManageFriendsDrawerContent/index.tsx
@@ -5,8 +5,10 @@ import { CloseIcon } from '../../../components/Icons/CloseIcon';
import { SnuttLogoIcon } from '../../../components/Icons/SnuttLogoIcon';
import { SnuttTextIcon } from '../../../components/Icons/SnuttTextIcon';
import { UserPlusIcon } from '../../../components/Icons/UserPlusIcon';
+import { NotificationDot } from '../../../components/NotificationDot';
import { Typography } from '../../../components/Typography';
import { useThemeContext } from '../../../contexts/ThemeContext';
+import { useFriends } from '../../../queries/useFriends';
import { useMainScreenContext } from '..';
import { ManageFriendsDrawerContentActiveList } from './ManageFriendsDrawerContentActiveList';
import { ManageFriendsDrawerContentRequestedList } from './ManageFriendsDrawerContentRequestedList';
@@ -26,6 +28,8 @@ export const ManageFriendsDrawerContent = ({ onClose }: Props) => {
const tabInactiveBorder = useThemeContext((data) => data.color.tab.inactive.border);
const tabInactiveText = useThemeContext((data) => data.color.tab.inactive.text);
const dividerColor = useThemeContext((data) => data.color.border.divider);
+ const { data: requestedFriends } = useFriends({ state: 'REQUESTED' });
+ const isRequestedFriendExist = requestedFriends && requestedFriends.length !== 0;
return (
@@ -49,9 +53,12 @@ export const ManageFriendsDrawerContent = ({ onClose }: Props) => {
onPress={() => setTab(value)}
style={{ ...styles.tab, borderBottomColor: isActive ? tabActiveBorder : tabInactiveBorder }}
>
-
- {label}
-
+
+
+ {label}
+
+ {isRequestedFriendExist && value === 'REQUESTED' && }
+
);
})}
@@ -97,8 +104,18 @@ const styles = StyleSheet.create({
snutt: { fontSize: 18, fontWeight: '900', flex: 1 },
divider: { marginTop: 20, height: 1, marginBottom: 16 },
tabs: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between' },
- tab: { height: 40, borderBottomWidth: 3, width: '50%', display: 'flex', justifyContent: 'center' },
+ tab: {
+ height: 40,
+ borderBottomWidth: 3,
+ width: '50%',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ tabTextWrapper: { position: 'relative' },
tabText: { textAlign: 'center', fontSize: 16 },
+ dot: { position: 'absolute', top: 0, right: -8 },
+
tabContent: { paddingLeft: 15, paddingRight: 15, paddingTop: 16, flex: 1 },
addFriend: {
diff --git a/friends/src/app/screens/MainScreen/index.tsx b/friends/src/app/screens/MainScreen/index.tsx
index f1f2d8a..98321f4 100644
--- a/friends/src/app/screens/MainScreen/index.tsx
+++ b/friends/src/app/screens/MainScreen/index.tsx
@@ -15,6 +15,7 @@ import { QuestionIcon } from '../../components/Icons/QuestionIcon';
import { UserPlusIcon } from '../../components/Icons/UserPlusIcon';
import { WarningIcon } from '../../components/Icons/WarningIcon';
import { Input } from '../../components/Input';
+import { NotificationDot } from '../../components/NotificationDot';
import { Typography } from '../../components/Typography';
import { useServiceContext } from '../../contexts/ServiceContext';
import { useThemeContext } from '../../contexts/ThemeContext';
@@ -113,7 +114,9 @@ const Header = ({ navigation }: DrawerHeaderProps) => {
const { friendService } = useServiceContext();
const { mutate: request } = useRequestFriend();
const guideEnabledColor = useThemeContext((data) => data.color.text.guide);
+ const { data: requestedFriends } = useFriends({ state: 'REQUESTED' });
+ const isRequestedFriendExist = requestedFriends && requestedFriends.length !== 0;
const isValid = friendService.isValidNicknameTag(addFriendModalNickname);
const guideMessageState = addFriendModalNickname === '' ? 'disabled' : isValid ? 'hidden' : 'enabled';
@@ -132,7 +135,10 @@ const Header = ({ navigation }: DrawerHeaderProps) => {
}
left={
navigation.openDrawer()}>
-
+
+
+ {isRequestedFriendExist && }
+
}
right={
@@ -219,4 +225,6 @@ const styles = StyleSheet.create({
height: 12,
},
guideText: { fontSize: 10 },
+ hamburgerWrapper: { position: 'relative' },
+ hamburgerNotificationDot: { position: 'absolute', top: 5, right: -1 },
});
diff --git a/friends/src/app/styles/colors.ts b/friends/src/app/styles/colors.ts
index e532c09..cf6dfeb 100644
--- a/friends/src/app/styles/colors.ts
+++ b/friends/src/app/styles/colors.ts
@@ -16,4 +16,6 @@ export const COLORS = {
primary10: '#00b8b0',
primary20: '#1ca6a0',
+
+ red: '#E54459',
} satisfies Record;