From d5fdc64d692123c5f75b5b8e5cb1b167f0c10f24 Mon Sep 17 00:00:00 2001
From: Mathis <yidhra@tuta.io>
Date: Thu, 23 May 2024 15:54:58 +0200
Subject: [PATCH] Refactor profile display and improve error handling

This commit introduces significant changes to the profile which now has enhanced user information and a follow button. In addition, the alignment of certain elements is adjusted. The error handling process in the profile page has also been revamped for better UX.
---
 .../shelved.patch                             | 72 -------------------
 ...e_Update_at_5_16_24__8_59_AM__Changes_.xml |  4 --
 .idea/workspace.xml                           | 24 ++++---
 src/app/profile/page.tsx                      |  4 +-
 src/components/profile.tsx                    | 42 +++++++++--
 5 files changed, 53 insertions(+), 93 deletions(-)
 delete mode 100644 .idea/shelf/Uncommitted_changes_before_Update_at_5_16_24,_8_59_AM_[Changes]/shelved.patch
 delete mode 100644 .idea/shelf/Uncommitted_changes_before_Update_at_5_16_24__8_59_AM__Changes_.xml

diff --git a/.idea/shelf/Uncommitted_changes_before_Update_at_5_16_24,_8_59_AM_[Changes]/shelved.patch b/.idea/shelf/Uncommitted_changes_before_Update_at_5_16_24,_8_59_AM_[Changes]/shelved.patch
deleted file mode 100644
index c921d3c..0000000
--- a/.idea/shelf/Uncommitted_changes_before_Update_at_5_16_24,_8_59_AM_[Changes]/shelved.patch
+++ /dev/null
@@ -1,72 +0,0 @@
-Index: .idea/workspace.xml
-IDEA additional info:
-Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
-<+><?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<project version=\"4\">\n  <component name=\"AutoImportSettings\">\n    <option name=\"autoReloadType\" value=\"SELECTIVE\" />\n  </component>\n  <component name=\"ChangeListManager\">\n    <list default=\"true\" id=\"42d2b9e8-8d19-46be-8636-69ddba4519e4\" name=\"Changes\" comment=\"\">\n      <change beforePath=\"$PROJECT_DIR$/package.json\" beforeDir=\"false\" afterPath=\"$PROJECT_DIR$/package.json\" afterDir=\"false\" />\n      <change beforePath=\"$PROJECT_DIR$/pnpm-lock.yaml\" beforeDir=\"false\" afterPath=\"$PROJECT_DIR$/pnpm-lock.yaml\" afterDir=\"false\" />\n      <change beforePath=\"$PROJECT_DIR$/src/app/globals.css\" beforeDir=\"false\" afterPath=\"$PROJECT_DIR$/src/app/globals.css\" afterDir=\"false\" />\n      <change beforePath=\"$PROJECT_DIR$/src/app/layout.tsx\" beforeDir=\"false\" afterPath=\"$PROJECT_DIR$/src/app/layout.tsx\" afterDir=\"false\" />\n      <change beforePath=\"$PROJECT_DIR$/src/app/page.tsx\" beforeDir=\"false\" afterPath=\"$PROJECT_DIR$/src/app/page.tsx\" afterDir=\"false\" />\n      <change beforePath=\"$PROJECT_DIR$/tailwind.config.ts\" beforeDir=\"false\" afterPath=\"$PROJECT_DIR$/tailwind.config.ts\" afterDir=\"false\" />\n    </list>\n    <option name=\"SHOW_DIALOG\" value=\"false\" />\n    <option name=\"HIGHLIGHT_CONFLICTS\" value=\"true\" />\n    <option name=\"HIGHLIGHT_NON_ACTIVE_CHANGELIST\" value=\"false\" />\n    <option name=\"LAST_RESOLUTION\" value=\"IGNORE\" />\n  </component>\n  <component name=\"FileTemplateManagerImpl\">\n    <option name=\"RECENT_TEMPLATES\">\n      <list>\n        <option value=\"TypeScript File\" />\n        <option value=\"TypeScript JSX File\" />\n      </list>\n    </option>\n  </component>\n  <component name=\"Git.Settings\">\n    <option name=\"RECENT_GIT_ROOT_PATH\" value=\"$PROJECT_DIR$\" />\n  </component>\n  <component name=\"ProjectColorInfo\">{\n  &quot;associatedIndex&quot;: 2\n}</component>\n  <component name=\"ProjectId\" id=\"2gVILtfjAaVovgsNiYlLfUmWgWX\" />\n  <component name=\"ProjectViewState\">\n    <option name=\"hideEmptyMiddlePackages\" value=\"true\" />\n    <option name=\"showLibraryContents\" value=\"true\" />\n  </component>\n  <component name=\"PropertiesComponent\">{\n  &quot;keyToString&quot;: {\n    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,\n    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,\n    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,\n    &quot;last_opened_file_path&quot;: &quot;/home/avnyr/workspace/Simplon/brief-06-front&quot;,\n    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,\n    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,\n    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,\n    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,\n    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,\n    &quot;npm.dev.executor&quot;: &quot;Run&quot;,\n    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,\n    &quot;ts.external.directory.path&quot;: &quot;/home/avnyr/workspace/Simplon/brief-06-front/node_modules/typescript/lib&quot;,\n    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;\n  }\n}</component>\n  <component name=\"RunManager\">\n    <configuration name=\"dev\" type=\"js.build_tools.npm\" nameIsGenerated=\"true\">\n      <package-json value=\"$PROJECT_DIR$/package.json\" />\n      <command value=\"run\" />\n      <scripts>\n        <script value=\"dev\" />\n      </scripts>\n      <node-interpreter value=\"project\" />\n      <package-manager value=\"/usr/bin/yarn\" />\n      <envs />\n      <method v=\"2\" />\n    </configuration>\n  </component>\n  <component name=\"SharedIndexes\">\n    <attachedChunks>\n      <set>\n        <option value=\"bundled-js-predefined-1d06a55b98c1-91d5c284f522-JavaScript-WS-241.15989.105\" />\n      </set>\n    </attachedChunks>\n  </component>\n  <component name=\"SpellCheckerSettings\" RuntimeDictionaries=\"0\" Folders=\"0\" CustomDictionaries=\"0\" DefaultDictionary=\"application-level\" UseSingleDictionary=\"true\" transferred=\"true\" />\n  <component name=\"TaskManager\">\n    <task active=\"true\" id=\"Default\" summary=\"Default task\">\n      <changelist id=\"42d2b9e8-8d19-46be-8636-69ddba4519e4\" name=\"Changes\" comment=\"\" />\n      <created>1715776265663</created>\n      <option name=\"number\" value=\"Default\" />\n      <option name=\"presentableId\" value=\"Default\" />\n      <updated>1715776265663</updated>\n      <workItem from=\"1715776267209\" duration=\"3260000\" />\n      <workItem from=\"1715781823049\" duration=\"3317000\" />\n    </task>\n    <servers />\n  </component>\n  <component name=\"TypeScriptGeneratedFilesManager\">\n    <option name=\"version\" value=\"3\" />\n  </component>\n</project>
-Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
-<+>UTF-8
-===================================================================
-diff --git a/.idea/workspace.xml b/.idea/workspace.xml
---- a/.idea/workspace.xml	(revision 4559bc14311daecfe13fb72735751f1ad213dca3)
-+++ b/.idea/workspace.xml	(date 1715842583417)
-@@ -4,14 +4,7 @@
-     <option name="autoReloadType" value="SELECTIVE" />
-   </component>
-   <component name="ChangeListManager">
--    <list default="true" id="42d2b9e8-8d19-46be-8636-69ddba4519e4" name="Changes" comment="">
--      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
--      <change beforePath="$PROJECT_DIR$/pnpm-lock.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/pnpm-lock.yaml" afterDir="false" />
--      <change beforePath="$PROJECT_DIR$/src/app/globals.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/globals.css" afterDir="false" />
--      <change beforePath="$PROJECT_DIR$/src/app/layout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/layout.tsx" afterDir="false" />
--      <change beforePath="$PROJECT_DIR$/src/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/page.tsx" afterDir="false" />
--      <change beforePath="$PROJECT_DIR$/tailwind.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/tailwind.config.ts" afterDir="false" />
--    </list>
-+    <list default="true" id="42d2b9e8-8d19-46be-8636-69ddba4519e4" name="Changes" comment="" />
-     <option name="SHOW_DIALOG" value="false" />
-     <option name="HIGHLIGHT_CONFLICTS" value="true" />
-     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
-@@ -27,6 +20,10 @@
-   </component>
-   <component name="Git.Settings">
-     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
-+    <option name="UPDATE_TYPE" value="REBASE" />
-+  </component>
-+  <component name="PackageJsonUpdateNotifier">
-+    <dismissed value="$PROJECT_DIR$/package.json" />
-   </component>
-   <component name="ProjectColorInfo">{
-   &quot;associatedIndex&quot;: 2
-@@ -83,10 +80,33 @@
-       <updated>1715776265663</updated>
-       <workItem from="1715776267209" duration="3260000" />
-       <workItem from="1715781823049" duration="3317000" />
-+      <workItem from="1715785249624" duration="857000" />
-     </task>
-+    <task id="LOCAL-00001" summary="Add generated system configs, theme and page elements&#10;&#10;This commit adds the necessary configuration files for the system, including components for the Tailwind CSS and version control. It also includes code for creating a basic user interface with theme and page elements. Additionally, the commit includes new SVG resources for design elements.">
-+      <option name="closed" value="true" />
-+      <created>1715785408587</created>
-+      <option name="number" value="00001" />
-+      <option name="presentableId" value="LOCAL-00001" />
-+      <option name="project" value="LOCAL" />
-+      <updated>1715785408587</updated>
-+    </task>
-+    <task id="LOCAL-00002" summary="Extended README with project details and instructions&#10;&#10;An elaborate explanation of the project, development setup, and deployment instructions has been added to the README. This includes details of the technologies utilized, step-by-step instructions for running the development server, and links to useful resources for further readme.">
-+      <option name="closed" value="true" />
-+      <created>1715785443613</created>
-+      <option name="number" value="00002" />
-+      <option name="presentableId" value="LOCAL-00002" />
-+      <option name="project" value="LOCAL" />
-+      <updated>1715785443613</updated>
-+    </task>
-+    <option name="localTasksCounter" value="3" />
-     <servers />
-   </component>
-   <component name="TypeScriptGeneratedFilesManager">
-     <option name="version" value="3" />
-   </component>
-+  <component name="VcsManagerConfiguration">
-+    <MESSAGE value="Add generated system configs, theme and page elements&#10;&#10;This commit adds the necessary configuration files for the system, including components for the Tailwind CSS and version control. It also includes code for creating a basic user interface with theme and page elements. Additionally, the commit includes new SVG resources for design elements." />
-+    <MESSAGE value="Extended README with project details and instructions&#10;&#10;An elaborate explanation of the project, development setup, and deployment instructions has been added to the README. This includes details of the technologies utilized, step-by-step instructions for running the development server, and links to useful resources for further readme." />
-+    <option name="LAST_COMMIT_MESSAGE" value="Extended README with project details and instructions&#10;&#10;An elaborate explanation of the project, development setup, and deployment instructions has been added to the README. This includes details of the technologies utilized, step-by-step instructions for running the development server, and links to useful resources for further readme." />
-+  </component>
- </project>
-\ No newline at end of file
diff --git a/.idea/shelf/Uncommitted_changes_before_Update_at_5_16_24__8_59_AM__Changes_.xml b/.idea/shelf/Uncommitted_changes_before_Update_at_5_16_24__8_59_AM__Changes_.xml
deleted file mode 100644
index 25c65de..0000000
--- a/.idea/shelf/Uncommitted_changes_before_Update_at_5_16_24__8_59_AM__Changes_.xml
+++ /dev/null
@@ -1,4 +0,0 @@
-<changelist name="Uncommitted_changes_before_Update_at_5_16_24,_8_59_AM_[Changes]" date="1715842838887" recycled="true" deleted="true">
-  <option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_5_16_24,_8_59_AM_[Changes]/shelved.patch" />
-  <option name="DESCRIPTION" value="Uncommitted changes before Update at 5/16/24, 8:59 AM [Changes]" />
-</changelist>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 6dac8e2..6bcfea8 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,14 +5,11 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="42d2b9e8-8d19-46be-8636-69ddba4519e4" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/src/components/profile.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/services/account.service.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/services/request.service.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/types/userdata.type.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_5_16_24,_8_59_AM_[Changes]/shelved.patch" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_5_16_24__8_59_AM__Changes_.xml" beforeDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/app/profile/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/profile/page.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/register-form.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/register-form.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/services/register.service.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/profile.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/profile.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -90,7 +87,7 @@
       <workItem from="1715776267209" duration="3260000" />
       <workItem from="1715781823049" duration="3317000" />
       <workItem from="1715794057604" duration="8757000" />
-      <workItem from="1716275453494" duration="29883000" />
+      <workItem from="1716275453494" duration="39552000" />
     </task>
     <task id="LOCAL-00001" summary="Remove toast components and added register form&#10;&#10;The toast related components (toast.tsx, toaster.tsx, use-toast.ts) were removed from the code base. On the other hand, the register-form.tsx file was updated with a form for users to create an account. A new file toast-box.tsx was also added to display a custom message box.">
       <option name="closed" value="true" />
@@ -124,7 +121,15 @@
       <option name="project" value="LOCAL" />
       <updated>1716301028386</updated>
     </task>
-    <option name="localTasksCounter" value="5" />
+    <task id="LOCAL-00005" summary="Refactored register services and enhanced user profile functionality&#10;&#10;A new RequestService was introduced to standardize the HTTP requests, and the register service was refactored to use it. Improvements were made to the handling of user profile data along with error handling and display. New components were created for displaying the user profile, and changes to existing components were made to accommodate the service and data handling updates.">
+      <option name="closed" value="true" />
+      <created>1716390196148</created>
+      <option name="number" value="00005" />
+      <option name="presentableId" value="LOCAL-00005" />
+      <option name="project" value="LOCAL" />
+      <updated>1716390196148</updated>
+    </task>
+    <option name="localTasksCounter" value="6" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -135,6 +140,7 @@
     <MESSAGE value="Add ProfilePage, update RegisterForm and ToastBox components&#10;&#10;Added new ProfilePage component with necessary UI layout and buttons. Updated RegisterForm component with form validation using Zod schema and improved error handling. Updated icons in ToastBox component for proper display. Added necessary dependencies for form handling and validation." />
     <MESSAGE value="Integrate registration service and axios dependency&#10;&#10;The registration form now makes use of a new registration service. Axios, a necessary dependency for making HTTP requests in this service, has been added to the project. Additionally, logging has been improved in the user registration process to provide better debugging information." />
     <MESSAGE value="Refactor register service to enhance error handling&#10;&#10;Modified the doRegister function within register.service.ts to provide better error handling. Responses now return an object format, and an error catch block has been added. Additionally, minor changes were made to the workspace.xml." />
-    <option name="LAST_COMMIT_MESSAGE" value="Refactor register service to enhance error handling&#10;&#10;Modified the doRegister function within register.service.ts to provide better error handling. Responses now return an object format, and an error catch block has been added. Additionally, minor changes were made to the workspace.xml." />
+    <MESSAGE value="Refactored register services and enhanced user profile functionality&#10;&#10;A new RequestService was introduced to standardize the HTTP requests, and the register service was refactored to use it. Improvements were made to the handling of user profile data along with error handling and display. New components were created for displaying the user profile, and changes to existing components were made to accommodate the service and data handling updates." />
+    <option name="LAST_COMMIT_MESSAGE" value="Refactored register services and enhanced user profile functionality&#10;&#10;A new RequestService was introduced to standardize the HTTP requests, and the register service was refactored to use it. Improvements were made to the handling of user profile data along with error handling and display. New components were created for displaying the user profile, and changes to existing components were made to accommodate the service and data handling updates." />
   </component>
 </project>
\ No newline at end of file
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 59e9e1c..6d7d35c 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -41,7 +41,7 @@ export default function ProfilePage() {
 
 	if (httpError) {
 		return (
-			<main className="flex flex-col justify-evenly items-center antialiased h-full w-full gap-2">
+			<main className="flex flex-col justify-evenly items-center antialiased h-full w-full">
 				<div className={'flex flex-col md:flex-row justify-center items-center gap-2 md:scale-125 text-orange-500 font-bold'}>
 					<TriangleAlert className={
 						'md:scale-150'
@@ -54,7 +54,7 @@ export default function ProfilePage() {
 
 	if (userData?.email) {
 		return (
-			<main className="flex flex-col justify-evenly items-center antialiased h-full w-full">
+			<main className="flex flex-col justify-start items-center antialiased h-full w-full">
 				<Profile userData={userData}/>
 			</main>
 		);
diff --git a/src/components/profile.tsx b/src/components/profile.tsx
index 3f13c5b..f323112 100644
--- a/src/components/profile.tsx
+++ b/src/components/profile.tsx
@@ -1,26 +1,56 @@
 'use client'
 import {IUserDataProfile} from "@/types/userdata.type";
+import Link from "next/link";
+import {SendHorizontal} from "lucide-react";
+import {Button} from "@/components/ui/button";
 
 export function Profile({asAdmin, userData}: {asAdmin?: boolean, userData: IUserDataProfile}) {
 
 	return (
 		<section className={'flex flex-col justify-start items-center w-full min-h-screen'}>
-			<div className={'flew w-full h-24 md:h-32 bg-purple-600'}>
+			<div className={'flew w-full h-24 md:h-36 bg-accent opacity-55'}>
 
 			</div>
-			<div className={'flex flex-row justify-evenly w-full h-32 bg-purple-700'}>
-				<div className={'flex flex-row gap-2'}>
-					<div className={'w-16 h-16 rounded-full bg-purple-800 justify-center items-center'}>
+			<div className={'flex flex-col md:flex-row justify-evenly items-center w-full min-h-36 bg-accent md:px-12'}>
+
+				<div className={'flex flex-row justify-center md:justify-start md:ml-3 items-center gap-6 relative w-full h-full'}>
+
+					<div
+						className={'h-24 w-24 md:h-30 md:w-30 flex flex-row rounded-full bg-purple-800 justify-center items-center'}>
 						<p>
 							PP
 						</p>
 					</div>
+
+					<div className={'flex flex-col justify-start'}>
+						<span className={'flex flex-row pb-0 mb-0 gap-6'}>
+							<h1	className={'text-2xl font-bold'}>{userData.displayName}</h1>
+							<Link href={'#'} className={'pl-3 hover:text-primary transition-colors'}>
+								<SendHorizontal/>
+							</Link>
+						</span>
+						<p className={'italic font-light'}>{userData.username}</p>
+						<div className={'flex flex-row justify-evenly items-center gap-4 mt-4'}>
+							<Link href={"#"} className={'hover:font-bold'}>
+								<em>{userData.following.length}</em> Follow
+							</Link>
+							<Link href={'#'} className={'hover:font-bold'}>
+								<em>{userData.followers.length}</em> Followers
+							</Link>
+						</div>
+					</div>
+
+				</div>
+
+				<div className={'flex flex-row md:flex-col justify-evenly p-2 gap-2'}>
 					<div>
-						Title
+						{asAdmin && <Link href={'#'}>Edit Profile</Link>}
+						<Button asChild><Link href={'#'}>Follow</Link></Button>
 					</div>
 				</div>
-				<div></div>
+
 			</div>
+
 		</section>
 	)
 }
\ No newline at end of file