Merge pull request #18 from loxygenK/feat/contact-page

.eslintignore

@@ -0,0 +1 @@
+src/api/graphql/autogen

src/comps/shared/AwaitFetch.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import styles from "./AwaitFetch.module.scss";
 import { Emoji } from "./Emoji";
 
 export type AwaitFetchProps<T> = {

src/pages/about/atoms/Contact.module.scss

@@ -0,0 +1,3 @@
+.contact {
+  font-weight: 700;
+}

src/pages/about/atoms/Contact.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import styles from "./Contact.module.scss";
+
+export type ContactProps = {
+  service: string;
+  url: string;
+  identifier: string;
+};
+export const Contact: React.VFC<ContactProps> = (props) => (
+  <a
+    href={props.url}
+    target="_blank"
+    rel="noreferrer"
+    className={styles.contact}
+  >
+    {props.service}
+  </a>
+);

src/pages/about/controller.ts

@@ -1,5 +1,5 @@
-import { gql, useQuery } from "@apollo/client";
-import { Basic } from "~/api/graphql/autogen/scheme";
+import { gql, QueryResult, useQuery } from "@apollo/client";
+import { Basic, Contact } from "~/api/graphql/autogen/scheme";
 
 const fetchBasic = gql`
   query FetchBasic {
@@ -15,9 +15,14 @@ const fetchBasic = gql`
       }
       age
     }
+    contacts {
+      service
+      identifier
+      url
+    }
   }
 `;
-type FetchIntroductionResponse = { basic: Basic };
+type FetchIntroductionResponse = { basic: Basic; contacts: Contact[] };
 
-export const useBasicAPI = () =>
+export const useBasicAPI = (): QueryResult<FetchIntroductionResponse> =>
   useQuery<FetchIntroductionResponse>(fetchBasic);

src/pages/about/organisms/Introduction.module.scss

@@ -32,3 +32,7 @@
   gap: 0.5em;
 }
 
+.contacts {
+  display: flex;
+  gap: 0.5em;
+}

src/pages/about/organisms/Introduction.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { AwaitFetch } from "~/comps/shared/AwaitFetch";
 import { Affiliation } from "../atoms/Affiriation";
+import { Contact } from "../atoms/Contact";
 import { useBasicAPI } from "../controller";
 
 import styles from "./Introduction.module.scss";
@@ -18,6 +19,11 @@ export const Introduction = () => {
               {data.basic.name.aka.join(" / ")}
             </span>
           </div>
+          <div className={styles.contacts}>
+            {data.contacts.map((c, i) => (
+              <Contact {...c} key={i} />
+            ))}
+          </div>
           <div className={styles.affiriation}>
             {data.basic.affiliation.map((a, key) => (
               <Affiliation {...a} key={key} />

src/pages/skills/atoms/Skill.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { SkilledLevel } from "~/api/graphql/autogen/scheme";
 import { Emoji } from "~/comps/shared/Emoji";
-import { combineClassName } from "~/utils/combineClassName";
 
 import styles from "./Skill.module.scss";
 

src/pages/works/atoms/Work.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { Status, Work as WorkEntity } from "~/api/graphql/autogen/scheme";
 
 import styles from "./Work.module.scss";