profile description

src/components/DevProfile.tsx

@@ -5,7 +5,7 @@ import {Link} from 'react-router-dom';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCheck} from '@fortawesome/free-solid-svg-icons';
 // Typing
-import {DevSummary} from '../models/Dev';
+import {DevSummary, getDescription} from '../models/Dev';
 import Routes from '../constants/routes';
 
 /**
@@ -16,7 +16,8 @@ const DevProfile: FC<DevSummary> = ({
   id,
   displayName,
   avatarUrl,
-  description,
+  status,
+  company,
   location,
   skills,
 }) => (
@@ -24,7 +25,7 @@ const DevProfile: FC<DevSummary> = ({
     <img src={avatarUrl} alt={displayName} className="round-img" />
     <div>
       <h2>{displayName}</h2>
-      <p>{description}</p>
+      <p>{getDescription(status, company)}</p>
       <p>{location}</p>
       <Link to={`${Routes.PROFILE}/${id}`} className="btn btn-primary">
         View Profile

src/models/Dev.ts

@@ -9,6 +9,8 @@ export interface DevSummary {
   displayName: string;
   avatarUrl: string;
   description: string;
+  status: string;
+  company: string;
   location: string;
   skills: string[];
 }
@@ -19,8 +21,6 @@ export interface DevSummary {
 interface IDev extends DevSummary {
   isActive: boolean;
   bio: string;
-  status: string;
-  company: string;
   github: string;
   links: Links;
   experiences: Experience[];
@@ -28,6 +28,13 @@ interface IDev extends DevSummary {
   repos: Repo[];
 }
 
+export const getDescription = (status?: string, company?: string): string => {
+  if (status && company) return `${status} at ${company}`;
+  if (status) return status;
+  if (company) return `Employed at ${company}`;
+  return 'Document your current occupation.';
+};
+
 /** class implementing IDev.
  * No constructor is provided.
  * new Dev() returns a placeholder used when initializing a new profile.
@@ -160,6 +167,8 @@ export const developers: DevSummary[] = [
     description: 'Developer at Microsoft',
     location: 'Seattle, WA',
     skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
+    status: 'Developer',
+    company: 'Microsoft',
   },
   {
     id: '42',
@@ -170,6 +179,8 @@ export const developers: DevSummary[] = [
 
     location: 'Hamburg, DE',
     skills: ['React', 'TypeScript', 'Redux', 'Nodejs'],
+    status: 'Developer',
+    company: 'Microsoft',
   },
 ];
 

src/pages/Profile.tsx

@@ -27,14 +27,14 @@ import {
   faCodeBranch,
 } from '@fortawesome/free-solid-svg-icons';
 // Typing
-import {Dev} from '../models/Dev';
+import IDev, {getDescription} from '../models/Dev';
 import Experience from '../types/Experience';
 import {getTimePeriod} from '../types/TimePeriod';
 import Education from '../types/Education';
 import Repo from '../types/Repo';
 
 interface IProps {
-  dev: Dev;
+  dev: IDev;
 }
 
 /**
@@ -46,6 +46,9 @@ const Profile: FC<IProps> = ({dev}) => {
     return <NotFound />;
   }
 
+  const fn = dev?.description;
+  console.log(fn);
+
   /** return the icon corresponding to the social name */
   const renderSocialIcon = (name: string): IconDefinition => {
     switch (name) {
@@ -82,7 +85,7 @@ const Profile: FC<IProps> = ({dev}) => {
             className="round-img my-1"
           />
           <h1 className="large">{dev.displayName}</h1>
-          <p className="lead">{`${dev.status} at ${dev.company}`}</p>
+          <p className="lead">{getDescription(dev.status, dev.company)}</p>
           <p>{dev.location}</p>
           <div className="icons my-1">
             {Object.entries(dev.links)