Merge branch 'dev' of https://github.com/BacPacNet/web-app-client int…

…o university-filter-screen

src/components/Timeline/Modals/EditProfileModal.tsx

@@ -55,7 +55,6 @@ const EditProfileModal = () => {
     reset,
     control,
     watch,
-    setError,
     setValue,
     formState: { errors, isDirty },
   } = useForm<editProfileInputs>()
@@ -91,7 +90,6 @@ const EditProfileModal = () => {
   const [cityOptions, setCityOptions] = useState<string[]>([])
   const [isCityAvailable, setIsCityAvailable] = useState(true)
   const currCountry = watch('country') || ''
-  const currCity = watch('city') || ''
 
   const handleCountryChange = (selectedCountry: string, field: any) => {
     field.onChange(selectedCountry) // Update the country field value
@@ -103,7 +101,6 @@ const EditProfileModal = () => {
 
   type DegreeKeys = keyof typeof degreeAndMajors
   const currDegree = watch('degree') as DegreeKeys
-  const currMa = watch('major') as DegreeKeys
   const [currMajor, setCurrMajor] = useState<any>([])
 
   type occupationKeys = keyof typeof occupationAndDepartment

src/components/atoms/Buttons/index.tsx

@@ -20,7 +20,7 @@ const Buttons: React.FC<ButtonProps> = ({ className = '', variant = 'primary', s
     medium: 'text-md py-2 px-4 ',
     large: 'text-lg py-2 px-4 ',
     extra_small: 'text-2xs py-1 px-2',
-    extra_small_paddind_2: 'text-2xs py-2 px-2',
+    extra_small_paddind_2: 'text-3xs py-2 px-2',
   }
 
   const variantClass = variantClasses[variant]

src/components/atoms/CustomToasts/CustomToasts.tsx

@@ -1,3 +1,4 @@
+import { MESSAGES } from '@/content/constant'
 import React from 'react'
 import toast from 'react-hot-toast'
 
@@ -88,7 +89,7 @@ export function showCustomDangerToast(message: string) {
             textAlign: 'center',
           },
         },
-        React.createElement('p', { className: 'text-white' }, message),
+        React.createElement('p', { className: 'text-white' }, message || MESSAGES.SOMETHING_WENT_WRONG),
         React.createElement(
           'button',
           {

src/components/atoms/GroupChatSelectUsers/index.tsx

@@ -1,5 +1,7 @@
+import Image from 'next/image'
 import React from 'react'
-import { FaUser } from 'react-icons/fa'
+import avatar from '@assets/avatar.svg'
+
 type user = {
   _id: string
   profileImageUrl: string
@@ -31,7 +33,7 @@ const GroupSelectUsers = ({ selectedUsers, setSelectedUsers, user }: Props) => {
     <div className="flex justify-start items-center gap-4 w-full ">
       <input onChange={() => handleClick(user)} className="w-4" type="checkbox" checked={isSelected} />
       <div className="flex items-center gap-2">
-        <img className="w-10 h-10 rounded-full object-cover" src={user?.profileImageUrl} alt="" />
+        <Image width={40} height={40} className="w-10 h-10 rounded-full object-cover" src={user?.profileImageUrl || avatar} alt="" />
         <div>
           <p className="text-sm font-semibold">{user?.firstName}</p>
           {/*<p className="text-2xs text-neutral-500">{data?.profile?.university_name ? data?.profile?.university_name : 'Not Availaible'}</p>*/}

src/components/atoms/Input/InputBox.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, InputHTMLAttributes } from 'react'
+import { RxCross2 } from 'react-icons/rx'
 
 type Props = {
   placeholder?: string
@@ -7,22 +8,31 @@ type Props = {
   err?: boolean
   value?: string
   disabled?: boolean
-}
-const InputBox = forwardRef<HTMLInputElement, Props>(({ placeholder, className, type, err, value, disabled, ...rest }, ref) => {
-  return (
-    <input
-      className={`${className} ${
-        err ? 'border-red-400' : 'border-neutral-200'
-      } py-2 px-3 border focus:ring-2 rounded-lg drop-shadow-sm  text-neutral-900 placeholder:text-neutral-400 h-10 outline-none`}
-      type={type}
-      placeholder={placeholder}
-      ref={ref}
-      value={value}
-      disabled={disabled}
-      {...rest}
-    />
-  )
-})
+  isCancel?: boolean
+  onCancel?: () => void
+} & InputHTMLAttributes<HTMLInputElement>
+
+const InputBox = forwardRef<HTMLInputElement, Props>(
+  ({ placeholder, className, type, err, value, disabled, onClick, isCancel, onCancel, ...rest }, ref) => {
+    return (
+      <div className="relative w-full">
+        <input
+          className={`${className} ${
+            err ? 'border-red-400' : 'border-neutral-200'
+          } w-full py-2 px-3 border focus:ring-2 rounded-lg drop-shadow-sm text-neutral-900 placeholder:text-neutral-400 h-10 outline-none`}
+          type={type}
+          placeholder={placeholder}
+          ref={ref}
+          value={value}
+          disabled={disabled}
+          onClick={onClick}
+          {...rest}
+        />
+        {isCancel && <RxCross2 onClick={onCancel} className="absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer" size={20} />}
+      </div>
+    )
+  }
+)
 
 InputBox.displayName = 'InputBox' // for React DevTools
 

src/components/atoms/Pill/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+interface PillProps extends React.ButtonHTMLAttributes<HTMLDivElement> {
+  className?: string
+  variant?: 'primary' | 'secondary' | 'danger' | 'shade' | 'border' | 'border_primary'
+  size?: 'small' | 'medium' | 'large' | 'extra_small' | 'extra_small_paddind_2'
+}
+
+const Pill: React.FC<PillProps> = ({ className = '', variant = 'primary', size = 'small', children, disabled, ...props }) => {
+  const variantClasses = {
+    primary: 'bg-primary-500 text-white',
+    secondary: 'bg-gray-500 text-white',
+    border: 'border border-neutral-200 text-neutral-800 shadow-button ',
+    border_primary: 'border border-primary text-primary ',
+    danger: 'bg-red-500 text-white',
+    shade: 'bg-secondary border border-shade-button-border text-primary-500 drop-shadow-sm',
+  }
+  const variantSizes = {
+    small: 'text-sm py-2 px-4 ',
+    medium: 'text-md py-2 px-4 ',
+    large: 'text-lg py-2 px-4 ',
+    extra_small: 'text-2xs py-1 px-2',
+    extra_small_paddind_2: 'text-3xs py-2 px-2',
+  }
+
+  const variantClass = variantClasses[variant]
+  const variantSize = variantSizes[size]
+  return (
+    <div
+      className={`${variantClass} ${variantSize} rounded-md active:scale-95 transition-transform duration-150 cursor-pointer ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Pill

src/components/atoms/PostImageSlider/index.tsx

@@ -22,7 +22,7 @@ type prop = {
 
 export default function PostImageSlider({ images, initialSlide, messageImage }: prop) {
   return (
-    <div className={` w-1/2 h-1/2 max-sm:w-11/12 max-sm:h-5/6  relative`}>
+    <div className={` w-3/4 h-1/2 max-sm:w-11/12 relative`}>
       <p className="bg-white rounded-full self-end w-max absolute z-50 right-2 top-2 text2xs p-1" onClick={() => closeImageModal()}>
         <RxCross2 />
       </p>

src/components/atoms/SelectUsers/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
+import avatar from '@assets/avatar.svg'
+import Image from 'next/image'
 
 type user = {
-  id: string
+  _id: string
   profileImageUrl: string
   firstName: string
   year: string
@@ -10,37 +12,40 @@ type user = {
 }
 
 type Props = {
-  setSelectedUsers: (value: any[]) => void
   selectedUsers: any
   user: user
+  setValue: (key: any, payload: any[]) => void
 }
 
-const SelectUsers = ({ selectedUsers, setSelectedUsers, user }: Props) => {
+const SelectUsers = ({ selectedUsers, user, setValue }: Props) => {
   const handleClick = (user: user) => {
-    if (selectedUsers?.some((selectedUser: user) => selectedUser.id == user.id)) {
-      const filterd = selectedUsers.filter((selectedUser: user) => selectedUser.id !== user.id)
-      setSelectedUsers(filterd)
+    if (selectedUsers?.some((selectedUser: user) => selectedUser?._id == user._id)) {
+      const filterUsers = selectedUsers.filter((selectedUser: user) => selectedUser._id !== user._id)
+      setValue('selectedUsers', filterUsers)
     } else {
-      setSelectedUsers([...selectedUsers, user])
+      setValue('selectedUsers', [...selectedUsers, user])
     }
   }
 
-  const isSelected = selectedUsers?.some((selectedUser: user) => selectedUser.id == user.id)
+  const isSelected = selectedUsers?.some((selectedUser: user) => selectedUser._id == user._id)
 
   return (
-    <div className="flex justify-start items-center gap-4 w-full ">
-      <input onChange={() => handleClick(user)} className="w-4" type="checkbox" checked={isSelected} />
+    <label
+      htmlFor={user._id}
+      onChange={() => handleClick(user)}
+      className="flex justify-start p-4 items-center gap-4 w-full hover:bg-surface-primary-50 cursor-pointer"
+    >
+      <input id={user._id} className="w-4" type="checkbox" checked={isSelected} />
       <div className="flex items-center gap-2">
-        <img className="w-10 h-10 rounded-full object-cover" src={user?.profileImageUrl} alt="" />
+        <Image width={40} height={40} className="w-10 h-10 rounded-full object-cover" src={user?.profileImageUrl || avatar} alt="" />
         <div>
           <p className="text-sm font-semibold">{user?.firstName}</p>
-          {/*<p className="text-2xs text-neutral-500">{data?.profile?.university_name ? data?.profile?.university_name : 'Not Availaible'}</p>*/}
           <p className="text-2xs text-neutral-500">
             {user.year} {user.degree} {user.major}
           </p>
         </div>
       </div>
-    </div>
+    </label>
   )
 }