diff --git a/daily-thought-frontend/src/pages/profile.tsx b/daily-thought-frontend/src/pages/profile.tsx index a65b8d1a36e88e06b3acbe98c48879fa3c0a4c7b..5bbf95db078c06f6c1c4d18bf52cc556210c34fc 100644 --- a/daily-thought-frontend/src/pages/profile.tsx +++ b/daily-thought-frontend/src/pages/profile.tsx @@ -1,34 +1,35 @@ -import NavBar from "@/components/navigation/NavBar"; -import { User } from "@/types/user"; -import { PhotoIcon, UserCircleIcon } from "@heroicons/react/24/outline"; -import Router from "next/router"; -import { FormEvent, useEffect, useState } from "react"; +import NavBar from '@/components/navigation/NavBar'; +import { User } from '@/types/user'; +import { PhotoIcon, UserCircleIcon } from '@heroicons/react/24/outline'; +import Router from 'next/router'; +import { FormEvent, useEffect, useState } from 'react'; const Profile = () => { - const [user, setUser] = useState<undefined | User>(undefined) + const [user, setUser] = useState<undefined | User>(undefined); const fetchUser = async () => { - const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/user/${sessionStorage.getItem('username')}` - const response = await fetch(endpoint) - return await response.json() - - } + const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/user/${sessionStorage.getItem( + 'username' + )}`; + const response = await fetch(endpoint); + return await response.json(); + }; useEffect(() => { - if(!user){ - fetchUser().then(res => { - const {_id, username, email, profile, firstName, lastName } = res - setUser({id: _id, email, username, profile, firstName, lastName}) - }) + if (!user) { + fetchUser().then((res) => { + const { _id, username, email, profile, firstName, lastName } = res; + setUser({ id: _id, email, username, profile, firstName, lastName }); + }); } - }) + }); const handleItemChange = (item: string, value: string) => { - if(user){ - const updated = {...user, ...{[item]: value}} - setUser(updated) + if (user) { + const updated = { ...user, ...{ [item]: value } }; + setUser(updated); } - } + }; const handleSubmit = async (event: FormEvent) => { const JSONdata = JSON.stringify({ @@ -37,20 +38,19 @@ const Profile = () => { profile: user?.profile, firstName: user?.firstName, lastName: user?.lastName - }) - const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/updateuser` + }); + const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/updateuser`; const options = { method: 'PUT', headers: { - 'Authorization': `Bearer ${sessionStorage.getItem("token")}`, - 'Content-Type': 'application/json', + Authorization: `Bearer ${sessionStorage.getItem('token')}`, + 'Content-Type': 'application/json' }, - body: JSONdata, - } - const response = await fetch(endpoint, options) - const result = await response.json() - - } + body: JSONdata + }; + const response = await fetch(endpoint, options); + const result = await response.json(); + }; return ( <div className="w-full h-screen flex flex-col"> @@ -58,133 +58,155 @@ const Profile = () => { <NavBar user={user} /> </div> - <form className="max-w-4xl mx-auto pt-10 p-3" onSubmit={(e) => handleSubmit(e)}> - <div className="h-16"></div> - <div className="space-y-12 w-full"> - <div className="border-b border-gray-900/10 pb-12"> - <h2 className="text-base font-semibold leading-7 text-gray-900">Profile</h2> - <p className="mt-1 text-sm leading-6 text-gray-600"> - This information will be displayed publicly so be careful what you share. - </p> - - <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> - <div className="sm:col-span-3"> - <label htmlFor="first-name" className="block text-sm font-medium leading-6 text-gray-900"> - First name - </label> - <div className="mt-2"> - <input - type="text" - name="first-name" - id="first-name" - autoComplete="given-name" - className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" - value={user?.firstName} - onChange={(e) => handleItemChange("firstName", e.target.value)} - /> + <form className="max-w-4xl mx-auto pt-10 p-3" onSubmit={(e) => handleSubmit(e)}> + <div className="h-16"></div> + <div className="space-y-12 w-full"> + <div className="border-b border-gray-900/10 pb-12"> + <h2 className="text-base font-semibold leading-7 text-gray-900">Profile</h2> + <p className="mt-1 text-sm leading-6 text-gray-600"> + This information will be displayed publicly so be careful what you share. + </p> + + <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> + <div className="sm:col-span-3"> + <label + htmlFor="first-name" + className="block text-sm font-medium leading-6 text-gray-900" + > + First name + </label> + <div className="mt-2"> + <input + type="text" + name="first-name" + id="first-name" + autoComplete="given-name" + className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + value={user?.firstName} + onChange={(e) => handleItemChange('firstName', e.target.value)} + /> + </div> </div> - </div> - <div className="sm:col-span-3"> - <label htmlFor="last-name" className="block text-sm font-medium leading-6 text-gray-900"> - Last name - </label> - <div className="mt-2"> - <input - type="text" - name="last-name" - id="last-name" - autoComplete="family-name" - className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" - value={user?.lastName} - onChange={(e) => handleItemChange("lastName", e.target.value)} - /> - </div> - </div> - - - <div className="sm:col-span-4"> - <label htmlFor="username" className="block text-sm font-medium leading-6 text-gray-900"> - Username - </label> - <div className="mt-2"> - <div className="flex bg-gray-100 rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md"> - <span className="flex select-none items-center pl-3 text-gray-500 sm:text-sm">dialy.com/</span> + <div className="sm:col-span-3"> + <label + htmlFor="last-name" + className="block text-sm font-medium leading-6 text-gray-900" + > + Last name + </label> + <div className="mt-2"> <input type="text" - name="username" - id="username" - autoComplete="username" - className="block flex-1 border-0 bg-transparent py-1.5 pl-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" - placeholder="janesmith" - value={user?.username} - onChange={(e) => handleItemChange("username", e.target.value)} - disabled + name="last-name" + id="last-name" + autoComplete="family-name" + className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + value={user?.lastName} + onChange={(e) => handleItemChange('lastName', e.target.value)} /> </div> </div> - </div> - <div className="col-span-full"> - <label htmlFor="photo" className="block text-sm font-medium leading-6 text-gray-900"> - Photo - </label> - <div className="mt-2 flex items-center gap-x-3"> - <UserCircleIcon className="h-12 w-12 text-gray-300" aria-hidden="true" /> - <button - type="button" - className="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" + <div className="sm:col-span-4"> + <label + htmlFor="username" + className="block text-sm font-medium leading-6 text-gray-900" > - Change - </button> + Username + </label> + <div className="mt-2"> + <div className="flex bg-gray-100 rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md"> + <span className="flex select-none items-center pl-3 text-gray-500 sm:text-sm"> + dialy.com/ + </span> + <input + type="text" + name="username" + id="username" + autoComplete="username" + className="block flex-1 border-0 bg-transparent py-1.5 pl-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" + placeholder="janesmith" + value={user?.username} + onChange={(e) => handleItemChange('username', e.target.value)} + disabled + /> + </div> + </div> </div> - </div> - + <div className="col-span-full"> + <label + htmlFor="photo" + className="block text-sm font-medium leading-6 text-gray-900" + > + Photo + </label> + <div className="mt-2 flex items-center gap-x-3"> + <UserCircleIcon className="h-12 w-12 text-gray-300" aria-hidden="true" /> + <button + type="button" + className="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" + > + Change + </button> + </div> + </div> + </div> </div> - </div> - - <div className="border-b border-gray-900/10 pb-12"> - <h2 className="text-base font-semibold leading-7 text-gray-900">Personal Information</h2> - <p className="mt-1 text-sm leading-6 text-gray-600">This won't be shared with anyone.</p> - <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> - <div className="sm:col-span-4"> - <label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900"> - Email address - </label> - <div className="mt-2"> - <input - id="email" - name="email" - type="email" - autoComplete="email" - className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" - value={user?.email} - onChange={(e) => handleItemChange("email", e.target.value)} - /> + <div className="border-b border-gray-900/10 pb-12"> + <h2 className="text-base font-semibold leading-7 text-gray-900"> + Personal Information + </h2> + <p className="mt-1 text-sm leading-6 text-gray-600"> + This won't be shared with anyone. + </p> + + <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> + <div className="sm:col-span-4"> + <label + htmlFor="email" + className="block text-sm font-medium leading-6 text-gray-900" + > + Email address + </label> + <div className="mt-2"> + <input + id="email" + name="email" + type="email" + autoComplete="email" + className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + value={user?.email} + onChange={(e) => handleItemChange('email', e.target.value)} + /> + </div> </div> </div> </div> </div> + <div className="mt-6 flex items-center justify-end gap-x-6"> + <button + type="button" + className="text-sm font-semibold leading-6 text-gray-900" + onClick={() => { + Router.push('/feed'); + }} + > + Cancel + </button> + <button + type="submit" + className="rounded-md bg-c-pink px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-c-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + > + Save + </button> + </div> + </form> + </div> + ); +}; - </div> - - <div className="mt-6 flex items-center justify-end gap-x-6"> - <button type="button" className="text-sm font-semibold leading-6 text-gray-900" onClick={() => {Router.push("/feed")}}> - Cancel - </button> - <button - type="submit" - className="rounded-md bg-c-pink px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-c-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" - > - Save - </button> - </div> - </form> - </div> - ) -} - -export default Profile; \ No newline at end of file +export default Profile;