switch picture field to avatarUrl

src/components/DevProfile.tsx

@@ -1,7 +1,12 @@
 import React, {FC} from 'react';
+// Routing
+import {Link} from 'react-router-dom';
+// Style
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCheck} from '@fortawesome/free-solid-svg-icons';
+// Typing
 import {DevSummary} from '../models/Dev';
+import Routes from '../constants/routes';
 
 /**
  * Present a dev profile succintly. Redirect to dev profile on click.
@@ -10,20 +15,20 @@ import {DevSummary} from '../models/Dev';
 const DevProfile: FC<DevSummary> = ({
   id,
   displayName,
-  picture,
+  avatarUrl,
   description,
   location,
   skills,
 }) => (
   <div className="profile bg-light">
-    <img src={picture} alt={displayName} className="round-img" />
+    <img src={avatarUrl} alt={displayName} className="round-img" />
     <div>
       <h2>{displayName}</h2>
       <p>{description}</p>
       <p>{location}</p>
-      <a href="profile.html" className="btn btn-primary">
+      <Link to={`${Routes.PROFILE}/${id}`} className="btn btn-primary">
         View Profile
-      </a>
+      </Link>
     </div>
     <ul>
       {skills?.map((s, i) => (

src/models/Dev.ts

@@ -7,7 +7,7 @@ import Repo from '../types/Repo';
 export interface DevSummary {
   id: string;
   displayName: string;
-  picture: string;
+  avatarUrl: string;
   description: string;
   location: string;
   skills: string[];
@@ -38,7 +38,7 @@ export const blankDev: Dev = {
   displayName: '',
   status: 'Developer',
   company: '',
-  picture: '',
+  avatarUrl: '',
   description: '',
   location: '',
   skills: [],
@@ -66,7 +66,7 @@ export const dummyDev: Dev = {
   displayName: 'John Doe',
   status: 'Developer',
   company: 'Microsoft',
-  picture:
+  avatarUrl:
     'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
   description: 'Developer at Microsoft',
   location: 'Seattle, WA',
@@ -152,7 +152,7 @@ export const developers: DevSummary[] = [
   {
     id: '0',
     displayName: 'John Doe',
-    picture:
+    avatarUrl:
       'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
     description: 'Developer at Microsoft',
     location: 'Seattle, WA',
@@ -161,7 +161,7 @@ export const developers: DevSummary[] = [
   {
     id: '42',
     displayName: 'Ruidy Nemausat',
-    picture:
+    avatarUrl:
       'https://lh3.googleusercontent.com/a-/AOh14GhncH95MWKwPR3TRKy4eVd4n6w0-fobe4dhiam2xA',
     description: 'Fullstack Engineer at DESY',
     location: 'Hamburg, DE',