TP_UI - Issues 137 & 148 - Adds image upload component to Profile Page

src/stories/Inputs/Upload/Upload.tsx

@@ -31,6 +31,8 @@ interface Props {
   accept?: string;
   /** Can the user upload more than one file? */
   isMultiple?: boolean;
+  /** Optional testId string */
+  testId?: string;
   /** onChange callback - will always return a FileList */
   onChange: (fileList: FileList) => void;
 }
@@ -43,6 +45,7 @@ export const Upload = ({
   hasFailed = false,
   accept = '*',
   isMultiple = false,
+  testId = 'upload-input',
   onChange,
 }: Props) => {
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -60,7 +63,7 @@ export const Upload = ({
 
   return (
     <>
-      <UploadWrapper isActive={false}>
+      <UploadWrapper isActive={false} data-testid={testId}>
         <UploadText>
           {!hasFile &&
             !isUploading &&

src/stories/atoms/CTALink/CTALink.stories.tsx

@@ -35,6 +35,12 @@ Default.args = {
   onClick: () => console.log('CTALink clicked...'),
 };
 
+export const HideUnderline = Template.bind({});
+HideUnderline.args = {
+  ...Default.args,
+  hideUnderline: true,
+};
+
 export const WithColor = Template.bind({});
 WithColor.args = {
   ...Default.args,

src/stories/atoms/CTALink/CTALink.style.ts

@@ -3,9 +3,11 @@ import styled from 'styled-components';
 
 export const CTALinkWrapper = styled.div<{
   color: string;
+  hideUnderline: boolean;
 }>`
   padding: 0 0.25rem 0 0.25rem;
-  border-bottom: ${(props) => `solid thin ${props.color}`};
+  border-bottom: ${(props) =>
+    props.hideUnderline ? '' : `solid thin ${props.color}`};
   :hover {
     cursor: pointer;
   }

src/stories/atoms/CTALink/CTALink.tsx

@@ -7,12 +7,23 @@ import { CTALinkWrapper, LinkText } from 'stories/atoms/CTALink/CTALink.style';
 interface Props {
   text: string;
   color?: string;
+  hideUnderline?: boolean;
   onClick: () => void;
 }
 
-export const CTALink = ({ text, color = '#000000', onClick }: Props) => {
+export const CTALink = ({
+  text,
+  color = '#000000',
+  onClick,
+  hideUnderline = false,
+}: Props) => {
   return (
-    <CTALinkWrapper onClick={onClick} data-testid="cta-link" color={color}>
+    <CTALinkWrapper
+      onClick={onClick}
+      data-testid="cta-link"
+      color={color}
+      hideUnderline={hideUnderline}
+    >
       <LinkText color={color}>{text}</LinkText>
     </CTALinkWrapper>
   );

src/stories/molecules/ProfileHeader/ProfileHeader.stories.tsx

@@ -60,8 +60,17 @@ CompleteUserData.args = {
 
 export const Edit = Template.bind({});
 Edit.args = {
+  ...CompleteUserData.args,
   ...WithPicture.args,
   isEdit: true,
   // eslint-disable-next-line no-console
   onClick: () => console.log('Handle Add Picture click...'),
 };
+
+export const PhotoUpload = Template.bind({});
+PhotoUpload.args = {
+  ...CompleteUserData.args,
+  ...Edit.args,
+  isPhotoUpload: true,
+  onClick: () => console.log('Handle Cancel Action click...'),
+};

src/stories/molecules/ProfileHeader/ProfileHeader.tsx

@@ -13,20 +13,22 @@ import { IconLabel } from 'stories/molecules/IconLabel/IconLabel';
 import { Label } from 'stories/atoms/Label/Label';
 import { SizesEnum, UserInfo } from 'utils/sharedTypes';
 import { ReactComponent as PlusIcon } from 'stories/assets/plus_icon.svg';
+import { ReactComponent as XIcon } from 'stories/assets/ex_icon.svg';
 import { CTALink } from 'stories/atoms/CTALink/CTALink';
 
 interface Props {
   profilePictureURL: string;
   userInfo: UserInfo;
   isEdit: boolean;
+  isPhotoUpload: boolean;
   onClick: () => void;
 }
 
-// eslint-disable-next-line no-empty-pattern
 export const ProfileHeader = ({
   profilePictureURL,
   userInfo,
   isEdit,
+  isPhotoUpload,
   onClick,
 }: Props) => {
   const year = userInfo?.neighborDate?.getFullYear().toString();
@@ -36,7 +38,13 @@ export const ProfileHeader = ({
       <ProfilePicWrapper>
         {isEdit ? (
           <EditPic
-            icon={<PlusIcon height={24} width={24} />}
+            icon={
+              isPhotoUpload ? (
+                <XIcon height={24} width={24} />
+              ) : (
+                <PlusIcon height={24} width={24} />
+              )
+            }
             size={SizesEnum.Medium}
             onClick={onClick}
           >

src/stories/pages/ProfilePage/ProfilePage.tsx

@@ -5,12 +5,8 @@ import * as React from 'react';
 import { useAppSelector } from 'app/hooks';
 import { selectSession } from 'features/session/sessionSlice';
 import { useGetUserByIdQuery } from 'features/session/sessionApi';
-// import { ProfilePic } from 'stories/atoms/ProfilePic/ProfilePic';
-// import { SizesEnum } from 'utils/sharedTypes';
-import {
-  ProfilePageWrapper,
-  // TextPicWrapper,
-} from 'stories/pages/ProfilePage/ProfilePage.style';
+
+import { ProfilePageWrapper } from 'stories/pages/ProfilePage/ProfilePage.style';
 import { ProfilePageRender } from 'stories/pages/ProfilePage/ProfilePageRender/ProfilePageRender';
 
 interface Props {
@@ -29,18 +25,20 @@ export const ProfilePage = ({ userId = '' }: Props) => {
   );
 
   const [isEdit, setIsEdit] = React.useState(false);
+  const [isPhotoUpload, setIsPhotoUpload] = React.useState(false);
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { isAuthLoading, isAuthenticated, user } = useAppSelector((state) =>
     selectSession(state)
   );
 
-  // return isAuthenticated && data ? (
-  return isAuthenticated ? (
+  return isAuthenticated && data ? (
+    // return isAuthenticated ? (
     <ProfilePageWrapper>
       <ProfilePageRender
         isLoading={isAuthLoading || queryIsLoading}
         isEdit={isEdit}
+        isPhotoUpload={isPhotoUpload}
         userInfo={{
           userName: 'Joe Byron',
           neighborType: undefined,
@@ -51,10 +49,10 @@ export const ProfilePage = ({ userId = '' }: Props) => {
         isFormSubmitted={false}
         isFormSubmitting={false}
         onEditClick={
-          !isEdit
-            ? () => setIsEdit(!isEdit)
-            : () => console.log('Add picture click...')
+          !isEdit ? () => setIsEdit(true) : () => setIsPhotoUpload(true)
         }
+        onCancelEditClick={() => setIsEdit(false)}
+        onCancelPhotoUploadClick={() => setIsPhotoUpload(false)}
       />
     </ProfilePageWrapper>
   ) : (

src/stories/pages/ProfilePage/ProfilePageRender/Edit/Edit.style.ts

@@ -3,4 +3,7 @@ import styled from 'styled-components';
 
 export const EditWrapper = styled.div`
   width: 100%;
+  display: flex nowrap;
+  text-align: center;
+  align-items: center;
 `;

src/stories/pages/ProfilePage/ProfilePageRender/Edit/Edit.tsx

@@ -4,17 +4,24 @@ import React from 'react';
 // Local Imports
 import { EditWrapper } from 'stories/pages/ProfilePage/ProfilePageRender/Edit/Edit.style';
 import { EditProfileForm } from 'stories/molecules/forms/EditProfileForm/EditProfileForm';
+import { CTALink } from 'stories/atoms/CTALink/CTALink';
 
 interface Props {
   isLoading: boolean;
   isSubmitted: boolean;
+  handleCancelClick: () => void;
 }
 
 // eslint-disable-next-line no-empty-pattern
-export const Edit = ({ isLoading = false, isSubmitted = false }: Props) => {
+export const Edit = ({
+  isLoading = false,
+  isSubmitted = false,
+  handleCancelClick,
+}: Props) => {
   return (
     <EditWrapper>
       <EditProfileForm isLoading={isLoading} isSubmitted={isSubmitted} />
+      <CTALink text="Cancel" onClick={handleCancelClick} hideUnderline />
     </EditWrapper>
   );
 };

src/stories/pages/ProfilePage/ProfilePageRender/ProfilePageRender.stories.tsx

@@ -38,6 +38,7 @@ Default.args = {
     neighborDate: new Date('10/24/2018'),
     userBlurb: mockUserBlurb,
   },
+  // eslint-disable-next-line no-console
   onEditClick: () => console.log('Handle Edit click....'),
 };
 
@@ -72,3 +73,9 @@ Loading.args = {
   ...Default.args,
   isLoading: true,
 };
+
+export const UploadPhoto = Template.bind({});
+UploadPhoto.args = {
+  ...Edit.args,
+  isPhotoUpload: true,
+};

src/stories/pages/ProfilePage/ProfilePageRender/ProfilePageRender.test.tsx

@@ -7,7 +7,8 @@ import { render } from 'utils/test-utils';
 import * as stories from 'stories/pages/ProfilePage/ProfilePageRender/ProfilePageRender.stories';
 import { mockUserBlurb } from 'mocks/sharedMocks';
 
-const { Default, Loading, IncompleteUserInfo, Edit } = composeStories(stories);
+const { Default, Loading, IncompleteUserInfo, Edit, UploadPhoto } =
+  composeStories(stories);
 
 describe('ProfilePageRender unit tests', () => {
   it('Should render the Default ProfilePageRender component', () => {
@@ -33,4 +34,9 @@ describe('ProfilePageRender unit tests', () => {
     expect(getByText('First Name')).toBeInTheDocument();
     expect(getByText('Last Name')).toBeInTheDocument();
   });
+
+  it('Should render the Upload Photo story', () => {
+    const { getByTestId } = render(<UploadPhoto />);
+    expect(getByTestId('edit-profile-pic-input')).toBeInTheDocument();
+  });
 });

src/stories/pages/ProfilePage/ProfilePageRender/ProfilePageRender.tsx

@@ -12,12 +12,15 @@ import { Edit } from 'stories/pages/ProfilePage/ProfilePageRender/Edit/Edit';
 import { Display } from 'stories/pages/ProfilePage/ProfilePageRender/Display/Display';
 import { ProfileHeader } from 'stories/molecules/ProfileHeader/ProfileHeader';
 import { UserInfo } from 'utils/sharedTypes';
+import { Upload } from 'stories/Inputs/Upload/Upload';
 
 interface Props {
   /** Is the component loading? */
   isLoading: boolean;
   /** Is the user editing their profile? */
   isEdit: boolean;
+  /** Did the user click the edit profile picture icon? */
+  isPhotoUpload: boolean;
   /** What's the known information for the user? */
   userInfo: UserInfo;
   /** Where should we look for the user's profile picture? */
@@ -28,16 +31,22 @@ interface Props {
   isFormSubmitted: boolean;
   /** What should happen when we click the various edit icons? */
   onEditClick: () => void;
+  onCancelEditClick: () => void;
+  /** What should happen when we click the `X` icon? */
+  onCancelPhotoUploadClick: () => void;
 }
 
 export const ProfilePageRender = ({
   isLoading,
   isEdit,
+  isPhotoUpload,
   userInfo,
   profilePictureURL,
   isFormSubmitting,
   isFormSubmitted,
   onEditClick,
+  onCancelEditClick,
+  onCancelPhotoUploadClick,
 }: Props) => {
   const hasIncompleteInfo = Object.values(userInfo).some((value) => !value);
   return (
@@ -53,10 +62,23 @@ export const ProfilePageRender = ({
             userInfo={userInfo}
             isEdit={isEdit}
             profilePictureURL={profilePictureURL}
-            onClick={onEditClick}
+            onClick={isPhotoUpload ? onCancelPhotoUploadClick : onEditClick}
+            isPhotoUpload={isPhotoUpload}
           />
+          {isPhotoUpload && (
+            <Upload
+              // eslint-disable-next-line no-console
+              onChange={() => console.log('On Change Event...')}
+              accept="image/*"
+              testId="edit-profile-pic-input"
+            />
+          )}
           {isEdit && (
-            <Edit isLoading={isFormSubmitting} isSubmitted={isFormSubmitted} />
+            <Edit
+              isLoading={isFormSubmitting}
+              isSubmitted={isFormSubmitted}
+              handleCancelClick={onCancelEditClick}
+            />
           )}
           {!isEdit && !hasIncompleteInfo && <Display userInfo={userInfo} />}
         </Main>