format social links

src/models/Dev.ts

@@ -21,6 +21,7 @@ interface IDev extends DevSummary {
   bio: string;
   status: string;
   company: string;
+  github: string;
   links: Links;
   experiences: Experience[];
   educations: Education[];
@@ -42,6 +43,7 @@ export class Dev implements IDev {
   description = '';
   location = '';
   skills: string[] = [];
+  github: string = '';
   links: Links = {
     website: '',
     instagram: '',
@@ -71,6 +73,7 @@ export const dummyDev: IDev = {
   description: 'Developer at Microsoft',
   location: 'Seattle, WA',
   skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
+  github: '',
   links: {
     website: '#',
     instagram: 'http://insta.com',

src/pages/EditProfile.tsx

@@ -21,7 +21,7 @@ import useForm from '../hooks';
 // Typing
 import Dev from '../models/Dev';
 import User from '../models/User';
-import Links from '../types/Links';
+import Links, {parseLink, getGithubLink} from '../types/Links';
 import IAlert, {formAlert} from '../types/Alert';
 
 interface FormData {
@@ -52,6 +52,7 @@ const EditProfile: FC<IProps> = ({
   links,
   location,
   bio,
+  github,
 }) => {
   const [showLinks, setShowLinks] = useState(false);
   const [alert, setAlert] = useState<IAlert>(formAlert);
@@ -63,7 +64,7 @@ const EditProfile: FC<IProps> = ({
     bio: bio ?? '',
     skills: skills?.toString() ?? '',
     website: links?.website ?? '',
-    github: links?.github ?? '',
+    github: github ?? '',
     facebook: links?.facebook ?? '',
     linkedin: links?.linkedin ?? '',
     instagram: links?.instagram ?? '',
@@ -89,13 +90,13 @@ const EditProfile: FC<IProps> = ({
     skills,
   }: FormData) => {
     const newLinks: Links = {
-      website,
-      instagram,
-      facebook,
-      linkedin,
-      twitter,
-      github,
-      youtube,
+      website: parseLink(website),
+      instagram: parseLink(instagram),
+      facebook: parseLink(facebook),
+      linkedin: parseLink(linkedin),
+      twitter: parseLink(twitter),
+      github: getGithubLink(github),
+      youtube: parseLink(youtube),
     };
     const newSkills: string[] = skills?.split(',');
     return {
@@ -103,6 +104,7 @@ const EditProfile: FC<IProps> = ({
       company,
       location,
       bio,
+      github,
       links: newLinks,
       skills: newSkills,
     };

src/types/Links.ts

@@ -8,4 +8,22 @@ interface Links {
   youtube: string;
 }
 
+/**
+ * ensure link is formatted as http(s)//:...
+ * @param link URI to process
+ */
+export const parseLink = (link: string): string => {
+  if (link.slice(0, 4) === 'http') {
+    return link;
+  } else {
+    return `http://${link}`;
+  }
+};
+
+/**
+ * @param githubUsername
+ */
+export const getGithubLink = (githubUsername: string) =>
+  `https://github.com/${githubUsername}`;
+
 export default Links;