[FE][CPF-37] Profile page (#50)

* feat: add profile page

* fix: svg properties

* build: add react-easy-crop package

* feat: add Avatar component

* feat: crop uploaded image

* linter

* build: add styled components

* linter

* feat: add Button component

* fix: Avatar size

* linter

* refactor: types

* refactor: profile settings

* feat: save cropped image

* linter

* fix: console errors

* linter

* feat: add delete confirmation modal

* linter

* feat: add user navigation

* fix: types

* linter

* feat: add const instead of hardcoded value

* feat: add styled components theme

* feat: add missing 'use client'

* feat: remove styled components

* linter

* chore: remove redundant file

* linter

* chore: add missing class

* chore: use routes from constant

* linter

* refactor: move handlers to hooks

* refactor: move mocked data out of component scope

* refactor: use Typography

* linter

* refactor: use Typography

* linter

frontend/.husky/pre-commit

@@ -2,3 +2,4 @@
 cd frontend
 
 yarn lint:fix && yarn format
+yarn compile

frontend/next.config.mjs

@@ -9,7 +9,7 @@ const nextConfig = {
       hostname: 'tailwindui.com',
       pathname: '/img/logos/mark.svg',
     }],
-  }
+  },
 };
 
 export default nextConfig;

frontend/package.json

@@ -19,6 +19,7 @@
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-easy-crop": "^5.0.7",
     "react-markdown": "^9.0.1",
     "react-tooltip": "^5.26.3",
     "remark-gfm": "^4.0.0",

frontend/src/api/bucket.ts

@@ -1,6 +1,6 @@
 import { mapKeysToCamelCase } from '@app/utils';
 import { API_URLS } from '.';
