AAiT.web.g1.admas-terefe.personal-info-edit

aait/web/group-1/app/profile/account/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import React from 'react';
+import Image from 'next/image';
+
+export default function Page() {
+  return (
+    <div className='flex flex-col space-y-16 font-montserrat'>
+      <div className='flex justify-between'>
+        <div>
+          <h3 className='text-[13px] text-[#5D5D5D] font-semibold'>Manage Your Account</h3>
+          <p className='text-[10px] text-[#868686] font-light'>You can change your password here</p>
+        </div>
+        <button className='text-[10px] font-semibold bg-[#264FAD] rounded-md text-white px-12 py-2'>Save Changes</button>
+      </div>
+      <form className='grid grid-cols-3 place-items-start items-center text-[11px] font-poppins w-full max-w-md mx-auto gap-y-5'>
+        <label className='col-span-1 font-semibold text-[#565656]'>Current Password</label>
+        <div className='col-span-2 flex justify-between items-center py-3 px-5 rounded-lg bg-[#EFF3F9] w-full'>
+          <input
+            type="password"
+            className='focus:outline-none bg-[#EFF3F9]'
+            placeholder='Enter your current password'
+            />
+          <Image
+            src='/images/toggle-password-status.png'
+            width={ 12 }
+            height={ 12 }
+            alt=' toggle password visiblity'
+            className=''
+          />
+        </div>
+        <label className='col-span-1 font-semibold text-[#565656]'>New Password</label>
+        <div className='col-span-2 flex justify-between items-center py-3 px-5 rounded-lg bg-[#EFF3F9] w-full'>
+          <input
+            type="password"
+            className='focus:outline-none bg-[#EFF3F9]'
+            placeholder='Enter new password'
+            />
+          <Image
+            src='/images/toggle-password-status.png'
+            width={ 12 }
+            height={ 12 }
+            alt=' toggle password visiblity'
+            className=''
+          />
+        </div>
+        <label className='col-span-1 font-semibold text-[#565656]'>Confirm Password</label>
+        <div className='col-span-2 flex justify-between items-center py-3 px-5 rounded-lg bg-[#EFF3F9] w-full'>
+          <input
+            type="password"
+            className='focus:outline-none bg-[#EFF3F9]'
+            placeholder='Confirm new password'
+            />
+          <Image
+            src='/images/toggle-password-status.png'
+            width={ 12 }
+            height={ 12 }
+            alt=' toggle password visiblity'
+            className=''
+          />
+        </div>
+      </form>
+    </div>
+  );
+}
+

aait/web/group-1/app/profile/layout.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+
+export default function ProfileLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const links: string[] = [ 'Personal Information', 'My Blogs', 'Account Setting' ];
+  const linkPathname = new Map<string, string>([
+    ['Personal Information', '/profile'],
+    ['My Blogs', '/profile/my-blogs'],
+    ['Account Setting', '/profile/account']
+  ]);
+  const pathname = usePathname();
+
+  return (
+    <div className='px-[100px] flex flex-col space-y-5 font-montserrat'>
+      <h1 className='text-[22px] font-semibold'>Profile</h1>
+      <div className={ `flex justify-between items-center text-md border-b ${ pathname === '/profile/my-blogs' ? 'pb-2' : 'pb-4' }` }>
+        <div className='flex space-x-10 text-[12px] text-[#494949] font-semibold'>
+          {
+            links.map(link => (
+              <Link
+                href={ linkPathname.get(link) as string }
+                className={
+                  pathname === linkPathname.get(link) ? 'border-b-2 border-[#264FAD] -mb-4' : ''
+                }
+              >{ link }</Link>
+            ))
+          }
+        </div>
+        { pathname === linkPathname.get('My Blogs') && <button className='text-[10px] font-semibold bg-[#264FAD] rounded-md text-white px-12 py-2'>New Blog</button> }
+      </div>
+      { children }
+    </div>
+  );
+}
+
+
+
+
+
+

