WorkSimplon/brief-06-front
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor profile display and improve error handling

Browse Source 
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.
This commit is contained in:
Mathis H (Avnyr) 2024-05-23 15:54:58 +02:00
parent c0327f9607
commit d5fdc64d69
Signed by: Mathis
GPG Key ID: DD9E0666A747D126
5 changed files with 53 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
.idea/shelf/Uncommitted_changes_before_Update_at_5_16_24,_8_59_AM_[Changes]/shelved.patch generated
View File

@ -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

4
.idea/shelf/Uncommitted_changes_before_Update_at_5_16_24__8_59_AM__Changes_.xml generated
View File

@ -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>

24
.idea/workspace.xml generated
View File

@ -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>

4
src/app/profile/page.tsx
View File

@ -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>
);

42
src/components/profile.tsx
View File

@ -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>
)
}