classでproject dataをwrapするようにする

piny940 · Jul 29, 2023 · cef0063 · cef0063
1 parent 356f9c1
commit cef0063
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 38 deletions.
diff --git a/src/components/Portfolio/ProjectItem.tsx b/src/components/Portfolio/ProjectItem.tsx
@@ -1,19 +1,20 @@
-import { ProjectType } from '@/resources/types'
 import styled from 'styled-components'
 import { MaterialIcon } from '../Common/MaterialIcon'
 import Link from 'next/link'
 import { useTheme } from '@/context/ThemeProvider'
 import Image from 'next/image'
 import githubWhiteIcon from '../../resources/images/common/github-white.png'
 import githubIcon from '../../resources/images/common/github.png'
+import { ProjectData } from '@/data/projects'
+import { useMemo } from 'react'
 
 const ProjectItemDiv = styled.div`
   min-width: 200px;
   max-width: 100%;
 `
 
 export type ProjectItemProps = {
-  project: ProjectType
+  project: ProjectData
   className?: string
 }
 
@@ -22,19 +23,21 @@ export const ProjectItem: React.FC<ProjectItemProps> = ({
   className = '',
 }) => {
   const { theme } = useTheme()
+  const githubLink = useMemo(() => project.getGithub(), [project])
+  const projectLink = useMemo(() => project.getLink(), [project])
 
   return (
     <ProjectItemDiv
       className={
         'p-3 rounded border d-flex flex-column align-items-center ' + className
       }
     >
-      <Link href={`/projects/${project.id}`}>
-        <h3 className="h5 my-1 title-underline pb-1">{project.title}</h3>
+      <Link href={`/projects/${project.getId()}`}>
+        <h3 className="h5 my-1 title-underline pb-1">{project.getTitle()}</h3>
       </Link>
       <p className="mt-2 mb-1 d-flex align-items-center">
-        {project.github && (
-          <Link target="_blank" href={project.github} className="mx-1">
+        {githubLink && (
+          <Link target="_blank" href={githubLink} className="mx-1">
             <Image
               src={theme === 'light' ? githubIcon : githubWhiteIcon}
               width={31}
@@ -43,13 +46,13 @@ export const ProjectItem: React.FC<ProjectItemProps> = ({
             />
           </Link>
         )}
-        {project.link && (
-          <Link href={project.link} target="_blank" className="mx-1 text-body">
+        {projectLink && (
+          <Link href={projectLink} target="_blank" className="mx-1 text-body">
             <MaterialIcon name="share" />
           </Link>
         )}
       </p>
-      <p className="my-1">{project.description}</p>
+      <p className="my-1">{project.getDescription()}</p>
     </ProjectItemDiv>
   )
 }
diff --git a/src/containers/Project.tsx b/src/containers/Project.tsx
@@ -7,30 +7,36 @@ import githubIcon from '../resources/images/common/github.png'
 import { MaterialIcon } from '@/components/Common/MaterialIcon'
 import Link from 'next/link'
 import { MarkdownDisplay } from '@/components/Common/MarkdownDisplay'
+import { useMemo } from 'react'
 
 export type ProjectShowProps = {
   id: string
 }
 
 export const ProjectShow: React.FC<ProjectShowProps> = ({ id }) => {
-  const project = projectsData.find((v) => v.id === id)
+  const project = projectsData.find((v) => v.getId() === id)
   const { theme } = useTheme()
 
+  const githubLink = useMemo(() => project?.getGithub(), [project])
+  const imageSrc = useMemo(() => project?.getImageSrc(), [project])
+  const projectLink = useMemo(() => project?.getLink(), [project])
+
   if (!project) return <Error statusCode={404} />
+
   return (
     <div className="wrapper mx-auto mt-3">
-      <h1 className="title-underline ps-2">{project.title}</h1>
+      <h1 className="title-underline ps-2">{project.getTitle()}</h1>
       <div className="row">
         <div className="col-lg-8">
           <div className="px-2">
-            <MarkdownDisplay src={project.detailSrc} />
+            <MarkdownDisplay src={project.getDetailSrc()} />
           </div>
         </div>
         <div className="col-lg-4">
           <div className="mt-2">
-            {project?.imageSrc && (
+            {imageSrc && (
               <Image
-                src={project.imageSrc}
+                src={imageSrc}
                 alt="project image"
                 style={{ width: '100%', height: 'auto' }}
                 width={1920}
@@ -41,8 +47,8 @@ export const ProjectShow: React.FC<ProjectShowProps> = ({ id }) => {
           <div className="my-2 mx-3 d-flex flex-column align-items-center">
             <ul className="list-unstyled d-flex">
               <li className="mx-1">
-                {project.github && (
-                  <Link target="_blank" href={project.github} className="mx-1">
+                {githubLink && (
+                  <Link target="_blank" href={githubLink} className="mx-1">
                     <Image
                       src={theme === 'light' ? githubIcon : githubWhiteIcon}
                       width={31}
@@ -53,9 +59,9 @@ export const ProjectShow: React.FC<ProjectShowProps> = ({ id }) => {
                 )}
               </li>
               <li className="mx-1">
-                {project.link && (
+                {projectLink && (
                   <Link
-                    href={project.link}
+                    href={projectLink}
                     target="_blank"
                     className="text-body"
                   >
@@ -66,10 +72,10 @@ export const ProjectShow: React.FC<ProjectShowProps> = ({ id }) => {
             </ul>
             <div className="skills text-muted small">
               <span className="me-2">使用技術:</span>{' '}
-              {project.skills.map((skill, i) => (
+              {project.getSkills().map((skill, i) => (
                 <span className="me-2" key={skill}>
                   {skill}
-                  {i !== project.skills.length - 1 && ','}
+                  {i !== project.getSkills().length - 1 && ','}
                 </span>
               ))}
             </div>

diff --git a/src/data/projects.ts b/src/data/projects.ts
@@ -1,15 +1,26 @@
 import { skill } from '@/resources/enums'
-import { ProjectType } from '@/resources/types'
 
-export const projectsData: ProjectType[] = [
+const PROJECT_IMAGE_URL = '/images/projects'
+const GITHUB_URL = 'https://github.com'
+const PROJECT_DETAIL_URL = '/documents/projects'
+
+export interface ProjectType {
+  title: string
+  id: string
+  description: string
+  link: string | null
+  github?: string | null
+  imageSrc?: string | null
+  detailSrc?: string
+  skills: skill[]
+}
+
+const PROJECTS_DATA: ProjectType[] = [
   {
     title: '歌枠データベース',
     id: 'song-list',
     description: 'Vtuberが歌った曲を検索できます',
     link: 'https://song-list.piny940.com',
-    github: 'https://github.com/piny940/song-list',
-    imageSrc: '/images/projects/song-list.png',
-    detailSrc: '/documents/projects/song-list.md',
     skills: [skill.rails, skill.react, skill.next, skill.typescript],
   },
   {
@@ -29,6 +40,7 @@ export const projectsData: ProjectType[] = [
     github: 'https://github.com/piny940/emoji-creater',
     detailSrc: '',
     skills: [],
+    link: null,
   },
   {
     title: 'チャットアプリ',
@@ -38,6 +50,7 @@ export const projectsData: ProjectType[] = [
     github: 'https://github.com/piny940/clubroom',
     detailSrc: '',
     skills: [],
+    link: null,
   },
   {
     title: 'ポートフォリオ',
@@ -55,6 +68,7 @@ export const projectsData: ProjectType[] = [
     github: 'https://github.com/piny940/mashiro-calender',
     detailSrc: '',
     skills: [],
+    link: null,
   },
   {
     title: 'オセロアプリ',
@@ -63,6 +77,7 @@ export const projectsData: ProjectType[] = [
     github: 'https://github.com/piny940/python-reverse',
     detailSrc: '',
     skills: [],
+    link: null,
   },
   {
     title: 'メカ少女シューティング',
@@ -73,3 +88,39 @@ export const projectsData: ProjectType[] = [
     skills: [],
   },
 ]
+
+export class ProjectData {
+  #project: ProjectType
+
+  constructor(id: string) {
+    const project = PROJECTS_DATA.find((project) => project.id === id)
+    if (!project) throw new Error('Project not fond')
+    this.#project = project
+  }
+
+  getTitle = () => this.#project.title
+  getId = () => this.#project.id
+  getDescription = () => this.#project.description
+  getLink = () => this.#project.link
+  getDetailSrc = () =>
+    this.#project.detailSrc === undefined
+      ? `${PROJECT_DETAIL_URL}/${this.#project.id}.md`
+      : this.#project.detailSrc
+
+  getSkills = () => this.#project.skills
+  getGithub = () => {
+    return this.#project.github === undefined
+      ? `${GITHUB_URL}/${this.#project.id}`
+      : this.#project.github
+  }
+
+  getImageSrc = () => {
+    return this.#project.imageSrc === undefined
+      ? `${PROJECT_IMAGE_URL}/${this.#project.id}.png`
+      : this.#project.imageSrc
+  }
+}
+
+export const projectsData = PROJECTS_DATA.map(
+  (project) => new ProjectData(project.id)
+)
diff --git a/src/resources/types.ts b/src/resources/types.ts
@@ -1,19 +1,7 @@
-import { skill } from './enums'
-
 export type Theme = 'dark' | 'light'
 
 export type SkillType = {
   name: string
   percent: number
   logoSrc?: string
 }
-export type ProjectType = {
-  title: string
-  id: string
-  description: string
-  link?: string
-  github?: string
-  imageSrc?: string
-  detailSrc: string
-  skills: skill[]
-}
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,