From 4f7c58a804a6f1ed51b27799c9dab20796b3557d Mon Sep 17 00:00:00 2001
From: taga3s <bepozurapu274@gmail.com>
Date: Wed, 7 Aug 2024 09:22:48 +0900
Subject: [PATCH] feat: add history page

---
 app/api/workExperience/fetch.ts               | 25 +++++++++++++
 app/api/workExperience/index.ts               |  2 +
 app/api/workExperience/model.ts               |  9 +++++
 .../HistoryEducationalBackground.css.ts       | 15 ++++++++
 .../history/HistoryEducationalBackground.tsx  | 17 +++++++++
 .../history/HistoryPresenter.css.ts           |  9 +++++
 app/components/history/HistoryPresenter.tsx   | 22 +++++++++++
 .../history/HistoryWorkExperience.css.ts      | 17 +++++++++
 .../history/HistoryWorkExperience.tsx         | 37 +++++++++++++++++++
 app/routes/history.tsx                        |  5 ++-
 10 files changed, 157 insertions(+), 1 deletion(-)
 create mode 100644 app/api/workExperience/fetch.ts
 create mode 100644 app/api/workExperience/index.ts
 create mode 100644 app/api/workExperience/model.ts
 create mode 100644 app/components/history/HistoryEducationalBackground.css.ts
 create mode 100644 app/components/history/HistoryEducationalBackground.tsx
 create mode 100644 app/components/history/HistoryPresenter.css.ts
 create mode 100644 app/components/history/HistoryPresenter.tsx
 create mode 100644 app/components/history/HistoryWorkExperience.css.ts
 create mode 100644 app/components/history/HistoryWorkExperience.tsx

