refactor

src/App.tsx

@@ -3,6 +3,7 @@ import {BrowserRouter} from 'react-router-dom';
 import NavBar from './components/NavBar';
 import Router from './router/Router';
 
+/** Main App container */
 const App = () => {
   return (
     <BrowserRouter>

src/components/DevProfile.tsx

@@ -1,8 +1,12 @@
 import React, {FC} from 'react';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCheck} from '@fortawesome/free-solid-svg-icons';
-import DevSummary from '../models/DevSummary';
+import {DevSummary} from '../models/Dev';
 
+/**
+ * Present a dev profile succintly. Redirect to dev profile on click.
+ * @param props DevSummary object
+ */
 const DevProfile: FC<DevSummary> = ({
   id,
   name,

src/components/FormHeader.tsx

@@ -7,6 +7,7 @@ interface IProps {
   icon?: string;
 }
 
+/** Header component displayed on form pages */
 const FormHeader: FC<IProps> = props => (
   <>
     <Header {...props} />

src/components/Header.tsx

@@ -13,6 +13,12 @@ interface IProps {
   icon?: string;
 }
 
+/**
+ * Header component
+ * @param title of the page
+ * @param lead description of the content
+ * @param icon  to display (optional and default to faUser)
+ */
 const Header: FC<IProps> = ({title, lead, icon = 'faUser'}) => {
   const RenderIcon = (icon: string) => {
     if (icon === 'faUser') {

src/components/NavBar.tsx

@@ -2,11 +2,14 @@ import React, {FC} from 'react';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCode} from '@fortawesome/free-solid-svg-icons';
 
+/**
+ * Main Navbar serves navigation routes.
+ */
 const NavBar: FC = () => (
   <nav className="navbar bg-dark">
     <h1>
       <a href="dashboard.html">
-        <FontAwesomeIcon icon={faCode} /> {'  '} DevBook
+        <FontAwesomeIcon icon={faCode} /> DevBook
       </a>
     </h1>
     <ul>

src/models/Dev.ts

@@ -1,10 +1,21 @@
-import DevSummary from '../models/DevSummary';
-import Experience from './Experience';
-import Education from './Education';
-import Repo from './Repo';
+import Experience from '../types/Experience';
+import Education from '../types/Education';
+import Repo from '../types/Repo';
 
-/**Full developer profile information. extends summary to avoid duplication */
-interface DevFull extends DevSummary {
+/** Shorter dev interface */
+export interface DevSummary {
+  id: string;
+  name: string;
+  picture: string;
+  description: string;
+  location: string;
+  skills: string[];
+}
+
+/** Full developer profile information.
+ * @extends DevSummary to avoid duplication
+ */
+interface Dev extends DevSummary {
   bio: string;
   links: Object;
   experiences: Experience[];
@@ -13,9 +24,9 @@ interface DevFull extends DevSummary {
 }
 
 /**
- * sample DevFull for development and tests
+ * sample Dev for development and tests
  */
-export const dummyDevFull: DevFull = {
+export const dummyDev: Dev = {
   id: '0',
   name: 'John Doe',
   picture:
@@ -92,4 +103,4 @@ export const dummyDevFull: DevFull = {
     },
   ],
 };
-export default DevFull;
+export default Dev;

src/models/DevSummary.ts

@@ -1,10 +0,0 @@
-interface DevSummary {
-  id: string;
-  name: string;
-  picture: string;
-  description: string;
-  location: string;
-  skills: string[];
-}
-
-export default DevSummary;

src/models/Post.ts

@@ -1,6 +1,10 @@
 import Comment from '../types/Comment';
 
+/**
+ * Post send by a dev
+ */
 interface Post {
+  id: string;
   userID: string;
   name: string;
   text: string;
@@ -10,7 +14,11 @@ interface Post {
   //   date: Date;
 }
 
+/**
+ * sample Post for development and tests
+ */
 export const dummyPost: Post = {
+  id: '12',
   userID: '42',
   picture:
     'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',

src/pages/AddEducation.tsx

@@ -1,6 +1,9 @@
 import React, {FC} from 'react';
 import FormHeader from '../components/FormHeader';
 
+/**
+ * Form to add an Education step to Profile
+ */
 const AddEducation: FC = () => (
   <section className="container">
     <FormHeader

src/pages/AddExperience.tsx

@@ -1,6 +1,9 @@
 import React, {FC} from 'react';
 import FormHeader from '../components/FormHeader';
 
+/**
+ * Form to add an Education step to Profile
+ */
 const AddExperience: FC = () => {
   return (
     <section className="container">

src/pages/Dashboard.tsx

@@ -7,12 +7,15 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import {faBlackTie} from '@fortawesome/free-brands-svg-icons';
 import Header from '../components/Header';
-import DevFull, {dummyDevFull as dev} from '../models/DevFull';
-import Experience from '../models/Experience';
+import Dev, {dummyDev as dev} from '../models/Dev';
+import Experience from '../types/Experience';
 import {getTimePeriod} from '../types/TimePeriod';
-import Education from '../models/Education';
+import Education from '../types/Education';
 
-const Dashboard: FC<DevFull> = () => {
+/**
+ * Main page from which a Dev can peek and edit its own profile.
+ */
+const Dashboard: FC<Dev> = () => {
   return (
     <section className="container">
       <Header title="Dashboard" lead={`Welcome ${dev.name}`} />

src/pages/Developers.tsx

@@ -1,8 +1,11 @@
 import React, {FC} from 'react';
 import Header from '../components/Header';
 import DevProfile from '../components/DevProfile';
-import DevSummary from '../models/DevSummary';
+import {DevSummary} from '../models/Dev';
 
+/**
+ * Developers list page
+ */
 // const Developers: FC<DevSummary[]> = (developers) => {
 const Developers: FC = () => {
   const developers: DevSummary[] = [

src/pages/EditProfile.tsx

@@ -9,6 +9,9 @@ import {
 } from '@fortawesome/free-brands-svg-icons';
 import FormHeader from '../components/FormHeader';
 
+/**
+ * Form to update dev's personal information.
+ */
 const EditProfile: FC = () => {
   return (
     <section className="container">

src/pages/Landing.tsx

@@ -1,5 +1,8 @@
 import React, {FC} from 'react';
 
+/**
+ * Landing page
+ */
 const Landing: FC = () => (
   <section className="landing">
     <div className="dark-overlay">

src/pages/Post.tsx

@@ -2,6 +2,9 @@ import React, {FC} from 'react';
 import Post, {dummyPost as post} from '../models/Post';
 import Comment from '../types/Comment';
 
+/**
+ * Display a Post and the related comments. Shows a form to add a comment.
+ */
 const PostPage: FC<Post> = () => (
   <section className="container">
     <a href="posts.html" className="btn btn-light">

src/pages/Posts.tsx

@@ -4,6 +4,9 @@ import Header from '../components/Header';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faThumbsUp, faThumbsDown} from '@fortawesome/free-solid-svg-icons';
 
+/**
+ * A Dev's Posts list
+ */
 const Posts: FC = () => {
   const posts: Post[] = [post, post];
 
@@ -19,8 +22,8 @@ const Posts: FC = () => {
           <textarea cols={30} rows={5} placeholder="Create a post"></textarea>
           <input type="submit" value="Submit" className="btn btn-dark my-1" />
           <div className="posts">
-            {posts.map((post: Post, i: number) => (
-              <div className="post bg-white p-1 my-1" key={i}>
+            {posts.map((post: Post) => (
+              <div className="post bg-white p-1 my-1" key={post.id}>
                 <div>
                   <a href="profile.html">
                     <img

src/pages/Profile.tsx

@@ -15,13 +15,16 @@ import {
   faEye,
   faCodeBranch,
 } from '@fortawesome/free-solid-svg-icons';
-import DevFull, {dummyDevFull as dev} from '../models/DevFull';
-import Experience from '../models/Experience';
+import Dev, {dummyDev as dev} from '../models/Dev';
+import Experience from '../types/Experience';
 import {getTimePeriod} from '../types/TimePeriod';
-import Education from '../models/Education';
-import Repo from '../models/Repo';
+import Education from '../types/Education';
+import Repo from '../types/Repo';
 
-const Profile: FC<DevFull> = () => {
+/**
+ * Dev personal profile as seen by other people.
+ */
+const Profile: FC<Dev> = () => {
   /** return the icon corresponding to the social name */
   const renderSocialIcon = (name: string): IconDefinition => {
     switch (name) {

src/pages/SignIn.tsx

@@ -1,7 +1,10 @@
 import React, {FC} from 'react';
 import Header from '../components/Header';
 
-const SignUp: FC = () => (
+/**
+ * Sign in form
+ */
+const SignIn: FC = () => (
   <section className="container">
     <div className="alert alert-danger">Invalid credentials</div>
     <Header title="Sign In" lead="Sign into your account" />
@@ -21,4 +24,4 @@ const SignUp: FC = () => (
   </section>
 );
 
-export default SignUp;
+export default SignIn;

src/pages/SignUp.tsx

@@ -1,6 +1,9 @@
 import React, {FC} from 'react';
 import Header from '../components/Header';
 
+/**
+ * Sign up form
+ */
 const SignUp: FC = () => (
   <section className="container">
     <Header title="Sign Up" lead="Create your account" />

src/router/Router.tsx

@@ -13,6 +13,7 @@ import PostPage from '../pages/Post';
 import Posts from '../pages/Posts';
 import * as ROUTES from '../constants/routes';
 
+/** Register navigation paths accessible */
 const Router: FC = () => (
   <Switch>
     <Route exact path={ROUTES.LANDING} component={Landing} />