From 0997e8fdb81e83e47c1abab1ca444963abcb64c7 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 29 Jan 2023 20:01:56 +0100 Subject: [PATCH] refactor to pages --- .../articles/editor/[articleId]/layout.tsx | 2 +- .../articles/editor/[articleId]/page.tsx | 2 +- app/admin/articles/page.tsx | 4 +- .../categories/editor/[categoryId]/layout.tsx | 2 +- .../categories/editor/[categoryId]/page.tsx | 2 +- app/admin/images/page.tsx | 2 +- .../[categoryName]/[articleName]/Sidebar.tsx | 28 - .../[categoryName]/[articleName]/head.tsx | 24 +- .../[categoryName]/[articleName]/layout.tsx | 2 +- .../[categoryName]/[articleName]/page.tsx | 44 +- app/articles/page.tsx | 16 +- app/head.tsx | 12 +- app/layout.tsx | 15 +- app/page.tsx | 4 +- app/testing/typography/page.tsx | 38 +- .../ContentTable.tsx | 4 +- components/Markdown.tsx | 6 +- components/Sidebar.tsx | 28 + manager/fetchManager.ts | 77 + next.config.js | 18 - package-lock.json | 2962 +++++++++++------ package.json | 6 +- pages/api/articles/index.ts | 4 + pages/api/categories/{index.tsx => index.ts} | 0 pages/api/{search.tsx => search.ts} | 0 utils.tsx => utils.ts | 0 26 files changed, 2050 insertions(+), 1252 deletions(-) delete mode 100644 app/articles/[categoryName]/[articleName]/Sidebar.tsx rename {app/articles/[categoryName]/[articleName] => components}/ContentTable.tsx (76%) create mode 100644 components/Sidebar.tsx create mode 100644 manager/fetchManager.ts rename pages/api/categories/{index.tsx => index.ts} (100%) rename pages/api/{search.tsx => search.ts} (100%) rename utils.tsx => utils.ts (100%) diff --git a/app/admin/articles/editor/[articleId]/layout.tsx b/app/admin/articles/editor/[articleId]/layout.tsx index 6eb6e0a..5ffca51 100644 --- a/app/admin/articles/editor/[articleId]/layout.tsx +++ b/app/admin/articles/editor/[articleId]/layout.tsx @@ -1,3 +1,3 @@ -export default async function Layout({ children }) { +export default async function AdminArticleEditorLayout({ children }) { return
{children}
; } diff --git a/app/admin/articles/editor/[articleId]/page.tsx b/app/admin/articles/editor/[articleId]/page.tsx index 65d7764..db12810 100644 --- a/app/admin/articles/editor/[articleId]/page.tsx +++ b/app/admin/articles/editor/[articleId]/page.tsx @@ -18,7 +18,7 @@ import Markdown from "../../../../../components/Markdown"; type ArticleWithCategory = Prisma.ArticleGetPayload<{ include: { category: true } }>; -export default function ArticleEditor({ params }: { params: { articleId: string } }) { +export default function AdminArticlesEditorPage({ params }: { params: { articleId: string } }) { const router = useRouter(); const [title, setTitle] = useState(""); const [selectCategoriesOptions, setSelectCategoriesOptions] = useState([]); diff --git a/app/admin/articles/page.tsx b/app/admin/articles/page.tsx index 0b1fa07..18b024d 100644 --- a/app/admin/articles/page.tsx +++ b/app/admin/articles/page.tsx @@ -2,7 +2,7 @@ import React from "react"; -function AdminArticlesPage() { +export default function AdminArticlesPage() { return (

Page to manage articles

@@ -11,5 +11,3 @@ function AdminArticlesPage() {
); } - -export default AdminArticlesPage; diff --git a/app/admin/categories/editor/[categoryId]/layout.tsx b/app/admin/categories/editor/[categoryId]/layout.tsx index 6eb6e0a..5c0796f 100644 --- a/app/admin/categories/editor/[categoryId]/layout.tsx +++ b/app/admin/categories/editor/[categoryId]/layout.tsx @@ -1,3 +1,3 @@ -export default async function Layout({ children }) { +export default async function AdminCategoriesEditorLayout({ children }) { return
{children}
; } diff --git a/app/admin/categories/editor/[categoryId]/page.tsx b/app/admin/categories/editor/[categoryId]/page.tsx index b7f680c..9435edb 100644 --- a/app/admin/categories/editor/[categoryId]/page.tsx +++ b/app/admin/categories/editor/[categoryId]/page.tsx @@ -14,7 +14,7 @@ import { apiUrl } from "../../../../../global"; type CategoryWithSvg = Prisma.CategoryGetPayload<{ include: { svg: true } }>; -export default function CategoryEditor({ params }: { params: { categoryId: string } }) { +export default function AdminCategoriesEditor({ params }: { params: { categoryId: string } }) { const router = useRouter(); const [title, setTitle] = useState(""); const [color, setColor] = useState(""); diff --git a/app/admin/images/page.tsx b/app/admin/images/page.tsx index b133866..73319b5 100644 --- a/app/admin/images/page.tsx +++ b/app/admin/images/page.tsx @@ -19,6 +19,6 @@ async function getImages(): Promise { })); } -export default async function page() { +export default async function AdminImagesPage() { return ; } diff --git a/app/articles/[categoryName]/[articleName]/Sidebar.tsx b/app/articles/[categoryName]/[articleName]/Sidebar.tsx deleted file mode 100644 index bedbd60..0000000 --- a/app/articles/[categoryName]/[articleName]/Sidebar.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; -import styles from "../../../../styles/modules/Sidebar.module.scss"; -export default function Sidebar() { - return ( - - ); -} diff --git a/app/articles/[categoryName]/[articleName]/head.tsx b/app/articles/[categoryName]/[articleName]/head.tsx index a75deda..45950b4 100644 --- a/app/articles/[categoryName]/[articleName]/head.tsx +++ b/app/articles/[categoryName]/[articleName]/head.tsx @@ -1,17 +1,13 @@ import { Article } from "@prisma/client"; -import { GetArticle } from "./page"; +import { FetchManager } from "../../../../manager/fetchManager"; -export default async function Head({ - params, -}: { - params: { articleName: string; categoryName: string }; -}) { - const articleName: string = params.articleName; - const article: Article = await GetArticle(articleName); - return ( - <> - {article?.title} - - - ); +export default async function ArticleHead({ params }: { params: { articleName: string; categoryName: string } }) { + const articleName: string = params.articleName; + const article: Article = await FetchManager.Article.getByName(articleName); + return ( + <> + {article?.title} + + + ); } diff --git a/app/articles/[categoryName]/[articleName]/layout.tsx b/app/articles/[categoryName]/[articleName]/layout.tsx index 1ad5b9a..547720c 100644 --- a/app/articles/[categoryName]/[articleName]/layout.tsx +++ b/app/articles/[categoryName]/[articleName]/layout.tsx @@ -1,3 +1,3 @@ -export default function Layout({ children }) { +export default function ArticleLayout({ children }) { return
{children}
; } diff --git a/app/articles/[categoryName]/[articleName]/page.tsx b/app/articles/[categoryName]/[articleName]/page.tsx index 061d841..501b56d 100644 --- a/app/articles/[categoryName]/[articleName]/page.tsx +++ b/app/articles/[categoryName]/[articleName]/page.tsx @@ -1,31 +1,15 @@ -import { marked } from "marked"; -import ContentTable from "./ContentTable"; -import Sidebar from "./Sidebar"; +import ContentTable from "../../../../components/ContentTable"; +import Sidebar from "../../../../components/Sidebar"; import styles from "../../../../styles/modules/Article.module.scss"; import Image from "next/image"; -import urlJoin from "url-join"; -import { apiUrl } from "../../../../global"; -import { Prisma } from "@prisma/client"; import Markdown from "../../../../components/Markdown"; -import { IContentTableEntry } from "../../../../types/contentTable"; - -type ArticleWithIncludes = Prisma.ArticleGetPayload<{ - include: { category: true; image: true }; -}>; - -export async function GetArticle(articleName: string): Promise { - const result: Response = await fetch(urlJoin(apiUrl, `articles/name/${articleName ?? ""}`), { - cache: "force-cache", - next: { revalidate: 60 * 10 }, - }); - - return result.json(); -} +import { ArticleWithIncludes, FetchManager } from "../../../../manager/fetchManager"; +import { formatTextToUrlName } from "../../../../utils"; //* MAIN export default async function ArticlePage({ params }: { params: { articleName: string; categoryName: string } }) { - const articleName: string = params.articleName.toLowerCase().replaceAll("%20", " "); - const article: ArticleWithIncludes = await GetArticle(articleName); + const articleName: string = formatTextToUrlName(params.articleName); + const article: ArticleWithIncludes = await FetchManager.Article.getByName(articleName); const dateUpdated: Date = new Date(article.dateUpdated); const dateCreated: Date = new Date(article.dateCreated); @@ -60,14 +44,6 @@ export default async function ArticlePage({ params }: { params: { articleName: s

{article?.introduction}

- - {/*
- */} @@ -75,12 +51,8 @@ export default async function ArticlePage({ params }: { params: { articleName: s } export async function generateStaticParams() { - const articles: ArticleWithIncludes[] = await ( - await fetch(urlJoin(apiUrl, `articles/`), { - cache: "no-cache", - next: { revalidate: 60 * 10 }, - }) - ).json(); + // Fetchmanager does not work here + const articles: ArticleWithIncludes[] = await FetchManager.Article.list(false); return await Promise.all( articles.map(async (article) => ({ diff --git a/app/articles/page.tsx b/app/articles/page.tsx index 38a1671..644c9e9 100644 --- a/app/articles/page.tsx +++ b/app/articles/page.tsx @@ -1,22 +1,10 @@ import styles from "../../styles/modules/CategoryList.module.scss"; import Link from "next/link"; -import { Category, Svg, Prisma } from "@prisma/client"; -import urlJoin from "url-join"; -import { apiUrl } from "../../global"; -type CategoryWithSvg = Prisma.CategoryGetPayload<{ include: { svg: true } }>; - -export async function GetCategories(): Promise { - const result: Response = await fetch(urlJoin(apiUrl, `categories`), { - cache: "force-cache", - next: { revalidate: 3600 }, - }); - - return result.json(); -} +import { FetchManager } from "../../manager/fetchManager"; export default async function CategoryList() { - const categories = await GetCategories(); + const categories = await FetchManager.Category.list(); return (

Overview

diff --git a/app/head.tsx b/app/head.tsx index 08d88ca..34c8670 100644 --- a/app/head.tsx +++ b/app/head.tsx @@ -1,7 +1,7 @@ -export default async function Head() { - return ( - <> - - - ); +export default async function RootHead() { + return ( + <> + + + ); } diff --git a/app/layout.tsx b/app/layout.tsx index d5baa7e..1e2e2d5 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,21 +1,10 @@ import "../styles/globals.scss"; import "../styles/variables_colors.scss"; import "../styles/variables.scss"; -import { Category } from "@prisma/client"; -import urlJoin from "url-join"; -import { apiUrl } from "../global"; import Link from "next/link"; import Footer from "../components/Footer"; import Nav from "../components/Nav"; - -async function getCategories(): Promise { - const result: Response = await fetch(urlJoin(apiUrl, `categories`), { - cache: "no-cache", - next: { revalidate: 3600 }, - }); - - return await result.json(); -} +import { FetchManager } from "../manager/fetchManager"; export default async function RootLayout({ children }: { children: React.ReactNode }) { return ( @@ -27,7 +16,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo Admin
-
{children}