From f28e5b256d08c661d957542519d197caa4c85384 Mon Sep 17 00:00:00 2001 From: loxygenk Date: Sat, 20 Nov 2021 16:17:41 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=9A=9A=20Improve=20directory=20struct?= =?UTF-8?q?ure?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/about/About.tsx | 4 ++-- .../about/{ => atoms}/Avatar.module.scss | 0 src/pages/about/{ => atoms}/Avatar.tsx | 0 .../{ => organisms}/Introduction.module.scss | 22 +++++++++---------- 4 files changed, 13 insertions(+), 13 deletions(-) rename src/pages/about/{ => atoms}/Avatar.module.scss (100%) rename src/pages/about/{ => atoms}/Avatar.tsx (100%) rename src/pages/about/{ => organisms}/Introduction.module.scss (68%) diff --git a/src/pages/about/About.tsx b/src/pages/about/About.tsx index cc75481..99fc59c 100644 --- a/src/pages/about/About.tsx +++ b/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 = () => ( diff --git a/src/pages/about/Avatar.module.scss b/src/pages/about/atoms/Avatar.module.scss similarity index 100% rename from src/pages/about/Avatar.module.scss rename to src/pages/about/atoms/Avatar.module.scss diff --git a/src/pages/about/Avatar.tsx b/src/pages/about/atoms/Avatar.tsx similarity index 100% rename from src/pages/about/Avatar.tsx rename to src/pages/about/atoms/Avatar.tsx diff --git a/src/pages/about/Introduction.module.scss b/src/pages/about/organisms/Introduction.module.scss similarity index 68% rename from src/pages/about/Introduction.module.scss rename to src/pages/about/organisms/Introduction.module.scss index 27fe315..d1b426c 100644 --- a/src/pages/about/Introduction.module.scss +++ b/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; } + From b89b42c086e045487d663c225253384cbc496e04 Mon Sep 17 00:00:00 2001 From: loxygenk Date: Sat, 20 Nov 2021 16:20:14 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=8D=BB=20Connect=20to=20the=20API=20w?= =?UTF-8?q?ith=20the=20full=20effort?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/graphql/setup.tsx | 2 +- src/pages/about/Introduction.tsx | 23 ---------------- src/pages/about/atoms/Affiriation.module.scss | 13 +++++++++ src/pages/about/atoms/Affiriation.tsx | 11 ++++++++ src/pages/about/controller.ts | 23 ++++++++++++++++ src/pages/about/organisms/Introduction.tsx | 27 +++++++++++++++++++ 6 files changed, 75 insertions(+), 24 deletions(-) delete mode 100644 src/pages/about/Introduction.tsx create mode 100644 src/pages/about/atoms/Affiriation.module.scss create mode 100644 src/pages/about/atoms/Affiriation.tsx create mode 100644 src/pages/about/controller.ts create mode 100644 src/pages/about/organisms/Introduction.tsx diff --git a/src/api/graphql/setup.tsx b/src/api/graphql/setup.tsx index 1b9d140..56e67ee 100644 --- a/src/api/graphql/setup.tsx +++ b/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(), }); diff --git a/src/pages/about/Introduction.tsx b/src/pages/about/Introduction.tsx deleted file mode 100644 index a5ba67d..0000000 --- a/src/pages/about/Introduction.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; - -import styles from "./Introduction.module.scss"; - -export const Introduction = () => ( -
-
- フライさん - Flisan / loxygen.K -
-
-
- 茨城工業高等専門学校 - 3 年 情報系 -
-
- 茨城工業高等専門学校 - 3 年 情報系 -
-
- フライさんです． -
-); diff --git a/src/pages/about/atoms/Affiriation.module.scss b/src/pages/about/atoms/Affiriation.module.scss new file mode 100644 index 0000000..2f01110 --- /dev/null +++ b/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; +} diff --git a/src/pages/about/atoms/Affiriation.tsx b/src/pages/about/atoms/Affiriation.tsx new file mode 100644 index 0000000..863341e --- /dev/null +++ b/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 = (props) => ( +
+ {props.location} + {props.assign} +
+); diff --git a/src/pages/about/controller.ts b/src/pages/about/controller.ts new file mode 100644 index 0000000..a21f4c4 --- /dev/null +++ b/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(fetchBasic); diff --git a/src/pages/about/organisms/Introduction.tsx b/src/pages/about/organisms/Introduction.tsx new file mode 100644 index 0000000..0cc73e6 --- /dev/null +++ b/src/pages/about/organisms/Introduction.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { Affiliation } from "../atoms/Affiriation"; +import { useBasicAPI } from "../controller"; + +import styles from "./Introduction.module.scss"; + +export const Introduction = () => { + const { loading, error, data } = useBasicAPI(); + + if (loading || data === undefined) return

Loading...

; + if (error) return

Error :(

; + + return ( +
+
+ {data.basic.name.primary} + {data.basic.name.aka.join(" / ")} +
+
+ {data.basic.affiliation.map((a, key) => ( + + ))} +
+

{data.basic.introduction}

+
+ ); +}; From 447b1287d551866d7033ce506e0f1d77b83cdd79 Mon Sep 17 00:00:00 2001 From: loxygenk Date: Sat, 20 Nov 2021 16:22:37 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=9A=9A=20Change=20directory=20structu?= =?UTF-8?q?re=20in=20other=20location?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/splash/Splash.tsx | 2 +- src/pages/splash/{comps => organisms}/TypingEffect.tsx | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/pages/splash/{comps => organisms}/TypingEffect.tsx (100%) diff --git a/src/pages/splash/Splash.tsx b/src/pages/splash/Splash.tsx index 9251a84..6552d90 100644 --- a/src/pages/splash/Splash.tsx +++ b/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 = () => { diff --git a/src/pages/splash/comps/TypingEffect.tsx b/src/pages/splash/organisms/TypingEffect.tsx similarity index 100% rename from src/pages/splash/comps/TypingEffect.tsx rename to src/pages/splash/organisms/TypingEffect.tsx From 4d50147c4b5cf84d13bc1ae9aefc165b538c878c Mon Sep 17 00:00:00 2001 From: loxygenk Date: Sat, 20 Nov 2021 16:54:44 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8=20Create=20AwaitFetch=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/comps/shared/AwaitFetch.tsx | 37 ++++++++++++++++++++++ src/pages/about/organisms/Introduction.tsx | 34 +++++++++++--------- 2 files changed, 56 insertions(+), 15 deletions(-) create mode 100644 src/comps/shared/AwaitFetch.tsx diff --git a/src/comps/shared/AwaitFetch.tsx b/src/comps/shared/AwaitFetch.tsx new file mode 100644 index 0000000..93da5ec --- /dev/null +++ b/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 = { + loading: boolean; + error?: Error; + data: NonNullable | undefined; + children: (data: NonNullable) => React.ReactElement; +}; + +// TypeScript recognizes as JSX tag, however it doesn't when "". +// (adding trail comma) +export const AwaitFetch = ({ + loading, + error, + data, + children, +}: AwaitFetchProps) => { + if (error) + return ( +

+ + 読み込みに失敗しました! +

+ ); + if (loading || data === undefined) + return ( +

+ + Loading... +

+ ); + + return children(data); +}; diff --git a/src/pages/about/organisms/Introduction.tsx b/src/pages/about/organisms/Introduction.tsx index 0cc73e6..e6681d5 100644 --- a/src/pages/about/organisms/Introduction.tsx +++ b/src/pages/about/organisms/Introduction.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { AwaitFetch } from "~/comps/shared/AwaitFetch"; import { Affiliation } from "../atoms/Affiriation"; import { useBasicAPI } from "../controller"; @@ -7,21 +8,24 @@ import styles from "./Introduction.module.scss"; export const Introduction = () => { const { loading, error, data } = useBasicAPI(); - if (loading || data === undefined) return

Loading...

; - if (error) return

Error :(

; - return ( -
-
- {data.basic.name.primary} - {data.basic.name.aka.join(" / ")} -
-
- {data.basic.affiliation.map((a, key) => ( - - ))} -
-

{data.basic.introduction}

-
+ + {(data) => ( +
+
+ {data.basic.name.primary} + + {data.basic.name.aka.join(" / ")} + +
+
+ {data.basic.affiliation.map((a, key) => ( + + ))} +
+

{data.basic.introduction}

+
+ )} + ); }; From 915cff1daf544637973776a5cfeb1e31a4194816 Mon Sep 17 00:00:00 2001 From: loxygenk Date: Sat, 20 Nov 2021 16:55:41 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=8E=A8=20Tweak=20some=20style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/comps/shared/Emoji.module.scss | 6 +++++- src/comps/shared/LogoImage.module.scss | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/comps/shared/Emoji.module.scss b/src/comps/shared/Emoji.module.scss index 631afde..0c979a6 100644 --- a/src/comps/shared/Emoji.module.scss +++ b/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%; diff --git a/src/comps/shared/LogoImage.module.scss b/src/comps/shared/LogoImage.module.scss index f7a58be..ebf22d8 100644 --- a/src/comps/shared/LogoImage.module.scss +++ b/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);