From 7192626dce52853f04e43528a82aa578821cfa6d Mon Sep 17 00:00:00 2001 From: Youwen Wu Date: Sun, 11 Feb 2024 13:17:54 -0800 Subject: [PATCH] add toast and loading bar --- package-lock.json | 21 ++++++++++++ package.json | 1 + src/app/author/[author]/page.tsx | 2 +- src/app/components/Loading.tsx | 14 ++++++++ src/app/components/loading.module.css | 18 ++++++++++ src/app/document/view/[slug]/page.tsx | 49 +++++++++++++++++++++------ src/app/home.module.css | 3 -- src/app/layout.tsx | 14 ++++++-- src/app/searchBar/SearchBar.tsx | 5 +++ 9 files changed, 110 insertions(+), 17 deletions(-) create mode 100644 src/app/components/Loading.tsx create mode 100644 src/app/components/loading.module.css diff --git a/package-lock.json b/package-lock.json index 43eec3e..dc3f7d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "next": "14.1.0", "react": "^18", "react-dom": "^18", + "react-toastify": "^10.0.4", "zustand": "^4.5.0" }, "devDependencies": { @@ -1163,6 +1164,14 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/clsx": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -3722,6 +3731,18 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-toastify": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.4.tgz", + "integrity": "sha512-etR3RgueY8pe88SA67wLm8rJmL1h+CLqUGHuAoNsseW35oTGJEri6eBTyaXnFKNQ80v/eO10hBYLgz036XRGgA==", + "dependencies": { + "clsx": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 531ed54..9f3e518 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "next": "14.1.0", "react": "^18", "react-dom": "^18", + "react-toastify": "^10.0.4", "zustand": "^4.5.0" }, "devDependencies": { diff --git a/src/app/author/[author]/page.tsx b/src/app/author/[author]/page.tsx index 0737b4d..48f02e2 100644 --- a/src/app/author/[author]/page.tsx +++ b/src/app/author/[author]/page.tsx @@ -2,7 +2,7 @@ import { authors, affiliations, nationalities } from '../../db/data' import { Zilla_Slab } from 'next/font/google' import Link from 'next/link' import { notFound } from 'next/navigation' -import { Fragment } from 'react' +import { Fragment, Suspense } from 'react' const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] }) diff --git a/src/app/components/Loading.tsx b/src/app/components/Loading.tsx new file mode 100644 index 0000000..fde4d7c --- /dev/null +++ b/src/app/components/Loading.tsx @@ -0,0 +1,14 @@ +import styles from './loading.module.css' +const LoadingBar = () => { + return ( +
+
+
+
+
+ ) +} + +export default LoadingBar diff --git a/src/app/components/loading.module.css b/src/app/components/loading.module.css new file mode 100644 index 0000000..f5ff28b --- /dev/null +++ b/src/app/components/loading.module.css @@ -0,0 +1,18 @@ +.progress { + animation: progress 1s infinite linear; +} + +.left-right { + transform-origin: 0% 50%; +} +@keyframes progress { + 0% { + transform: translateX(0) scaleX(0); + } + 40% { + transform: translateX(0) scaleX(0.4); + } + 100% { + transform: translateX(100%) scaleX(0.5); + } +} diff --git a/src/app/document/view/[slug]/page.tsx b/src/app/document/view/[slug]/page.tsx index a718464..51a47f6 100644 --- a/src/app/document/view/[slug]/page.tsx +++ b/src/app/document/view/[slug]/page.tsx @@ -12,7 +12,7 @@ import { epoch2datestring } from '@/app/utils/epoch2datestring' const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] }) -export function generateStaticParams () { +export function generateStaticParams() { const documentsList = Object.keys(documents) return documentsList.map((slug) => ({ slug })) } @@ -28,7 +28,7 @@ export default function Page({ const { title, authors, topics, dates, references, code, type, latest } = doc.manifest - const generateTopics = () => { + const Topics = () => { return ( <> Topics: @@ -44,7 +44,7 @@ export default function Page({ ) } - const generateCode = () => { + const Code = () => { if (code) { return ( <> @@ -62,7 +62,7 @@ export default function Page({ } } - const generateAuthors = () => { + const Authors = () => { return ( <> {authors.map((a: string, i) => ( @@ -78,7 +78,24 @@ export default function Page({ ) } - const generateItemBadge = (itemName: DocumentType) => { + const References = () => { + if (!references) return null + return ( + <> + References: + {references.map((r: string, i) => ( + + + {r} + + {i !== references.length - 1 ? ', ' : null} + + ))} + + ) + } + + const ItemBadge = ({ itemName }: Readonly<{ itemName: DocumentType }>) => { let text = '' let itemStyle: string = 'px-3 py-1.5 rounded inline-block w-fit mr-2 mt-4 text-slate-50 border-2 ' @@ -118,26 +135,38 @@ export default function Page({ className={` text-slate-800 font-bold text-5xl mb-4 ${zillaSlab.className} + text-wrap `} > {title} -

{generateAuthors()}

+

+ +

Latest revision published{' '} {epoch2datestring(dates[dates.length - 1])}

- {generateItemBadge(type)} +

Revision {latest}

Abstract

-

{abstract}

-

{generateTopics()}

-

{generateCode()}

+

+ {abstract} +

+

+ +

+

+ +

+

+ +

+
EECS
- - {children} - + }> + + {children} + +