Minor refactoring (#8)

* 📦 add lodash * ♻️ refactor some code
kixlab · Feb 21, 2024 · 9a6d0bb · 9a6d0bb
1 parent 476aa7c
commit 9a6d0bb
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -14,11 +14,13 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "date-fns": "^3.2.0",
+    "lodash": "^4.17.21",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@types/lodash": "^4",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

diff --git a/src/app/people/page.tsx b/src/app/people/page.tsx
@@ -3,10 +3,8 @@ import { MEMBERS } from '@/data/members'
 export default function Page() {
   return (
     <main>
-      {MEMBERS.map(({ name, lastName }, i) => (
-        <div key={i}>
-          {name} {lastName}
-        </div>
+      {MEMBERS.map(({ fullName }, i) => (
+        <div key={i}>{fullName}</div>
       ))}
     </main>
   )

diff --git a/src/app/publications/page.tsx b/src/app/publications/page.tsx
@@ -1,29 +1,35 @@
 'use client'
 
-// import React from 'react'
-
-import { PUBLICATIONS, YearTypes } from '@/data/publications'
 import PublicationCard from '@/components/PublicationCard'
-import { Sections, Section, SectionTitle, SectionContent } from '@/components/Section'
+import { Section, SectionContent, SectionTitle, Sections } from '@/components/Section'
+import { PUBLICATIONS } from '@/data/publications'
+import { uniq } from 'lodash'
 
 export default function Page() {
   return (
     <main>
       <h1>Publications</h1>
       <Sections>
-        {YearTypes.map(
-          (year, i) =>
-            PUBLICATIONS.filter(({ year: y }) => y === year).length >= 1 && (
-              <Section key={i}>
-                <SectionTitle>{year}</SectionTitle>
-                <SectionContent>
-                  {PUBLICATIONS.filter(({ year: y }) => y === year).map(pub => (
-                    <PublicationCard key={i} pub={pub} />
-                  ))}
-                </SectionContent>
-              </Section>
-            )
+        {PUBLICATIONS.filter(pub => pub.type === 'preprint').length > 0 && (
+          <Section>
+            <SectionTitle>Preprints</SectionTitle>
+            <SectionContent>
+              {PUBLICATIONS.filter(pub => pub.type === 'preprint').map(pub => (
+                <PublicationCard key={pub.title} pub={pub} />
+              ))}
+            </SectionContent>
+          </Section>
         )}
+        {uniq(PUBLICATIONS.map(p => p.year)).map((year, i) => (
+          <Section key={i}>
+            <SectionTitle>{year}</SectionTitle>
+            <SectionContent>
+              {PUBLICATIONS.filter(({ year: y }) => y === year).map(pub => (
+                <PublicationCard key={pub.title} pub={pub} />
+              ))}
+            </SectionContent>
+          </Section>
+        ))}
       </Sections>
     </main>
   )

diff --git a/src/components/PublicationCard.tsx b/src/components/PublicationCard.tsx
@@ -2,7 +2,6 @@
 
 import React from 'react'
 import styled from '@emotion/styled'
-
 import { FontVariant, Color } from '@/app/theme'
 import type { Publication } from '@/data/publications'
 import { URL } from '@/components/URL'
@@ -35,9 +34,9 @@ const URLs = styled.div`
   gap: 8px;
 `
 
-export default function PublicationCard({ key, pub }: { key: number; pub: Publication }) {
+export default function PublicationCard({ pub }: { pub: Publication }) {
   return (
-    <Card key={key}>
+    <Card>
       <Title>{pub.title}</Title>
       <Info>
         <Venue>{pub.venue}</Venue>

diff --git a/src/data/members.ts b/src/data/members.ts
@@ -12,6 +12,10 @@ class Member {
   constructor(attrs: Props) {
     Object.assign(this, attrs)
   }
+
+  get fullName() {
+    return `${this.name} ${this.lastName}`
+  }
 }
 
 export const MEMBER = {

diff --git a/src/data/publications.ts b/src/data/publications.ts
@@ -3,9 +3,6 @@ import Member, { MEMBER } from './members'
 export const PublicationTypes = ['conference', 'poster', 'workshop', 'journal', 'preprint'] as const
 export type PublicationType = (typeof PublicationTypes)[number]
 
-export const YearTypes = ['Preprints', 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017] as const // 0 means preprint
-export type YearType = (typeof YearTypes)[number]
-
 export const ResearchTopic = [
   'datamining',
   'crowdsourcing',
@@ -27,7 +24,7 @@ export enum PublicationLinkType {
 export interface Publication {
   title: string
   authors: Member[]
-  year: YearType
+  year: number
   venue: string
   topics: ResearchTopic[]
   type: PublicationType
@@ -62,9 +59,9 @@ export const PUBLICATIONS: Publication[] = [
     title: 'example: this is preprint',
     authors: [MEMBER.juhokim],
     venue: 'CHI 2018',
-    year: 'Preprints',
+    year: 2024,
     topics: ['civics', 'visualization'],
-    type: 'conference',
+    type: 'preprint',
     award: 'best example award',
     links: [],
   },
@@ -81,7 +78,7 @@ export const PUBLICATIONS: Publication[] = [
     title: 'example: this is preprint',
     authors: [MEMBER.juhokim],
     venue: 'CHI 2018',
-    year: 'Preprints',
+    year: 2024,
     topics: ['civics', 'visualization'],
     type: 'conference',
     award: 'best example award',

diff --git a/src/types/emotion.d.ts b/src/types/emotion.d.ts
diff --git a/yarn.lock b/yarn.lock
@@ -418,6 +418,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4":
+  version: 4.14.202
+  resolution: "@types/lodash@npm:4.14.202"
+  checksum: 6064d43c8f454170841bd67c8266cc9069d9e570a72ca63f06bceb484cb4a3ee60c9c1f305c1b9e3a87826049fd41124b8ef265c4dd08b00f6766609c7fe9973
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^20":
   version: 20.11.5
   resolution: "@types/node@npm:20.11.5"
@@ -2170,13 +2177,15 @@ __metadata:
   dependencies:
     "@emotion/react": "npm:^11.11.3"
     "@emotion/styled": "npm:^11.11.0"
+    "@types/lodash": "npm:^4"
     "@types/node": "npm:^20"
     "@types/react": "npm:^18"
     "@types/react-dom": "npm:^18"
     date-fns: "npm:^3.2.0"
     eslint: "npm:^8"
     eslint-config-next: "npm:14.0.4"
     eslint-config-prettier: "npm:^9.1.0"
+    lodash: "npm:^4.17.21"
     next: "npm:14.0.4"
     prettier: "npm:^3.2.4"
     react: "npm:^18"
@@ -2234,6 +2243,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash@npm:4.17.21"
+  checksum: d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c
+  languageName: node
+  linkType: hard
+
 "loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"