feat(client): rename portofolio file to portfolio-projects (#49615)

* feat(client): rename portofolio file to protfolio-projects

* squash merge to main

* fix typo in the file name

* use one type for profileProjects

* revert the renaming of portfolio prop

* fix type in the new form Correct function

client/src/client-only-routes/show-settings.tsx

@@ -198,7 +198,6 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
             website={website}
           />
           <Spacer size='medium' />
-          {/* @ts-expect-error Portfolio types mismatch */}
           <Portfolio portfolio={portfolio} updatePortfolio={updatePortfolio} />
           <Spacer size='medium' />
           <Honesty isHonest={isHonest} updateIsHonest={updateIsHonest} />

client/src/components/profile/components/portfolio-projects.tsx

@@ -2,24 +2,26 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
-import type { Portfolio as PortfolioData } from '../../../redux/prop-types';
+import type { PortfolioProjectData } from '../../../redux/prop-types';
 import { FullWidthRow } from '../../helpers';
 
-import './portfolio.css';
+import './portfolio-projects.css';
 
-interface PortfolioProps {
-  portfolio: PortfolioData[];
+interface PortfolioProjectsProps {
+  portfolioProjects: PortfolioProjectData[];
 }
 
-function Portfolio({ portfolio = [] }: PortfolioProps): JSX.Element | null {
+export const PortfolioProjects = ({
+  portfolioProjects
+}: PortfolioProjectsProps): JSX.Element | null => {
   const { t } = useTranslation();
-  if (!portfolio.length) {
+  if (!portfolioProjects.length) {
     return null;
   }
   return (
     <FullWidthRow>
       <h2 className='text-center'>{t('profile.portfolio')}</h2>
-      {portfolio.map(({ title, url, image, description, id }) => (
+      {portfolioProjects.map(({ title, url, image, description, id }) => (
         <div className='portfolio-container' key={id}>
           <h3>{title}</h3>
           <p>{description}</p>
@@ -39,8 +41,4 @@ function Portfolio({ portfolio = [] }: PortfolioProps): JSX.Element | null {
       <hr />
     </FullWidthRow>
   );
-}
-
-Portfolio.displayName = 'Portfolio';
-
-export default Portfolio;
+};

client/src/components/profile/profile.tsx

@@ -9,7 +9,7 @@ import Timeline from './components/time-line';
 import Camper from './components/camper';
 import Certifications from './components/certifications';
 import HeatMap from './components/heat-map';
-import Portfolio from './components/portfolio';
+import { PortfolioProjects } from './components/portfolio-projects';
 
 interface ProfileProps {
   isSessionUser: boolean;
@@ -61,7 +61,6 @@ function renderProfile(user: ProfileProps['user']): JSX.Element {
       showPortfolio = false,
       showTimeLine = false
     },
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     calendar,
     completedChallenges,
     githubProfile,
@@ -96,10 +95,11 @@ function renderProfile(user: ProfileProps['user']): JSX.Element {
         website={website}
         yearsTopContributor={yearsTopContributor}
       />
-      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
       {showHeatMap ? <HeatMap calendar={calendar} /> : null}
       {showCerts ? <Certifications username={username} /> : null}
-      {showPortfolio ? <Portfolio portfolio={portfolio} /> : null}
+      {showPortfolio ? (
+        <PortfolioProjects portfolioProjects={portfolio} />
+      ) : null}
       {showTimeLine ? (
         <Timeline completedMap={completedChallenges} username={username} />
       ) : null}

client/src/components/settings/portfolio.tsx

@@ -11,6 +11,7 @@ import { nanoid } from 'nanoid';
 import React, { Component } from 'react';
 import { TFunction, withTranslation } from 'react-i18next';
 import isURL from 'validator/lib/isURL';
+import { PortfolioProjectData } from '../../redux/prop-types';
 
 import { hasProtocolRE } from '../../utils';
 
@@ -18,28 +19,20 @@ import { FullWidthRow, Spacer } from '../helpers';
 import BlockSaveButton from '../helpers/form/block-save-button';
 import SectionHeader from './section-header';
 
-type PortfolioItem = {
-  id: string;
-  description: string;
-  image: string;
-  title: string;
-  url: string;
-};
-
 type PortfolioProps = {
   picture?: string;
-  portfolio: PortfolioItem[];
+  portfolio: PortfolioProjectData[];
   t: TFunction;
-  updatePortfolio: (obj: { portfolio: PortfolioItem[] }) => void;
+  updatePortfolio: (obj: { portfolio: PortfolioProjectData[] }) => void;
   username?: string;
 };
 
 type PortfolioState = {
-  portfolio: PortfolioItem[];
+  portfolio: PortfolioProjectData[];
   unsavedItemId: string | null;
 };
 
-function createEmptyPortfolioItem(): PortfolioItem {
+function createEmptyPortfolioItem(): PortfolioProjectData {
   return {
     id: nanoid(),
     title: '',
@@ -50,7 +43,7 @@ function createEmptyPortfolioItem(): PortfolioItem {
 }
 
 function createFindById(id: string) {
-  return (p: PortfolioItem) => p.id === id;
+  return (p: PortfolioProjectData) => p.id === id;
 }
 
 class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
@@ -178,7 +171,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
       : { state: 'warning', message: t('validation.use-valid-url') };
   }
 
-  formCorrect(portfolio: PortfolioItem) {
+  formCorrect(portfolio: PortfolioProjectData) {
     const { id, title, description, url, image } = portfolio;
 
     const { state: titleState, message: titleMessage } =
@@ -229,9 +222,9 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
   }
 
   renderPortfolio = (
-    portfolio: PortfolioItem,
+    portfolio: PortfolioProjectData,
     index: number,
-    arr: PortfolioItem[]
+    arr: PortfolioProjectData[]
   ) => {
     const { t } = this.props;
     const { id, title, description, url, image } = portfolio;

client/src/redux/prop-types.ts

@@ -207,7 +207,7 @@ export type User = {
   name: string;
   picture: string;
   points: number;
-  portfolio: Portfolio[];
+  portfolio: PortfolioProjectData[];
   profileUI: ProfileUI;
   progressTimestamps: Array<unknown>;
   savedChallenges: SavedChallenges;
@@ -301,12 +301,12 @@ export type ChallengeMeta = {
   helpCategory: string;
 };
 
-export type Portfolio = {
+export type PortfolioProjectData = {
   id: string;
-  title?: string;
-  url?: string;
-  image?: string;
-  description?: string;
+  title: string;
+  url: string;
+  image: string;
+  description: string;
 };
 
 type FileKeyChallenge = {