lay experience section out

- install moment
- define Experience interface
- define TimePeriod type & method

package.json

@@ -18,6 +18,7 @@
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.5",
     "cypress": "^4.5.0",
+    "moment": "^2.25.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",

src/models/Experience.ts

@@ -1,3 +1,11 @@
-interface Experience {}
+import {TimePeriod} from '../types';
+
+interface Experience {
+  employer: string;
+  from: Date;
+  to: TimePeriod;
+  position: string;
+  description: string;
+}
 
 export default Experience;

src/pages/Profile.tsx

@@ -1,5 +1,4 @@
 import React, {FC} from 'react';
-import DevFull from '../models/DevFull';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {
   faGithub,
@@ -13,9 +12,12 @@ import {
   IconDefinition,
   faCheck,
 } from '@fortawesome/free-solid-svg-icons';
+import DevFull from '../models/DevFull';
+import Experience from '../models/Experience';
+import {parseDate} from '../types';
 
 const Profile: FC<DevFull> = () => {
-  const dev = {
+  const dev: DevFull = {
     id: '0',
     name: 'John Doe',
     picture:
@@ -33,6 +35,26 @@ const Profile: FC<DevFull> = () => {
     },
     bio:
       'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis unde quae vero enim adipisci voluptas magni sapiente reprehenderit error minima.',
+    experiences: [
+      {
+        employer: 'Microsoft',
+        from: new Date(2011, 10),
+        to: 'Current',
+        position: 'Senior Developer',
+        description:
+          'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas corrupti rem eius, accusantium ipsum vel eveniet magnam voluptatum? Minus, voluptatum!',
+      },
+      {
+        employer: 'Sun Microsystems',
+        from: new Date(2004, 10),
+        to: new Date(2010, 11),
+        position: 'System Admin',
+        description:
+          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus at rem totam sed qui! Quas.',
+      },
+    ],
+    educations: [],
+    repos: [],
   };
 
   /** return the icon corresponding to the social name */
@@ -94,31 +116,22 @@ const Profile: FC<DevFull> = () => {
 
         <div className="profile-exp bg-white p-2">
           <h2 className="text-primary">Experiences</h2>
-          <div>
-            <h3>Microsoft</h3>
-            <p>Oct. 2011 - Current</p>
-            <p>
-              <strong>Position: </strong>Senior Developer
-            </p>
-            <p>
-              <strong>Description: </strong>Lorem ipsum dolor sit amet
-              consectetur adipisicing elit. Repellendus at rem totam sed qui!
-              Quas.
-            </p>
-          </div>
-          <div>
-            <h3>Sun Microsystems</h3>
-            <p>Oct. 2004 - Nov. 2010</p>
-            <p>
-              <strong>Position: </strong>System Admin
-            </p>
-            <p>
-              <strong>Description: </strong>Lorem ipsum dolor sit amet
-              consectetur adipisicing elit. Repellendus at rem totam sed qui!
-              Quas.
-            </p>
-          </div>
+          {dev.experiences.map((exp: Experience, i: number) => (
+            <div key={i}>
+              <h3>{exp.employer}</h3>
+              <p>{`${parseDate(exp.from)} - ${parseDate(exp.to)}`}</p>
+              <p>
+                <strong>Position: </strong>
+                {exp.position}
+              </p>
+              <p>
+                <strong>Description: </strong>
+                {exp.description}
+              </p>
+            </div>
+          ))}
         </div>
+
         <div className="profile-edu bg-white p-2">
           <h2 className="text-primary">Education</h2>
           <div>

src/types/index.ts

@@ -0,0 +1,11 @@
+import moment from 'moment';
+
+export type TimePeriod = Date | 'Current';
+
+/** format exp date to be used */
+export const parseDate = (date: TimePeriod): string => {
+  if (date === 'Current') {
+    return date;
+  }
+  return moment(date).format('MMM. YYYY');
+};

yarn.lock

@@ -7325,6 +7325,11 @@ moment@2.24.0:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
 
+moment@^2.25.3:
+  version "2.25.3"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.25.3.tgz#252ff41319cf41e47761a1a88cab30edfe9808c0"
+  integrity sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"