-import { Bucket } from '@app/types/common';
+import { Bucket } from '@app/types/library';
 
 async function getBucketDetails(slug: string) {
   const response = await fetch(`${API_URLS.library.buckets}/${slug}`);

frontend/src/api/ladder.ts

@@ -1,7 +1,7 @@
 import { mapKeysToCamelCase } from '@app/utils';
 import { API_URLS } from '.';
 import { LadderCardInterface } from '@app/components/common/LadderCard';
-import { LadderBand } from '@app/types/common';
+import { LadderBand } from '@app/types/library';
 
 async function getLadders() {
   const response = await fetch(API_URLS.library.ladders);

frontend/src/app/(app)/people/my-profile/page.tsx

@@ -0,0 +1,35 @@
+import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
+import { ProfileSettings } from '@app/components/modules/ProfileSetting';
+import { routes } from '@app/constants';
+
+// TODO: get data from api
+const data = {
+  firstName: 'Jane',
+  lastName: 'Edge',
+  email: 'example@gmail.com',
+  ladders: [
+    {
+      ladderName: 'Front end',
+      technology: 'React',
+      band: 2,
+    },
+  ],
+  notifications: {
+    slack: false,
+    email: false,
+  },
+};
+
+export default async function LibraryPage() {
+  return (
+    <div>
+      <Breadcrumbs
+        breadcrumbs={[
+          { label: 'People', href: routes.people.index, current: false },
+          { label: 'Profile setting', href: routes.people.myProfile, current: true },
+        ]}
+      />
+      <ProfileSettings data={data} />
+    </div>
+  );
+}

frontend/src/components/common/Avatar/Avatar.interface.ts

@@ -0,0 +1,8 @@
+export interface AvatarProps {
+  variant?: AvatarVariant;
+  firstName: string;
+  lastName: string;
+  imageUrl?: string | undefined;
+}
+
+export type AvatarVariant = '28' | '40' | '56' | '72' | '100' | '320';

frontend/src/components/common/Avatar/Avatar.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+import { AvatarProps, AvatarVariant } from './Avatar.interface';
+import { generateClassNames } from '@app/utils';
+
+const variants: {
+  [key in AvatarVariant]: string;
+} = {
+  '28': 'w-7 h-7 text-sm text-xs',
+  '40': 'w-10 h-10 text-base',
+  '56': 'w-14 h-14 text-xl',
+  '72': 'w-[72px] h-[72px] text-2xl',
+  '100': 'w-[100px] h-[100px] text-4xl',
+  '320': 'w-80 h-80 text-5xl',
+};
+
+export const Avatar: React.FC<AvatarProps> = ({ firstName, lastName, imageUrl, variant = '40' }) => {
+  const avatarClass = generateClassNames(
+    'rounded-full bg-blue-700 flex justify-center items-center',
+    variants[variant],
+  );
+
+  return (
+    <div className={avatarClass}>
+      {imageUrl ? (
+        <Image className="inline-block h-full w-full rounded-full" src={imageUrl} alt="User avatar" />
+      ) : (
+        <span className="text-white">
+          {firstName[0]}
+          {lastName[0]}
+        </span>
+      )}
+    </div>
+  );
+};

frontend/src/components/common/Avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar } from './Avatar';

frontend/src/components/common/BucketCard/BucketCard.interface.ts

@@ -1,4 +1,4 @@
-import { LadderBandBucket } from '@app/types/common';
+import { LadderBandBucket } from '@app/types/library';
 
 export interface BucketCardProps {
   ladderSlug: string;

frontend/src/components/common/Card/Card.interface.ts

@@ -0,0 +1,3 @@
+export interface CardProps {
+  title: string;
+}

frontend/src/components/common/Card/Card.tsx

@@ -0,0 +1,16 @@
+import { CardProps } from './Card.interface';
+import { PropsWithChildren } from 'react';
+import { Typography } from '@app/components/common/Typography';
+
+export const Card: React.FC<PropsWithChildren<CardProps>> = ({ title, children }) => {
+  return (
+    <div className="rounded-xl bg-white shadow-sm ring-1 ring-navy-200/5 lg:w-[750px]">
+      <div className="px-4 py-6 sm:p-8">
+        <Typography as="h3" variant="head-s/semibold">
+          {title}
+        </Typography>
+        <div className="py-8">{children}</div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/common/Card/index.ts

@@ -0,0 +1 @@
+export { Card } from './Card';

frontend/src/components/common/Modal/Modal.interface.ts

@@ -4,4 +4,5 @@ export interface ModalProps extends PropsWithChildren {
   open: boolean;
   onClose: () => void;
   title: string;
+  hideHeaderCloseButton?: boolean;
 }

frontend/src/components/common/Modal/Modal.tsx

@@ -7,7 +7,7 @@ import { Inter } from 'next/font/google';
 
 const inter = Inter({ subsets: ['latin'] });
 
-export const Modal = ({ children, open, onClose, title }: ModalProps) => (
+export const Modal = ({ children, open, onClose, title, hideHeaderCloseButton }: ModalProps) => (
   <Transition.Root show={open} as={Fragment}>
     <Dialog as="div" className={`${inter.className} relative z-50`} onClose={onClose}>
       <Transition.Child
@@ -22,8 +22,8 @@ export const Modal = ({ children, open, onClose, title }: ModalProps) => (
         <div className="fixed inset-0 h-full w-full bg-navy-50/75 transition-opacity" />
       </Transition.Child>
 
-      <div className="fixed inset-0 z-10">
-        <div className="flex h-full items-center justify-center text-center">
+      <div className="fixed inset-0 z-10 flex h-full items-center justify-center">
+        <div className="flex max-h-full items-center justify-center text-center">
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -38,14 +38,13 @@ export const Modal = ({ children, open, onClose, title }: ModalProps) => (
                 <Dialog.Title as="h3" className="text-xl font-medium text-navy-900">
                   {title}
                 </Dialog.Title>
-                <button onClick={onClose} type="button">
-                  <CloseIcon className="h-5 w-5 text-navy-600 hover:text-navy-900" aria-hidden="true" />
-                </button>
+                {!hideHeaderCloseButton && (
+                  <button onClick={onClose} type="button">
+                    <CloseIcon className="h-5 w-5 text-navy-600 hover:text-navy-900" aria-hidden="true" />
+                  </button>
+                )}
               </div>
-
-              <Dialog.Description className="h-[calc(100%-6rem)] overflow-y-auto px-8 py-5">
-                {children}
-              </Dialog.Description>
+              <div className="max-h-[calc(100%-6rem)] overflow-y-auto px-8 py-5">{children}</div>
             </Dialog.Panel>
           </Transition.Child>
         </div>

frontend/src/components/modules/AdvancementLevel/AdvancemetLevel.interface.ts

@@ -1,4 +1,4 @@
-import { AdvancementLevel } from '@app/types/common';
+import { AdvancementLevel } from '@app/types/library';
 
 export interface AdvancementLevelProps {
   data: AdvancementLevel;

frontend/src/components/modules/BucketDetails/BucketDetails.interface.ts

@@ -1,4 +1,4 @@
-import { Bucket } from '@app/types/common';
+import { Bucket } from '@app/types/library';
 
 export interface BucketDetailsProps {
   data: Bucket;

frontend/src/components/modules/LadderDetails/LadderDetails.interface.ts

@@ -1,4 +1,4 @@
-import { LadderBand } from '@app/types/common';
+import { LadderBand } from '@app/types/library';
 
 export interface LadderDetailsProps {
   ladder: LadderBand;

frontend/src/components/modules/LadderDetails/LadderDetails.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from 'react-tooltip';
 import { LadderDetailsProps } from '@app/components/modules/LadderDetails/LadderDetails.interface';
 import { InfoIcon } from '@app/static/icons/InfoIcon';
-import { LadderBandBucket } from '@app/types/common';
+import { LadderBandBucket } from '@app/types/library';
 import { BucketCard } from '@app/components/common/BucketCard';
 import { AccordionCard } from '@app/components/common/AccordionCard';
 import { AccordionList } from '@app/components/common/AccordionList';

frontend/src/components/modules/LibraryDetailed/LibraryDetailed.interface.ts

@@ -1,4 +1,4 @@
-import { LadderBand } from '@app/types/common';
+import { LadderBand } from '@app/types/library';
 
 export interface LibraryDetailedProps {
   ladderSlug: string;

frontend/src/components/modules/ProfileSetting/ProfileSetting.hooks.ts

@@ -0,0 +1,65 @@
+import { ProfileSettingsHook } from '@app/components/modules/ProfileSetting/ProfileSetting.interface';
+import { ChangeEvent, useState } from 'react';
+import { getCroppedImg, readFile } from '@app/utils';
+import { Area } from 'react-easy-crop';
+
+export const useProfileSettings = (): ProfileSettingsHook => {
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [cropModalOpen, setCropModalOpen] = useState(false);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+
+  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files.length > 0) {
+      const file = event.target.files?.[0];
+
+      const imageDataUrl = await readFile(file);
+      setImageSrc(imageDataUrl);
+      setCropModalOpen(true);
+    }
+  };
+
+  const handleCloseCropModal = () => {
+    setCropModalOpen(false);
+    setImageSrc(null);
+  };
+
+  const handleCloseDeleteModal = () => {
+    setDeleteModalOpen(false);
+  };
+
+  const handleOpenDeleteModal = () => setDeleteModalOpen(true);
+
+  const handleSaveCroppedImage = async (croppedAreaPixels: Area | null) => {
+    if (!croppedAreaPixels || !imageSrc) {
+      // TODO
+      return;
+    }
+
+    try {
+      const img = await getCroppedImg(imageSrc, croppedAreaPixels);
+      if (img) {
+        // TODO: send new avatar to api
+        setCropModalOpen(false);
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleDeleteImage = () => {
+    // TODO: delete photo
+    setDeleteModalOpen(false);
+  };
+
+  return {
+    imageSrc,
+    handleFileChange,
+    cropModalOpen,
+    handleCloseCropModal,
+    handleSaveCroppedImage,
+    deleteModalOpen,
+    handleCloseDeleteModal,
+    handleDeleteImage,
+    handleOpenDeleteModal,
+  };
+};

frontend/src/components/modules/ProfileSetting/ProfileSetting.interface.ts

@@ -0,0 +1,19 @@
+import { ChangeEvent } from 'react';
+import { Area } from 'react-easy-crop';
+import { User } from '@app/types/people';
+
+export interface ProfileSettingsProps {
+  data: User;
+}
+
+export interface ProfileSettingsHook {
+  imageSrc: string | null;
+  handleFileChange: (event: ChangeEvent<HTMLInputElement>) => Promise<void>;
+  cropModalOpen: boolean;
+  deleteModalOpen: boolean;
+  handleCloseCropModal: () => void;
+  handleCloseDeleteModal: () => void;
+  handleDeleteImage: () => void;
+  handleSaveCroppedImage: (croppedAreaPixels: Area | null) => void;
+  handleOpenDeleteModal: () => void;
+}