aait/web/group-1/app/profile/my-blogs/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Card from '@/components/profile/Card';
+
+export default function Page() {
+  return (
+    <div className='flex flex-col space-y-5 font-montserrat'>
+      <div>
+        <h3 className='text-[13px] text-[#5D5D5D] font-semibold'>Manage Blogs</h3>
+        <p className='text-[10px] text-[#868686] font-light'>Edit, Delete and View the status of your blogs</p>
+      </div>
+      <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 place-items-center gap-4'>
+        {Array.from({ length: 8 }).map((_, index) => (
+          <div key={index} className=''>
+            <Card />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

aait/web/group-1/app/profile/page.tsx

@@ -0,0 +1,118 @@
+'use client'
+import React, { useRef, useState } from 'react';
+import Image from 'next/image';
+import { useEditProfileMutation } from '@/store/features/user/userApi';
+
+const userData = localStorage.getItem('user');
+const currUser = userData ? JSON.parse(userData) : null;
+
+export default function Page() {
+  const trimmedName = currUser?.userName.trim()
+  const [fName, lName] = trimmedName.split(/\s+/)
+  const fileInputRef = useRef(null)
+  const [firstName, setFirstName] = useState(fName || '')
+  const [lastName, setLastName] = useState(lName || '')
+  const [email, setEmail] = useState(currUser?.userEmail || '')
+  const [photo, setPhoto] = useState<File | null>(null)
+  const [editProfile, {isError, isLoading, isSuccess}] = useEditProfileMutation()
+
+  const handleDivClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if(event.target.files) {
+      const file = event.target.files[0];
+      setPhoto(file)
+    }
+  }
+
+  const handleSaveChanges = async (event: React.FormEvent) => {
+    event.preventDefault()
+    const newUserData = new FormData()
+    newUserData.append("name", `${firstName} ${lastName}`)
+    newUserData.append("email", email)
+    if(photo) {
+      newUserData.append("image", photo)
+    }
+
+    editProfile(newUserData)
+
+
+  }
+
+  return (
+    <div className='flex flex-col space-y-5 font-montserrat'>
+      <div className='flex justify-between'>
+        <div>
+          <h3 className='text-[13px] text-[#5D5D5D] font-semibold'>Manage Personal Information</h3>
+          <p className='text-[10px] text-[#868686] font-light'>Add all the required information about yourself</p>
+        </div>
+        <button 
+          className='text-[10px] font-semibold bg-[#264FAD] active:bg-blue-500 rounded-md text-white px-12 py-2'
+          onClick={handleSaveChanges}
+        >
+          Save Changes
+        </button>
+      </div>
+      <div className='grid grid-cols-3 lg:pr-[300px] gap-10 text-[10px] md:text-[11px]'>
+        <h4 className=' text-[#565656] font-semibold font-poppins col-span-1'>Name <span className='text-[#F64040]'>*</span></h4>
+        <input
+          type="text"
+          className=" text-[#565656] font-semibold font-poppins col-span-1 border border-gray-300 rounded-lg py-2 px-3"
+          value={firstName}
+          onChange={(e) => setFirstName(e.target.value)}
+          />
+        <input
+          type="text"
+          className=" text-[#565656] font-semibold font-poppins col-span-1 border border-gray-300 rounded-lg py-2 px-3"
+          value={lastName}
+          onChange={(e) => setLastName(e.target.value)}
+          />
+        <h4 className=' text-[#565656] font-semibold font-poppins col-span-1'>Email <span className='text-[#F64040]'>*</span></h4>
+        <input
+          type="email"
+          className=" text-[#565656] font-semibold font-poppins col-span-2 border border-gray-300 rounded-lg py-2 px-3"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          />
+        <h4 className=' text-[#565656] font-semibold font-poppins col-span-1'>Your Photo <span className='text-[#F64040]'>*</span></h4>
+        <div className='col-span-2 flex items-start justify-center md:justify-start space-x-0 md:space-x-16'>
+          <Image
+              className='hidden md:block'
+              src={photo ? URL.createObjectURL(photo): currUser?.userProfile}
+              width={ 50 }
+              height={ 50 }
+              alt='small profile image'
+            />
+          <div 
+            className='text-center border flex flex-col justify-center items-center border-gray-300 rounded-lg h-full px-10 py-12'
+            onClick={handleDivClick}
+          >
+            <Image
+              src='/images/file-upload-image.png'
+              width={ 25 }
+              height={ 25 }
+              alt='file upload image'
+            />
+            <p className='text-[10px] font-semibold sm:text-[11px] text-[#858585]'> 
+              {' '}
+              <span className='text-[#565656]'>Clik to upload</span> or drag and drop
+              SVG, PNG, JPG or GIF(max 800x400px)
+            </p>
+            <input
+              type='file'
+              ref={fileInputRef}
+              style={{ display: 'none' }}
+              onChange={handleFileChange}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+

aait/web/group-1/components/profile/Card.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+
+
+const Card = () => {
+  return (
+    <div className='col-span-1 font-montserrat shadow-sm rounded-md'>
+      <Image
+        className='object-cover w-full'
+        src='/images/test-card-image.png'
+        alt='test card image'
+        width={ 420 }
+        height={ 300 }
+      />
+
+      <div className='px-5 flex flex-col items-start space-y-5 py-5'>
+
+        <h4 className='text-gray-700 text-sm'>Design Liberalized Exchange Rate Management</h4>
+
+        <div className='flex justify-start items-center space-x-3'>
+          <Image
+            className='rounded-full'
+            src='/images/Image.png'
+            alt='test avatar image'
+            width={ 26 }
+            height={ 26 }
+          />
+          <p className='text-[11px] text-[#B9B9C3] font-light'>by <span className='text-[#6E6B7B] font-semibold'>Fred Boone</span> | Jan 10, 2020</p>
+        </div>
+
+        <div className='flex items-center justify-start space-x-4'>
+          <div className='text-[9px] px-4 py-2 font-semibold text-gray-400 rounded-full border bg-gray-200'>UI/UX</div>
+          <div className='text-[9px] px-4 py-2 font-semibold text-gray-400 rounded-full border bg-gray-200'>DEVELOPMENT</div>
+        </div>
+
+        <div className='text-[11px] text-gray-500'>A little personality goes a long way, especially on a business blog. So don’t be afraid to let loose.</div>
+
+        <div className='flex justify-between items-center w-full border-t pt-4 text-[12px]'>
+          <div className='flex justify-start items-center space-x-1'>
+            <Image
+              className='w-[13px]'
+              src='/images/test-pending.png'
+              alt='pending image'
+              width={ 20 }
+              height={ 20 }
+            />
+            <span className='text-[#FF9F43] font-semibold'>Pending</span>
+          </div>
+          <div className='text-[#7367F0] font-semibold'>Read More</div>
+        </div>
+
+      </div>
+
+    </div>
+  )
+}
+
+export default Card;

aait/web/group-1/store/features/user/userApi.ts

@@ -0,0 +1,29 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+const BASE_URL = 'https://a2sv-backend.onrender.com/api';
+
+export const profileApi = createApi({
+  reducerPath: 'profileApi',
+  baseQuery: fetchBaseQuery({ 
+    baseUrl: BASE_URL,
+    prepareHeaders: (headers, { getState }) => {
+      const userData = localStorage.getItem('user');
+      const token = userData ? JSON.parse(userData)?.token : null;
+      if(token) {
+        headers.set('Authorization', `Bearer ${token}`);
+      }
+      return headers;
+    }
+  }),
+  endpoints: (builder) => ({
+    editProfile: builder.mutation({
+      query: (newUserData) => ({
+        url: '/auth/edit-profile',
+        method: 'PATCH',
+        body: newUserData,
+      }),
+    }),
+  }),
+});
+
+export const { useEditProfileMutation } = profileApi;

aait/web/group-1/store/index.ts

@@ -1,15 +1,17 @@
 import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
 import { authApi } from './auth/authApi'
 import { blogsApi } from './features/blogs/blogs'
-
+import { profileApi } from './features/user/userApi'
 
 export const store = configureStore({
   reducer: {
     [authApi.reducerPath]: authApi.reducer,
     [blogsApi.reducerPath]: blogsApi.reducer,
+    [profileApi.reducerPath]: profileApi.reducer,
   },
 
-  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(authApi.middleware, blogsApi.middleware)
+  middleware: getDefaultMiddleware => getDefaultMiddleware()
+  .concat(authApi.middleware, blogsApi.middleware, profileApi.middleware)
 })
 
 export type RootState = ReturnType<typeof store.getState>