diff --git a/src/app/(withLayout)/community/[communityId]/[groupId]/page.tsx b/src/app/(withLayout)/community/[communityId]/[groupId]/page.tsx index 620a9bd1..7a9b0acb 100644 --- a/src/app/(withLayout)/community/[communityId]/[groupId]/page.tsx +++ b/src/app/(withLayout)/community/[communityId]/[groupId]/page.tsx @@ -11,7 +11,7 @@ export default function Page({ params }: { params: { communityId: string; groupI const [isGroupAdmin, setIsGroupAdmin] = useState(false) return ( -
+
+
{isUserProfileDataLoading || !userProfileData ? ( ) : ( diff --git a/src/app/(withLayout)/timeline/page.tsx b/src/app/(withLayout)/timeline/page.tsx index f5436c18..62ded440 100644 --- a/src/app/(withLayout)/timeline/page.tsx +++ b/src/app/(withLayout)/timeline/page.tsx @@ -9,7 +9,7 @@ export default function Timeline() { const containerRef = useRef(null) return ( -
+
diff --git a/src/components/Timeline/Modals/EditProfileModal.tsx b/src/components/Timeline/Modals/EditProfileModal.tsx index 02970c23..423e44ef 100644 --- a/src/components/Timeline/Modals/EditProfileModal.tsx +++ b/src/components/Timeline/Modals/EditProfileModal.tsx @@ -11,6 +11,7 @@ import { TiCameraOutline } from 'react-icons/ti' import { useEffect, useState } from 'react' import { replaceImage } from '@/services/uploadImage' import { currYear, degreeAndMajors, GenderOptions, occupationAndDepartment } from '@/types/RegisterForm' +import { FaCamera } from 'react-icons/fa' export interface editProfileInputs { first_name: string @@ -39,7 +40,7 @@ const EditProfileModal = () => { const { mutate: mutateEditProfile, isPending } = useEditProfile() const { userData, userProfileData } = useUniStore() const [userType, setUserType] = useState('student') - const [profileImage, setProfileImage] = useState(null) + const [profileImage, setProfileImage] = useState(userProfileData?.profile_dp?.imageUrl as string) const { register, handleSubmit, @@ -128,7 +129,7 @@ const EditProfileModal = () => { const handleImageUpload = async () => { const files = profileImage if (files) { - const data: any = await replaceImage(files, userProfileData?.profile_dp?.publicId) + const data = await replaceImage(files, userProfileData?.profile_dp?.publicId) const dataToPush = { profile_dp: { imageUrl: data?.imageUrl, publicId: data?.publicId } } @@ -167,6 +168,7 @@ const EditProfileModal = () => { major: '', degree: '', study_year: '', + ...(profileImageData && { profile_dp: profileImageData.profile_dp }), } } else { const { occupation, affiliation, ...rest } = data @@ -175,10 +177,11 @@ const EditProfileModal = () => { ...rest, occupation: '', affiliation: '', + ...(profileImageData && { profile_dp: profileImageData.profile_dp }), } } // return console.log('submit', dataToPush) - + console.log(dataToPush) mutateEditProfile(dataToPush) } return ( @@ -189,12 +192,31 @@ const EditProfileModal = () => { * Are required fields to fill.

-
- {profileImage && aa} - +
+ {profileImage ? ( +
+ aa +
+ setProfileImage(e.target.files[0])} /> + +
+
+ ) : ( + + )} +

Edit Profile Picture

diff --git a/src/components/Timeline/PostInput.tsx b/src/components/Timeline/PostInput.tsx index d4e3607d..8d830c52 100644 --- a/src/components/Timeline/PostInput.tsx +++ b/src/components/Timeline/PostInput.tsx @@ -37,8 +37,8 @@ const PostInput: React.FC = ({ setIsModalOpen, setModalContentTy const promises = images.map((image) => replaceImage(image, '')) const results = await Promise.all(promises) return results.map((result) => ({ - imageUrl: result?.imageUrl, - publicId: result?.publicId, + imageUrl: result?.imageUrl || null, + publicId: result?.publicId || null, })) } diff --git a/src/components/atoms/SelectDropdown/SelectDropdown.tsx b/src/components/atoms/SelectDropdown/SelectDropdown.tsx index 7bd08856..83bad920 100644 --- a/src/components/atoms/SelectDropdown/SelectDropdown.tsx +++ b/src/components/atoms/SelectDropdown/SelectDropdown.tsx @@ -61,7 +61,7 @@ const SelectDropdown = ({ options, onChange, value, placeholder, icon, search = onClick={() => setShow(!show)} className={`${ err ? 'border-red-400' : 'border-neutral-200' - } flex justify-between items-center py-2 px-3 border focus:ring-2 rounded-lg drop-shadow-sm text-neutral-400 h-10 outline-none`} + } flex justify-between items-center py-2 px-3 border focus:ring-2 rounded-lg drop-shadow-sm text-neutral-400 outline-none`} >

{

- avatar + avatar

diff --git a/src/components/molecules/Notification/index.tsx b/src/components/molecules/Notification/index.tsx index 2459952c..f0a8f057 100644 --- a/src/components/molecules/Notification/index.tsx +++ b/src/components/molecules/Notification/index.tsx @@ -72,7 +72,13 @@ const NotificationBox = ({ notifications }: NotificationsProps) => {

- avatar + avatar

{item?.sender_id?.firstName + ' ' + item?.sender_id?.lastName}

diff --git a/src/components/molecules/PostCard/index.tsx b/src/components/molecules/PostCard/index.tsx index 449358bf..9b14173f 100644 --- a/src/components/molecules/PostCard/index.tsx +++ b/src/components/molecules/PostCard/index.tsx @@ -26,6 +26,7 @@ import { import { IoMdCode } from 'react-icons/io' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover' import { useRouter } from 'next/navigation' +import { formatDistanceToNow } from 'date-fns' dayjs.extend(relativeTime) @@ -155,27 +156,27 @@ const PostCard = ({ } return (
-
+
-
- avatar.png +
+ avatar.png

{user}

-

{year},

+

{year},

{university}

-
+
-

{text}

+

{text}

{/* //post Image */} @@ -183,9 +184,8 @@ const PostCard = ({ {/* Post Content */} {/* Timestamp */} -

- {dayjs(new Date(date).toString()).format('h:m a · MMM DD, YYYY')} · Post from {user} at{' '} - {university} +

+ {formatDistanceToNow(date as unknown as Date, { addSuffix: true })}

{/* Post Meta */} diff --git a/src/components/molecules/PostCommentInput/index.tsx b/src/components/molecules/PostCommentInput/index.tsx index 7cd6b71f..f7e48ce2 100644 --- a/src/components/molecules/PostCommentInput/index.tsx +++ b/src/components/molecules/PostCommentInput/index.tsx @@ -188,9 +188,6 @@ function PostCommentInput({ postID, type, isSinglePost, adminID, isReply, commen handleImageChange(e)} /> -
diff --git a/src/components/molecules/userMessageInput/index.tsx b/src/components/molecules/userMessageInput/index.tsx index 858d3839..90c08727 100644 --- a/src/components/molecules/userMessageInput/index.tsx +++ b/src/components/molecules/userMessageInput/index.tsx @@ -197,9 +197,6 @@ const UserMessageInput = ({ chatId, userProfileId, isRequestNotAccepted }: Props handleImageChange(e)} /> -
diff --git a/src/services/auth.ts b/src/services/auth.ts index 4d03c673..59995521 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -3,6 +3,7 @@ import { useMutation } from '@tanstack/react-query' import { client } from './api-Client' import { useUniStore } from '@/store/store' import useCookie from '@/hooks/useCookie' +import { useRouter } from 'next/navigation' interface data { email: string @@ -63,7 +64,7 @@ async function universityEmailVerification(data: { universityEmail: string; Univ export const useHandleLogin = () => { const setUserData = useUniStore((state) => state.setUserData) const setUserProfileData = useUniStore((state) => state.setUserProfileData) - + const router = useRouter() const [, setCookieValue] = useCookie('uni_user_token') const [, setRefreshCookieValue] = useCookie('uni_user_refresh_token') @@ -72,9 +73,9 @@ export const useHandleLogin = () => { onSuccess: (response: any) => { setUserData(response.user) setUserProfileData(response.userProfile) - // setToken(response.tokens) setCookieValue(response.tokens.access.token, response.tokens.access.expires) setRefreshCookieValue(response.tokens.refresh.token, response.tokens.refresh.expires) + router.push('/timeline') }, }) } diff --git a/src/services/uploadImage.ts b/src/services/uploadImage.ts index 643c6c76..01fadb27 100644 --- a/src/services/uploadImage.ts +++ b/src/services/uploadImage.ts @@ -1,4 +1,5 @@ -import axios from 'axios' +import { CloudinaryResponse } from '@/types/Cloudinary' +import axios, { AxiosResponse } from 'axios' import CryptoJS from 'crypto-js' const presetKey: any = process.env.NEXT_PUBLIC_preset_key @@ -37,7 +38,7 @@ export async function uploadNewImage(img: any) { formData.append('upload_preset', presetKey) try { - const res = await axios.post(`https://api.cloudinary.com/v1_1/${cloudName}/image/upload`, formData) + const res: AxiosResponse = await axios.post(`https://api.cloudinary.com/v1_1/${cloudName}/image/upload`, formData) if (res?.data?.secure_url) { const imageUrl = res.data.secure_url const publicId = res.data.public_id diff --git a/src/types/Cloudinary/index.ts b/src/types/Cloudinary/index.ts new file mode 100644 index 00000000..4332b082 --- /dev/null +++ b/src/types/Cloudinary/index.ts @@ -0,0 +1,22 @@ +export interface CloudinaryResponse { + asset_id: string + public_id: string + version: number + version_id: string + signature: string + width: number + height: number + format: string + resource_type: string + created_at: string + tags: any[] + bytes: number + type: string + etag: string + placeholder: boolean + url: string + secure_url: string + folder: string + access_mode: string + original_filename: string +} diff --git a/src/types/constants.ts b/src/types/constants.ts index e01cbda3..c9aadacd 100644 --- a/src/types/constants.ts +++ b/src/types/constants.ts @@ -98,8 +98,8 @@ export enum UserPostType { export interface PostInputData { content: string imageUrl?: Array<{ - imageUrl: string - publicId: string + imageUrl: string | null + publicId: string | null }> PostType?: string communityPostsType?: string diff --git a/tailwind.config.js b/tailwind.config.js index 8f6627de..95fad8cd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,18 +10,20 @@ module.exports = { extend: { keyframes: { 'caret-blink': { - '0%,70%,100%': { opacity: '1' }, - '20%,50%': { opacity: '0' }, + '0%,70%,100%': {opacity: '1'}, + '20%,50%': {opacity: '0'}, }, - }, - animation: { + }, + animation: { 'caret-blink': 'caret-blink 1.2s ease-out infinite', - }, + }, fontFamily: { poppins: ['var(--font-poppins)'], inter: ['var(--font-inter)'] }, fontSize: { + '4xs': '8px', + '3xs': '10px', '2xs': '12px', 'xs': '14px', 'sm': '16px',