diff --git a/src/app/[id]/page.tsx b/src/app/[id]/page.tsx index 4a9c121..e04a602 100644 --- a/src/app/[id]/page.tsx +++ b/src/app/[id]/page.tsx @@ -8,16 +8,19 @@ import CommunityProfileContainer from '@/components/communityProfile/CommunityPr import { ModalContentType } from '@/types/global' import React, { useState } from 'react' import { useUniStore } from '@/store/store' +import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal' const Profile = () => { const [isModalOpen, setIsModalOpen] = useState(false) const [modalContentType, setModalContentType] = useState() - const { userData, userProfileData, userFollowingData } = useUniStore() + const { userData, userProfileData } = useUniStore() const modalContent = (modalContentType: string) => { switch (modalContentType) { case 'EditProfileModal': return + case 'ConnectionsModal': + return default: return null } @@ -35,8 +38,8 @@ const Profile = () => { setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} isUserProfile={true} - following={userFollowingData?.followingCount} - followers={userFollowingData?.followerCount} + following={userProfileData?.following?.length} + followers={userProfileData?.followers?.length} /> diff --git a/src/app/community/[id]/page.tsx b/src/app/community/[id]/page.tsx index bb5c1ce..fedf137 100644 --- a/src/app/community/[id]/page.tsx +++ b/src/app/community/[id]/page.tsx @@ -69,7 +69,6 @@ const Page = () => { findGroupRole(userData.userUnVerifiedCommunities) } }, [currSelectedGroup, userData]) - // console.log('role', currUserGroupRole, userData) return ( <> setIsModalOpen(false)}> diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx index cb97e8e..b484905 100644 --- a/src/app/timeline/page.tsx +++ b/src/app/timeline/page.tsx @@ -69,7 +69,7 @@ const recommendations = [ const Timeline = () => { const [isModalOpen, setIsModalOpen] = useState(false) - const { userData, userProfileData, userFollowingData } = useUniStore() + const { userData, userProfileData } = useUniStore() const [modalContentType, setModalContentType] = useState() const { isLoading, data: TimelinePosts, error } = useGetUserPosts() const timelinePosts = TimelinePosts?.timelinePosts @@ -136,8 +136,8 @@ const Timeline = () => { setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} isUserProfile={true} - following={userFollowingData?.followingCount} - followers={userFollowingData?.followerCount} + following={userProfileData?.following?.length} + followers={userProfileData?.followers?.length} /> diff --git a/src/components/Connections/FindPeople.tsx b/src/components/Connections/FindPeople.tsx index 12b1c5d..0196eb1 100644 --- a/src/components/Connections/FindPeople.tsx +++ b/src/components/Connections/FindPeople.tsx @@ -3,57 +3,10 @@ import React, { useState } from 'react' import UserListItem from '../Timeline/UserListItem' import { GoSearch } from 'react-icons/go' import { cn } from '@/lib/utils' -// Sample data -const followingData = [ - { - name: 'Roberta Green', - university: 'Nagoya University', - role: '2nd Yr. Undergraduate, Psychology', - tags: [ - { label: '2nd Yr', color: 'bg-purple-500' }, - { label: 'Undergraduate', color: 'bg-green' }, - { label: 'Law', color: 'bg-red-500' }, - ], - }, - { - name: 'Jonathan Park', - university: 'Nagoya University', - role: '2nd Yr. Undergraduate, Law', - tags: [ - { label: '2nd Yr', color: 'bg-purple-500' }, - { label: 'Undergraduate', color: 'bg-green' }, - { label: 'Law', color: 'bg-red-500' }, - ], - }, - { - name: 'Pathova Siena', - university: 'Nagoya University', - role: '4th Year PhD Lab of Semiconductors', - tags: [ - { label: '4th Yr', color: 'bg-purple-500' }, - { label: 'PhD', color: 'bg-green' }, - { label: 'Physics', color: 'bg-cyan-500' }, - ], - }, - { - name: 'Danny Tela', - university: 'Nagoya University', - role: 'Assistant Professor of Molecular Neuroscience', - tags: [ - { label: 'Assistant Professor', color: 'bg-purple-700' }, - { label: 'Molecular Neuroscience', color: 'bg-red-500' }, - ], - }, - { - name: 'Gretha Bassuk', - university: 'Nagoya University', - role: 'Professor', - tags: [ - { label: 'Professor', color: 'bg-blue-500' }, - { label: 'Philosopy', color: 'bg-red-500' }, - ], - }, -] +import { useGetAllUserWithProfileData, useGetUserFollow, useGetUserFollowers } from '@/services/connection' +import UserListItemSkeleton from './UserListItemSkeleton' +import { useUniStore } from '@/store/store' +import { FindUsers, FollowingItemProps } from '@/types/constants' type ContentType = 'Find People' | 'Following' | 'Followers' @@ -115,7 +68,13 @@ const TabButton: React.FC = ({ label, isActive, onClick }) => ( ) const FindPeople = ({ contentDivStyle }: { contentDivStyle?: string }) => { - const [content, setContent] = useState('Following') + const [content, setContent] = useState('Find People') + const [name, setName] = useState('') + const { userProfileData } = useUniStore() + const userFollowingIDs = userProfileData.following.map((following) => following.userId) + const { data: allUserData, isFetching } = useGetAllUserWithProfileData(name, content == 'Find People') + const { data: userFollow, isFetching: isFollowingLoading } = useGetUserFollow(name, content == 'Following') + const { data: userFollowers, isFetching: isFollowersLoading } = useGetUserFollowers(name, content == 'Followers') return (
@@ -135,13 +94,98 @@ const FindPeople = ({ contentDivStyle }: { contentDivStyle?: string }) => {
- + setName(e.target.value)} + type="text" + value={name} + className="text-sm w-full outline-none" + placeholder="Search People" + />
- {content === 'Following' && followingData.map((item, index) => )} + {content === 'Following' && isFollowingLoading ? ( + <> + + + + + ) : content === 'Following' && !userFollow?.profile?.length ? ( +

You are not Following anyone.

+ ) : ( + content === 'Following' && + userFollow?.profile?.map((item: FollowingItemProps) => ( + + )) + )} + {content === 'Followers' && isFollowersLoading ? ( + <> + + + + + ) : content === 'Followers' && !userFollow?.profile?.length ? ( +

You have 0 Followers

+ ) : ( + content === 'Followers' && + userFollowers?.profile?.map((item: FollowingItemProps, index: number) => ( + + )) + )} {/* For testing Purposes */} - {content === 'Find People' && followingData.map((item, index) => )} + {content === 'Find People' && isFetching ? ( + <> + + + + + ) : content === 'Find People' && !allUserData?.user?.length ? ( +

No data!

+ ) : ( + content === 'Find People' && + allUserData?.user?.map((item: FindUsers, index: number) => ( + + )) + )}
) diff --git a/src/components/Connections/UserListItemSkeleton.tsx b/src/components/Connections/UserListItemSkeleton.tsx new file mode 100644 index 0000000..ecd77a7 --- /dev/null +++ b/src/components/Connections/UserListItemSkeleton.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { Skeleton } from '../ui/Skeleton' +const UserListItemSkeleton = () => { + return ( +
+
+ +
+ + + +
+
+
+ ) +} + +export default UserListItemSkeleton diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 71388e8..3148083 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -25,6 +25,8 @@ import { ButtonPrimary } from '../Buttons/PrimaryButton' import InviteNotification from '../Notifiaction/InviteNotification' import CommentNotification from '../Notifiaction/CommentNotification' import AssignNotification from '../Notifiaction/AssignNotification' +import UserFollowNotification from '../Notifiaction/UserFollowNotification' +import { notificationInterface } from '@/types/constants' interface MenuItem { name: string @@ -90,7 +92,7 @@ const Navbar: React.FC = () => { {notificationData?.length ? ( - notificationData?.map((item: any) => + notificationData?.map((item: notificationInterface) => item.type == notificationRoleAccess.GROUP_INVITE ? ( { message={item?.message} createdAt={item?.createdAt} /> + ) : item.type == notificationRoleAccess.FOLLOW ? ( + ) : ( '' ) diff --git a/src/components/Notifiaction/UserFollowNotification.tsx b/src/components/Notifiaction/UserFollowNotification.tsx new file mode 100644 index 0000000..e3f4f68 --- /dev/null +++ b/src/components/Notifiaction/UserFollowNotification.tsx @@ -0,0 +1,39 @@ +import React from 'react' +import { useUpdateIsSeenCommunityGroupNotification } from '@/services/notification' +import dayjs from 'dayjs' +import relativeTime from 'dayjs/plugin/relativeTime' + +dayjs.extend(relativeTime) + +type Props = { + id: string + senderName: string + message: string + createdAt: string +} + +const UserFollowNotification = ({ id, senderName, message, createdAt }: Props) => { + const { mutate: updateIsSeen } = useUpdateIsSeenCommunityGroupNotification() + + const handleIsSeenGroup = (id: string) => { + const dataToPush = { + id: id, + } + updateIsSeen(dataToPush) + } + return ( +
+

+ {senderName} {message} +

+
+

{dayjs(new Date(createdAt).toString()).fromNow()}

+ +
+
+ ) +} + +export default UserFollowNotification diff --git a/src/components/Timeline/Modals/ConnectionsModal.tsx b/src/components/Timeline/Modals/ConnectionsModal.tsx index dec9f97..22156ad 100644 --- a/src/components/Timeline/Modals/ConnectionsModal.tsx +++ b/src/components/Timeline/Modals/ConnectionsModal.tsx @@ -2,60 +2,17 @@ 'use client' import React, { useState } from 'react' import UserListItem from '../UserListItem' - -const followingData = [ - { - name: 'Roberta Green', - university: 'Nagoya University', - role: '2nd Yr. Undergraduate, Psychology', - tags: [ - { label: '2nd Yr', color: 'bg-purple-500' }, - { label: 'Undergraduate', color: 'bg-green' }, - { label: 'Law', color: 'bg-red-500' }, - ], - }, - { - name: 'Jonathan Park', - university: 'Nagoya University', - role: '2nd Yr. Undergraduate, Law', - tags: [ - { label: '2nd Yr', color: 'bg-purple-500' }, - { label: 'Undergraduate', color: 'bg-green' }, - { label: 'Law', color: 'bg-red-500' }, - ], - }, - { - name: 'Pathova Siena', - university: 'Nagoya University', - role: '4th Year PhD Lab of Semiconductors', - tags: [ - { label: '4th Yr', color: 'bg-purple-500' }, - { label: 'PhD', color: 'bg-green' }, - { label: 'Physics', color: 'bg-cyan-500' }, - ], - }, - { - name: 'Danny Tela', - university: 'Nagoya University', - role: 'Assistant Professor of Molecular Neuroscience', - tags: [ - { label: 'Assistant Professor', color: 'bg-purple-700' }, - { label: 'Molecular Neuroscience', color: 'bg-red-500' }, - ], - }, - { - name: 'Gretha Bassuk', - university: 'Nagoya University', - role: 'Professor', - tags: [ - { label: 'Professor', color: 'bg-blue-500' }, - { label: 'Philosopy', color: 'bg-red-500' }, - ], - }, -] +import { useGetUserFollow, useGetUserFollowers } from '@/services/connection' +import { useUniStore } from '@/store/store' +import UserListItemSkeleton from '@/components/Connections/UserListItemSkeleton' +import { FollowingItemProps } from '@/types/constants' const ConnectionsModal = () => { const [content, setContent] = useState<'Following' | 'Followers'>('Following') + const { userProfileData } = useUniStore() + const userFollowingIDs = userProfileData.following.map((following) => following.userId) + const { data: userFollow, isFetching: isFollowingLoading } = useGetUserFollow('', content == 'Following') + const { data: userFollowers, isFetching: isFollowersLoading } = useGetUserFollowers('', content == 'Followers') return (
@@ -73,8 +30,61 @@ const ConnectionsModal = () => { Followers

-
- {content === 'Following' && followingData.map((item, index) => )} +
+ {content === 'Following' && isFollowingLoading ? ( + <> + + + + + ) : content === 'Following' && !userFollow?.profile?.length ? ( +

You are not Following anyone.

+ ) : ( + content === 'Following' && + userFollow?.profile?.map((item: FollowingItemProps, index: number) => ( + + )) + )} + {content === 'Followers' && isFollowersLoading ? ( + <> + + + + + ) : content === 'Followers' && !userFollow?.profile?.length ? ( +

You have 0 Followers

+ ) : ( + content === 'Followers' && + userFollowers?.profile?.map((item: FollowingItemProps, index: number) => ( + + )) + )}
) diff --git a/src/components/Timeline/UserListItem.tsx b/src/components/Timeline/UserListItem.tsx index e9208c2..0a7dcee 100644 --- a/src/components/Timeline/UserListItem.tsx +++ b/src/components/Timeline/UserListItem.tsx @@ -1,32 +1,78 @@ /* eslint-disable @next/next/no-img-element */ import React from 'react' import { SlOptionsVertical } from 'react-icons/sl' +import { Popover, PopoverContent, PopoverTrigger } from '../ui/Popover' +import { useToggleFollow } from '@/services/connection' interface FollowingItemProps { - name: string + firstName: string + lastName: string + id: string university: string - role: string - tags: { label: string; color: string }[] + study_year: string + degree: string + major: string + occupation: string + imageUrl: string + type: string + userFollowingIDs: string[] } -const UserListItem: React.FC = ({ name, university, role, tags }) => { +const UserListItem: React.FC = ({ + id, + type, + firstName, + lastName, + university, + study_year, + degree, + major, + occupation, + imageUrl, + userFollowingIDs, +}) => { + const { mutate: toggleFollow } = useToggleFollow(type) + return (
- {name} + {imageUrl ? ( + {firstName} + ) : ( +
+ )}
-

{name}

+

+ {firstName} {lastName} +

{university}

-

{role}

+

+ {study_year} + {degree} + {major} +

- {tags.map((tag, index) => ( + + {study_year ? study_year + 'Yr.' : ''} + + {occupation && {occupation}} + {degree} + {major} + {/* {tags?.map((tag, index) => ( {tag.label} - ))} + ))} */}
- + + + + + +

toggleFollow(id)}>{userFollowingIDs?.includes(id) ? 'Un-Follow' : 'Follow'}

+ +
) diff --git a/src/components/communityUniversity/CreateNewGroup.tsx b/src/components/communityUniversity/CreateNewGroup.tsx index 7d76a71..7e1dd42 100644 --- a/src/components/communityUniversity/CreateNewGroup.tsx +++ b/src/components/communityUniversity/CreateNewGroup.tsx @@ -46,8 +46,6 @@ const CreateNewGroup = ({ setNewGroup }: Props) => { ...logoImageData, selectedUsersId, } - // return console.log(id) - createGroup({ communityId: id, data: dataToPush }) } diff --git a/src/services/connection.ts b/src/services/connection.ts new file mode 100644 index 0000000..dc3ac22 --- /dev/null +++ b/src/services/connection.ts @@ -0,0 +1,105 @@ +import useCookie from '@/hooks/useCookie' +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query' +import { client } from './api-Client' +import axios from 'axios' +import useDebounce from '@/hooks/useDebounce' +import { useUniStore } from '@/store/store' +import { FindUsers, FollowingItemProps } from '@/types/constants' + +interface FollowingItemPropss { + profile: FollowingItemProps[] +} + +interface userItemsProps { + user: FindUsers[] +} + +export async function getUsersWithProfile(token: string, Name: string) { + const response: userItemsProps = await client(`/users?name=${Name}`, { headers: { Authorization: `Bearer ${token}` } }) + return response +} +export async function getUserFollow(token: string, Name: string) { + const response: FollowingItemPropss = await client(`/userprofile?name=${Name}`, { headers: { Authorization: `Bearer ${token}` } }) + return response +} +export async function getUserFollowers(token: string, Name: string) { + const response: FollowingItemPropss = await client(`/userprofile/followers?name=${Name}`, { headers: { Authorization: `Bearer ${token}` } }) + return response +} + +export async function toggleFollow(id: string, token: any) { + const response = await client(`/userprofile?userToFollow=${id}`, { method: 'PUT', headers: { Authorization: `Bearer ${token}` } }) + return response +} + +export function useGetAllUserWithProfileData(Name: string, content: boolean) { + const [cookieValue] = useCookie('uni_user_token') + const debouncedSearchTerm = useDebounce(Name, 1000) + const { isLoading, data, error, isFetching } = useQuery({ + queryKey: ['getAllUsersWithProfile', debouncedSearchTerm], + queryFn: () => getUsersWithProfile(cookieValue, debouncedSearchTerm), + enabled: !!cookieValue && content, + }) + + let errorMessage = null + if (axios.isAxiosError(error) && error.response) { + errorMessage = error.response.data + } + + return { isLoading, data, isFetching, error: errorMessage } +} + +export const useToggleFollow = (type: string) => { + const [cookieValue] = useCookie('uni_user_token') + const { setUserfollowing } = useUniStore() + const queryClient = useQueryClient() + return useMutation({ + mutationFn: (id: string) => toggleFollow(id, cookieValue), + + onSuccess: (response: any) => { + setUserfollowing(response.followed.following) + if (type == 'Following') { + queryClient.invalidateQueries({ queryKey: ['getUserFollow'] }) + } else { + queryClient.invalidateQueries({ queryKey: ['getAllUsersWithProfile'] }) + } + }, + onError: (res: any) => { + console.log(res.response.data.message, 'res') + }, + }) +} + +export function useGetUserFollow(Name: string, content: boolean) { + const [cookieValue] = useCookie('uni_user_token') + const debouncedSearchTerm = useDebounce(Name, 1000) + const { isLoading, data, error, isFetching } = useQuery({ + queryKey: ['getUserFollow', debouncedSearchTerm], + queryFn: () => getUserFollow(cookieValue, debouncedSearchTerm), + enabled: !!cookieValue && content, + }) + + let errorMessage = null + if (axios.isAxiosError(error) && error.response) { + errorMessage = error.response.data + } + + return { isLoading, data, isFetching, error: errorMessage } +} + +export function useGetUserFollowers(Name: string, content: boolean) { + const [cookieValue] = useCookie('uni_user_token') + const debouncedSearchTerm = useDebounce(Name, 1000) + const { isLoading, data, error, isFetching } = useQuery({ + queryKey: ['getUserFollowers', debouncedSearchTerm], + queryFn: () => getUserFollowers(cookieValue, debouncedSearchTerm), + enabled: !!cookieValue && content, + }) + + let errorMessage = null + if (axios.isAxiosError(error) && error.response) { + errorMessage = error.response.data + } + + return { isLoading, data, isFetching, error: errorMessage } +} diff --git a/src/services/notification.ts b/src/services/notification.ts index bf4d79a..f5d6bd9 100644 --- a/src/services/notification.ts +++ b/src/services/notification.ts @@ -3,18 +3,19 @@ import { client } from './api-Client' import axios from 'axios' import useCookie from '@/hooks/useCookie' import { useUniStore } from '@/store/store' +import { notificationInterface } from '@/types/constants' -export async function getUserNotification(token: any) { - const response = await client(`/notification/`, { headers: { Authorization: `Bearer ${token}` } }) +export async function getUserNotification(token: string) { + const response: notificationInterface[] = await client(`/notification/`, { headers: { Authorization: `Bearer ${token}` } }) return response } -export async function JoinCommunityGroup(data: any, token: any) { +export async function JoinCommunityGroup(data: { groupId: string; id: string }, token: string) { const response = await client(`/notification/join/`, { method: 'PUT', headers: { Authorization: `Bearer ${token}` }, data }) return response } -export async function UpdateCommunityGroup(data: any, token: any) { +export async function UpdateCommunityGroup(data: { id: string }, token: string) { const response = await client(`/notification`, { method: 'PUT', headers: { Authorization: `Bearer ${token}` }, data }) return response } @@ -41,7 +42,7 @@ export const useJoinCommunityGroup = () => { const { setUserData } = useUniStore() const queryClient = useQueryClient() return useMutation({ - mutationFn: (data: any) => JoinCommunityGroup(data, cookieValue), + mutationFn: (data: { groupId: string; id: string }) => JoinCommunityGroup(data, cookieValue), onSuccess: (response: any) => { setUserData(response.user) @@ -57,7 +58,7 @@ export const useUpdateIsSeenCommunityGroupNotification = () => { const [cookieValue] = useCookie('uni_user_token') const queryClient = useQueryClient() return useMutation({ - mutationFn: (data: any) => UpdateCommunityGroup(data, cookieValue), + mutationFn: (data: { id: string }) => UpdateCommunityGroup(data, cookieValue), onSuccess: (response: any) => { console.log(response) diff --git a/src/services/userProfile.ts b/src/services/userProfile.ts new file mode 100644 index 0000000..78606b1 --- /dev/null +++ b/src/services/userProfile.ts @@ -0,0 +1,26 @@ +import useCookie from '@/hooks/useCookie' +import { useQuery } from '@tanstack/react-query' +import { client } from './api-Client' +import axios from 'axios' + +export async function getUserProfileData(token: any) { + const response: any = await client(`/userprofile/me`, { headers: { Authorization: `Bearer ${token}` } }) + return response +} + +export function useGetUserProfileData() { + const [cookieValue] = useCookie('uni_user_token') + + const { isLoading, data, error, refetch } = useQuery({ + queryKey: ['getRefetchUserProfileData'], + queryFn: () => getUserProfileData(cookieValue), + enabled: !!cookieValue, + }) + + let errorMessage = null + if (axios.isAxiosError(error) && error.response) { + errorMessage = error.response.data + } + + return { isLoading, data, error: errorMessage, refetch } +} diff --git a/src/store/socketSlice/socketSlice.ts b/src/store/socketSlice/socketSlice.ts index a79a96b..6a175c6 100644 --- a/src/store/socketSlice/socketSlice.ts +++ b/src/store/socketSlice/socketSlice.ts @@ -1,20 +1,22 @@ import { StateCreator } from 'zustand' import { io, Socket } from 'socket.io-client' +import { notificationRoleAccess } from '@/components/Navbar/constant' type Notification = { - message: string + type: string } type SocketState = { socket: Socket | null isConnected: boolean - isRefetched: boolean + type: string } type SocketActions = { - initializeSocket: (userId: string, refetchUserData: () => void, refetchNotification: () => void) => void + initializeSocket: (userId: string, refetchUserData: () => void, refetchNotification: () => void, refetchUserProfileData: () => void) => void + disconnectSocket: () => void - setIsRefetched: (value: boolean) => void + setIsRefetched: (value: string) => void } export type SocketSlice = SocketState & SocketActions @@ -22,13 +24,13 @@ export type SocketSlice = SocketState & SocketActions const initialState: SocketState = { socket: null, isConnected: false, - isRefetched: false, + type: '', } export const createSocketSlice: StateCreator = (set, get) => ({ ...initialState, - initializeSocket: (userId, refetchUserData, refetchNotification) => { + initializeSocket: (userId, refetchUserData, refetchNotification, refetchUserProfileData) => { const newSocket = io('http://localhost:9000') newSocket.on('connect', () => { @@ -42,9 +44,13 @@ export const createSocketSlice: StateCreator = (set, get) => ({ }) newSocket.on(`notification_${userId}`, (notification: Notification) => { - if (notification.message === 'You have a been assigned') { + if (notification.type === notificationRoleAccess.ASSIGN) { refetchUserData() - set({ isRefetched: true }) + set({ type: notificationRoleAccess.ASSIGN }) + } + if (notification.type === notificationRoleAccess.FOLLOW) { + refetchUserProfileData() + set({ type: notificationRoleAccess.FOLLOW }) } refetchNotification() @@ -61,5 +67,5 @@ export const createSocketSlice: StateCreator = (set, get) => ({ } }, - setIsRefetched: (value: boolean) => set({ isRefetched: value }), + setIsRefetched: (value: string) => set({ type: value }), }) diff --git a/src/store/userProfileSlice/userProfileSlice.ts b/src/store/userProfileSlice/userProfileSlice.ts index 5c54068..eb8afc2 100644 --- a/src/store/userProfileSlice/userProfileSlice.ts +++ b/src/store/userProfileSlice/userProfileSlice.ts @@ -7,6 +7,8 @@ type userProfileState = { type userProfileAction = { setUserProfileData: (userProfileData: userProfileType) => void + setUserFollowers: (communities: userProfileType['followers']) => void + setUserfollowing: (communities: userProfileType['following']) => void resetUserProfileData: () => void } @@ -28,6 +30,8 @@ const initialState: userProfileState = { major: '', affiliation: '', occupation: '', + followers: [{ userId: '' }], + following: [{ userId: '' }], totalFilled: 0, }, } @@ -37,5 +41,19 @@ export type userProfileSlice = userProfileState & userProfileAction export const createUserProfileSlice: StateCreator = (set) => ({ userProfileData: initialState.userProfileData, setUserProfileData: (userProfileData: userProfileType) => set({ userProfileData }), + setUserFollowers: (followers: any) => + set((state) => ({ + userProfileData: { + ...state.userProfileData, + followers: followers, + }, + })), + setUserfollowing: (followings: any) => + set((state) => ({ + userProfileData: { + ...state.userProfileData, + following: followings, + }, + })), resetUserProfileData: () => set(initialState), }) diff --git a/src/store/userProfileSlice/userProfileType.ts b/src/store/userProfileSlice/userProfileType.ts index b1c2fd0..d6f7739 100644 --- a/src/store/userProfileSlice/userProfileType.ts +++ b/src/store/userProfileSlice/userProfileType.ts @@ -3,6 +3,10 @@ interface emailType { UniversityEmail: string } +interface following { + userId: string +} + export interface userProfileType { users_id: string profile_dp?: { imageUrl: string; publicId: string } @@ -19,6 +23,8 @@ export interface userProfileType { major?: string affiliation?: string occupation?: string + following: following[] + followers: following[] totalFilled: number _id: string } diff --git a/src/types/constants.ts b/src/types/constants.ts index 2ffc01a..490711d 100644 --- a/src/types/constants.ts +++ b/src/types/constants.ts @@ -11,6 +11,67 @@ export const CommunityNavbarLinks: NavLink[] = [ { label: 'Chatbot', href: '/chatbot' }, ] +export interface FollowingItemProps { + users_id: { + firstName: string + lastName: string + id: string + } + + university: string + study_year: string + degree: string + major: string + occupation: string + profile_dp: { + imageUrl: string + } + type: string + userFollowingIDs: string[] +} + +export interface FindUsers { + firstName: string + lastName: string + _id: string + profile: { + university: string + study_year: string + degree: string + major: string + occupation: string + profile_dp: { + imageUrl: string + } + } + + type: string + userFollowingIDs: string[] +} + +export interface notificationInterface { + _id: string + sender_id: { + firstName: string + } + receiverId: string + communityGroupId: { + _id: string + title: string + } + communityPostId: { + _id: string + } + userPostId: { + _id: string + title: string + } + message: string + type: string + isRead: boolean + createdAt: string +} + export enum PostInputType { Community = 'Community', Timeline = 'Timeline', diff --git a/src/utils/ZustandSocketProvider.tsx b/src/utils/ZustandSocketProvider.tsx index 2e1cab9..c1a2ce2 100644 --- a/src/utils/ZustandSocketProvider.tsx +++ b/src/utils/ZustandSocketProvider.tsx @@ -1,7 +1,9 @@ 'use client' +import { notificationRoleAccess } from '@/components/Navbar/constant' import { useGetNotification } from '@/services/notification' import { useGetUserData } from '@/services/user' +import { useGetUserProfileData } from '@/services/userProfile' import { useUniStore } from '@/store/store' import React, { useEffect } from 'react' @@ -12,13 +14,14 @@ type ZustandSocketProviderProps = { const ZustandSocketProvider: React.FC = ({ children }) => { const initializeSocket = useUniStore((state: any) => state.initializeSocket) const disconnectSocket = useUniStore((state: any) => state.disconnectSocket) - const { userData, isRefetched, setUserUnVerifiedCommunities, setUserVerifiedCommunities, setIsRefetched } = useUniStore() + const { userData, type, setUserUnVerifiedCommunities, setUserVerifiedCommunities, setUserFollowers, setIsRefetched } = useUniStore() const { refetch: refetchNotification } = useGetNotification() const { refetch: refetchUserData, data: RefetcheduserData } = useGetUserData() + const { refetch: refetchUserProfileData, data: RefetcheduserProfileData } = useGetUserProfileData() useEffect(() => { if (userData.id) { - initializeSocket(userData.id, refetchUserData, refetchNotification) + initializeSocket(userData.id, refetchUserData, refetchNotification, refetchUserProfileData) } return () => { @@ -27,12 +30,20 @@ const ZustandSocketProvider: React.FC = ({ children }, [userData.id, initializeSocket, disconnectSocket, refetchNotification]) useEffect(() => { - if (isRefetched) { - setUserUnVerifiedCommunities(RefetcheduserData?.user?.userUnVerifiedCommunities) - setUserVerifiedCommunities(RefetcheduserData?.user?.userVerifiedCommunities) - setIsRefetched(false) + switch (type) { + case notificationRoleAccess.ASSIGN: + setUserUnVerifiedCommunities(RefetcheduserData?.user?.userUnVerifiedCommunities) + setUserVerifiedCommunities(RefetcheduserData?.user?.userVerifiedCommunities) + setIsRefetched('') + break + case notificationRoleAccess.FOLLOW: + setUserFollowers(RefetcheduserProfileData?.profile?.followers) + setIsRefetched('') + break + default: + break } - }, [RefetcheduserData]) + }, [RefetcheduserData, RefetcheduserProfileData]) return <>{children} }