Merge pull request #13 from loxygenK/feat/home/api

src/api/graphql/setup.tsx

@@ -4,7 +4,7 @@ import { Setupper, SetupperProps } from "../setup";
 
 const apolloClient = new ApolloClient({
   // TODO: Change this from the environment variable
-  uri: "http://localhost:8000",
+  uri: "http://localhost:8000/graphql",
   cache: new InMemoryCache(),
 });
 

src/comps/shared/AwaitFetch.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import styles from "./AwaitFetch.module.scss";
+import { Emoji } from "./Emoji";
+
+export type AwaitFetchProps<T> = {
+  loading: boolean;
+  error?: Error;
+  data: NonNullable<T> | undefined;
+  children: (data: NonNullable<T>) => React.ReactElement;
+};
+
+// TypeScript recognizes <T> as JSX tag, however it doesn't when "<T,>".
+// (adding trail comma)
+export const AwaitFetch = <T,>({
+  loading,
+  error,
+  data,
+  children,
+}: AwaitFetchProps<T>) => {
+  if (error)
+    return (
+      <p>
+        <Emoji emoji="😵" />
+        読み込みに失敗しました!
+      </p>
+    );
+  if (loading || data === undefined)
+    return (
+      <p>
+        <Emoji emoji="🔎" />
+        Loading...
+      </p>
+    );
+
+  return children(data);
+};

src/comps/shared/Emoji.module.scss

@@ -1,5 +1,9 @@
 .emoji-default {
-  height: 1em;
+  display: inline-block;
+  height: 1.2em;
+  margin-right: 0.2em;
+
+  vertical-align: middle;
 
   img {
     height: 100%;

src/comps/shared/LogoImage.module.scss

@@ -32,8 +32,8 @@ $pcpc-range: 10deg;
 
   &.enable-animation {
     animation:
-      1.5s 0.75s ease-out text-appear-scale,
-      0.75s 0.75s ease-out text-appear-opacity;
+      1.5s 0.75s ease-out forwards text-appear-scale,
+      0.75s 0.75s ease-out both text-appear-opacity;
 
     g[id="main-text"] {
       mask: url(#masker);

src/pages/about/About.tsx

@@ -3,8 +3,8 @@ import { PageWrapper } from "~/comps/layout/PageWrapper";
 import { Heading } from "~/comps/shared/Heading";
 
 import styles from "./About.module.scss";
-import { Avatar } from "./Avatar";
-import { Introduction } from "./Introduction";
+import { Avatar } from "./atoms/Avatar";
+import { Introduction } from "./organisms/Introduction";
 
 export const About = () => (
   <PageWrapper>

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

@@ -0,0 +1,13 @@
+.element {
+  display: flex;
+  flex-direction: column;
+}
+
+.location {
+  font-size: 1.25em;
+  font-weight: 700;
+}
+
+.assign {
+  font-size: 0.85em;
+}

src/pages/about/atoms/Affiriation.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Affiliation as AffiliationEntity } from "~/api/graphql/autogen/scheme";
+
+import styles from "./Affiriation.module.scss";
+
+export const Affiliation: React.VFC<AffiliationEntity> = (props) => (
+  <div className={styles.element}>
+    <span className={styles.location}>{props.location}</span>
+    <span className={styles.assign}>{props.assign}</span>
+  </div>
+);

src/pages/about/controller.ts

@@ -0,0 +1,23 @@
+import { gql, useQuery } from "@apollo/client";
+import { Basic } from "~/api/graphql/autogen/scheme";
+
+const fetchBasic = gql`
+  query FetchBasic {
+    basic {
+      name {
+        primary
+        aka
+      }
+      introduction
+      affiliation {
+        location
+        assign
+      }
+      age
+    }
+  }
+`;
+type FetchIntroductionResponse = { basic: Basic };
+
+export const useBasicAPI = () =>
+  useQuery<FetchIntroductionResponse>(fetchBasic);

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

@@ -1,15 +1,18 @@
 @use "~/styling/color.module.scss";
 @use "~/styling/font.module.scss";
 
-.wrapper {
+%list {
   display: flex;
   flex-direction: column;
+}
+
+.wrapper {
+  @extend %list;
   gap: 0.5em;
 }
 
-.name, .affiriation {
-  display: flex;
-  flex-direction: column;
+.name {
+  @extend %list;
 }
 
 .primary {
@@ -20,15 +23,12 @@
   line-height: 110%;
 }
 
-.element {
-  display: flex;
-  flex-direction: column;
-}
-
 .aka {
   color: color.get-theme-color(text-color-secondary)
 }
 
-.location {
-  font-size: 1.25em;
+.affiriation {
+  @extend %list;
+  gap: 0.5em;
 }
+

src/pages/about/organisms/Introduction.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { AwaitFetch } from "~/comps/shared/AwaitFetch";
+import { Affiliation } from "../atoms/Affiriation";
+import { useBasicAPI } from "../controller";
+
+import styles from "./Introduction.module.scss";
+
+export const Introduction = () => {
+  const { loading, error, data } = useBasicAPI();
+
+  return (
+    <AwaitFetch loading={loading} error={error} data={data}>
+      {(data) => (
+        <div className={styles.wrapper}>
+          <div className={styles.name}>
+            <span className={styles.primary}>{data.basic.name.primary}</span>
+            <span className={styles.aka}>
+              {data.basic.name.aka.join(" / ")}
+            </span>
+          </div>
+          <div className={styles.affiriation}>
+            {data.basic.affiliation.map((a, key) => (
+              <Affiliation {...a} key={key} />
+            ))}
+          </div>
+          <p>{data.basic.introduction}</p>
+        </div>
+      )}
+    </AwaitFetch>
+  );
+};

src/pages/splash/Splash.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useHistory } from "react-router-dom";
 import { combineClassName } from "~/utils/combineClassName";
-import { TypingEffect } from "./comps/TypingEffect";
+import { TypingEffect } from "./organisms/TypingEffect";
 import styles from "./Splash.module.scss";
 
 export const Splash = () => {