fix: resolved flaws

ptk1729 · Sep 25, 2024 · 3ff7f21 · 3ff7f21
1 parent 4e01608
commit 3ff7f21
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 45 deletions.
diff --git a/app/archive/page.js b/app/archive/page.js
@@ -5,7 +5,6 @@ import Cookies from 'js-cookie'
 import { MdDelete } from 'react-icons/md'
 import TimeAgo from '../timeAgo'
 
-
 function Archive() {
   const [archiveURLs, setArchiveURLs] = useState([])
   const [token, setToken] = useState(Cookies.get('jwt'))
@@ -125,11 +124,10 @@ function Archive() {
           </table>
         </div>
       ) : (
-        'fetching archive URLs...'
+        'No archive URLs'
       )}
     </section>
   )
 }
 
-
 export default Archive
diff --git a/app/email-verification/page.js b/app/email-verification/page.js
@@ -64,8 +64,8 @@ export default function Verification() {
             </label>
             <input
               type="text"
-              name="email"
-              id="email"
+              name="otp"
+              id="otp"
               value={otp}
               onChange={(e) => setOtp(e.target.value)}
               required

diff --git a/app/profile/page.js b/app/profile/page.js
@@ -1,8 +1,9 @@
 'use client'
 
 import Cookies from 'js-cookie'
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState } from 'react'
 import { FcCamera } from 'react-icons/fc'
+import Image from 'next/image'
 
 export default function ProfilePage() {
   const webURL = process.env.NEXT_PUBLIC_WEB_URL
@@ -15,61 +16,59 @@ export default function ProfilePage() {
   })
   const [previewFile, setPreviewFile] = useState('')
   const [token, setToken] = useState(Cookies.get('jwt'))
-  const [userData, setUserData] = useState('')
-
-  useEffect(() => {
-    const getUserDetails = async () => {
-      try {
-        const response = await fetch(webURL + 'auth/me', {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-          },
-        })
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch user data')
-        }
-
-        const userData = await response.json()
-        console.log(userData)
-        setUserData(userData)
-      } catch (error) {
-        console.error('Error fetching user data:', error)
-      }
-    }
+  const [userData, setUserData] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [message, setMessage] = useState('')
 
-    if (token) getUserDetails()
-  }, [token, webURL])
+  const getUserDetails = async () => {
+    try {
+      const response = await fetch(webURL + 'auth/me', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      })
 
-  useEffect(() => {
-    if (userData) {
+      if (!response.ok) {
+        throw new Error('Failed to fetch user data')
+      }
+
+      const data = await response.json()
+      console.log(data)
+      setUserData(data)
       setForm({
         image: '',
-        firstName: userData.firstName || '',
-        lastName: userData.lastName || '',
-        email: userData.email || '',
+        firstName: data.firstName || '',
+        lastName: data.lastName || '',
+        email: data.email || '',
       })
+    } catch (error) {
+      console.error('Error fetching user data:', error)
     }
-  }, [userData])
+  }
+
+  if (token && !userData) {
+    getUserDetails()
+  }
 
   const handleFileChange = (e) => {
     const file = e.target.files[0]
 
     if (file) {
       const imageUrl = URL.createObjectURL(file)
       setPreviewFile(imageUrl)
-      setForm({
-        ...form,
+      setForm((prevForm) => ({
+        ...prevForm,
         image: imageUrl,
-      })
+      }))
     }
   }
 
   const handleSubmit = async (e) => {
     e.preventDefault()
 
+    setLoading(true)
     try {
       const response = await fetch(webURL + 'auth/me', {
         method: 'PUT',
@@ -86,6 +85,18 @@ export default function ProfilePage() {
 
       const updatedUser = await response.json()
       setUserData(updatedUser)
+
+      setMessage(updatedUser.message)
+
+      //  update form with the new user data
+      setForm((prevForm) => ({
+        ...prevForm,
+        firstName: updatedUser.firstName || prevForm.firstName,
+        lastName: updatedUser.lastName || prevForm.lastName,
+        email: updatedUser.email || prevForm.email,
+      }))
+
+      setLoading(false)
     } catch (error) {
       console.error('Error updating profile:', error)
     }
@@ -99,10 +110,11 @@ export default function ProfilePage() {
       >
         <div className="flex flex-col items-center mb-6">
           <div className="relative h-24 w-24 mb-3">
-            <img
+            <Image
               className="h-24 w-24 object-cover border border-gray-300 rounded-full"
-              src={previewFile || '/default-avatar.png'} // Default avatar if no image
-              alt="Profile"
+              width={24}
+              height={24}
+              src={previewFile}
             />
             <FcCamera
               className="absolute bottom-0 right-0 cursor-pointer text-3xl bg-white p-1 rounded-full border border-gray-300"
@@ -130,6 +142,7 @@ export default function ProfilePage() {
             className="w-full p-2 border border-gray-300 rounded-lg"
             value={form.firstName}
             onChange={(e) => setForm({ ...form, firstName: e.target.value })}
+            required
           />
         </div>
         <div className="w-full mb-4">
@@ -146,6 +159,7 @@ export default function ProfilePage() {
             className="w-full p-2 border border-gray-300 rounded-lg"
             value={form.lastName}
             onChange={(e) => setForm({ ...form, lastName: e.target.value })}
+            required
           />
         </div>
         <div className="w-full mb-6">
@@ -159,13 +173,15 @@ export default function ProfilePage() {
             className="w-full p-2 border border-gray-300 rounded-lg"
             value={form.email}
             onChange={(e) => setForm({ ...form, email: e.target.value })}
+            required
           />
         </div>
+        {message && <p className="text-green-500 mt-4">{message}</p>}
         <button
           type="submit"
           className="w-full bg-teal-500 text-white py-2 rounded-lg hover:bg-teal-600 transition duration-300"
         >
-          Submit
+          {loading ? 'Submiting...' : 'Submit'}
         </button>
       </form>
     </section>

diff --git a/public/default-avatar.jpg b/public/default-avatar.jpg