diff --git a/app/api/workExperience/fetch.ts b/app/api/workExperience/fetch.ts
new file mode 100644
index 0000000..c256a48
--- /dev/null
+++ b/app/api/workExperience/fetch.ts
@@ -0,0 +1,25 @@
+import type { Context } from "hono";
+import apiClient from "../apiClient";
+
+type Response = {
+  contents: {
+    id: string;
+    span: string;
+    company: string;
+    description: string;
+    techStack: string;
+    order: number;
+  }[];
+  totalCount: number;
+  offset: number;
+  limit: number;
+};
+
+const fetchWorkExperience = async (c: Context) => {
+  const res = await apiClient.GET<Response>(c, "/work-experience");
+  return res.contents.map((content) => {
+    return { ...content };
+  });
+};
+
+export { fetchWorkExperience };
diff --git a/app/api/workExperience/index.ts b/app/api/workExperience/index.ts
new file mode 100644
index 0000000..11a3610
--- /dev/null
+++ b/app/api/workExperience/index.ts
@@ -0,0 +1,2 @@
+export * from "./fetch";
+export * from "./model";
diff --git a/app/api/workExperience/model.ts b/app/api/workExperience/model.ts
new file mode 100644
index 0000000..2d08bbe
--- /dev/null
+++ b/app/api/workExperience/model.ts
@@ -0,0 +1,9 @@
+type WorkExperience = {
+  span: string;
+  company: string;
+  description: string;
+  techStack: string;
+  order: number;
+};
+
+export type { WorkExperience };
diff --git a/app/components/history/HistoryEducationalBackground.css.ts b/app/components/history/HistoryEducationalBackground.css.ts
new file mode 100644
index 0000000..1a9da9a
--- /dev/null
+++ b/app/components/history/HistoryEducationalBackground.css.ts
@@ -0,0 +1,15 @@
+import { css } from "hono/css";
+
+const list = css`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+`;
+
+const listItem = css`
+  display: flex;
+  gap: 16px;
+`;
+
+export { list, listItem };
diff --git a/app/components/history/HistoryEducationalBackground.tsx b/app/components/history/HistoryEducationalBackground.tsx
new file mode 100644
index 0000000..db43fdf
--- /dev/null
+++ b/app/components/history/HistoryEducationalBackground.tsx
@@ -0,0 +1,17 @@
+import { Section } from "../layout/Section";
+import { list, listItem } from "./HistoryEducationalBackground.css";
+
+const HistoryEducationalBackground = () => {
+  return (
+    <Section title="Educational background">
+      <ul class={list}>
+        <li class={listItem}>
+          <span>2022年4月 - 現在</span>
+          <span>早稲田大学法学部在学中</span>
+        </li>
+      </ul>
+    </Section>
+  );
+};
+
+export { HistoryEducationalBackground };
diff --git a/app/components/history/HistoryPresenter.css.ts b/app/components/history/HistoryPresenter.css.ts
new file mode 100644
index 0000000..e588253
--- /dev/null
+++ b/app/components/history/HistoryPresenter.css.ts
@@ -0,0 +1,9 @@
+import { css } from "hono/css";
+
+const layout = css`
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+`;
+
+export { layout };
diff --git a/app/components/history/HistoryPresenter.tsx b/app/components/history/HistoryPresenter.tsx
new file mode 100644
index 0000000..338d1b7
--- /dev/null
+++ b/app/components/history/HistoryPresenter.tsx
@@ -0,0 +1,22 @@
+import type { FC } from "hono/jsx";
+import type { WorkExperience } from "../../api/workExperience";
+import { HistoryEducationalBackground } from "./HistoryEducationalBackground";
+import { layout } from "./HistoryPresenter.css";
+import { HistoryWorkExperience } from "./HistoryWorkExperience";
+
+type Props = {
+  workExperience: WorkExperience[];
+};
+
+const HistoryPresenter: FC<Props> = (props) => {
+  const { workExperience } = props;
+
+  return (
+    <div class={layout}>
+      <HistoryWorkExperience workExperience={workExperience} />
+      <HistoryEducationalBackground />
+    </div>
+  );
+};
+
+export { HistoryPresenter };
diff --git a/app/components/history/HistoryWorkExperience.css.ts b/app/components/history/HistoryWorkExperience.css.ts
new file mode 100644
index 0000000..bd291ab
--- /dev/null
+++ b/app/components/history/HistoryWorkExperience.css.ts
@@ -0,0 +1,17 @@
+import { css } from "hono/css";
+
+const list = css`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+`;
+
+const description = css`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+`;
+
+export { list, description };
diff --git a/app/components/history/HistoryWorkExperience.tsx b/app/components/history/HistoryWorkExperience.tsx
new file mode 100644
index 0000000..66a026f
--- /dev/null
+++ b/app/components/history/HistoryWorkExperience.tsx
@@ -0,0 +1,37 @@
+import type { FC } from "hono/jsx";
+import type { WorkExperience } from "../../api/workExperience";
+import { Section } from "../layout/Section";
+import { list } from "./HistoryEducationalBackground.css";
+import { description } from "./HistoryWorkExperience.css";
+
+type Props = {
+  workExperience: WorkExperience[];
+};
+
+const HistoryWorkExperience: FC<Props> = (props) => {
+  const { workExperience } = props;
+
+  return (
+    <Section title="Work experience">
+      <ul class={list}>
+        {workExperience
+          .toSorted((a, b) => a.order - b.order)
+          .map((item) => (
+            <li key={item.company}>
+              <details>
+                <summary>
+                  {item.span}: {item.company}
+                </summary>
+                <p class={description}>
+                  <span>{item.description}</span>
+                  <span>使用技術: {item.techStack}</span>
+                </p>
+              </details>
+            </li>
+          ))}
+      </ul>
+    </Section>
+  );
+};
+
+export { HistoryWorkExperience };
diff --git a/app/routes/history.tsx b/app/routes/history.tsx
index 181de21..fe66472 100644
--- a/app/routes/history.tsx
+++ b/app/routes/history.tsx
@@ -1,5 +1,8 @@
 import { createRoute } from "honox/factory";
+import { HistoryPresenter } from "../components/history/HistoryPresenter";
+import { fetchWorkExperience } from "../api/workExperience";
 
 export default createRoute(async (c) => {
-  return c.render(<div>history</div>)
+  const workExperience = await fetchWorkExperience(c);
+  return c.render(<HistoryPresenter workExperience={workExperience} />);
 });