App refactoring (#257)

* add cache

* update Panel

* next app refacoring

* app style refactoring

* years refactroing

.github/workflows/test-app.yml

@@ -59,5 +59,15 @@ jobs:
             - name: Install dependencies
               run: npm ci
 
+            - name: Cache Next.js build
+              uses: actions/cache@v4
+              with:
+                  path: .next/cache
+                  key: nextjs-${{ hashFiles('package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx', '**/*.css') }}
+                  restore-keys: nextjs-${{ hashFiles('package-lock.json') }}-
+
+            - name: Disable Next.js telemetry
+              run: npx next telemetry disable
+
             - name: Build
               run: npm run build

pages/404.tsx

@@ -1,7 +1,8 @@
 import type { NextPage } from "next"
 import { Wrapper } from "@/components/Wrapper"
 import { NotFound } from "@/components/NotFound"
-import Copyright from "@/components/Copyright"
+import { Copyright } from "@/components/Copyright"
+import { yearRange } from "@/const"
 import { Spacer } from "@/components/Spacer"
 import { Box } from "@/ui/Box"
 
@@ -11,7 +12,7 @@ const Index: NextPage = () => (
         footer={(
             <Box as={"footer"}>
                 <Spacer />
-                <Copyright />
+                <Copyright years={yearRange} />
                 <Spacer />
             </Box>
         )}

pages/_app.tsx

@@ -4,56 +4,52 @@ import "src/style/article.css"
 import "src/style/marker/marker-table.css"
 import "src/style/kazimir/video.css"
 
-import App from "next/app"
+import type { AppProps } from "next/app"
 import Head from "next/head"
 import Script from "next/script"
 import { YMetrika } from "@/components/YMetrika"
 import { ThemeColor } from "@/ui/ThemeColor"
 
-export default class MyApp extends App {
-    render() {
-        const { Component, pageProps } = this.props
+export default function MyApp({ Component, pageProps }: AppProps) {
+    return (
+        <>
+            <Head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
+                <meta name="referrer" content="unsafe-url" />
 
-        return (
-            <>
-                <Head>
-                    <meta charSet="utf-8" />
-                    <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
-                    <meta name="referrer" content="unsafe-url" />
+                <meta name="google-site-verification" content="8BxOTw-Q02DS2KAdcGcnIMwiPZ58DVB18XpOfRibCcg" />
+                <meta name="google-site-verification" content="A-TEemUw4hHpULUDCd6xhxfHnyRbgKtss90JGKXnSpw" />
+                <meta name='yandex-verification' content='643c7dac144b9dac' />
+                <meta name="msvalidate.01" content="E878301FE3E3F12D233A6B1156889601" />
+                <meta name="proculture-verification" content="79110940fd847c3cfe52392ed68f3210" />
+                <meta name="apple-mobile-web-app-capable" content="yes" />
 
-                    <meta name="google-site-verification" content="8BxOTw-Q02DS2KAdcGcnIMwiPZ58DVB18XpOfRibCcg" />
-                    <meta name="google-site-verification" content="A-TEemUw4hHpULUDCd6xhxfHnyRbgKtss90JGKXnSpw" />
-                    <meta name='yandex-verification' content='643c7dac144b9dac' />
-                    <meta name="msvalidate.01" content="E878301FE3E3F12D233A6B1156889601" />
-                    <meta name="proculture-verification" content="79110940fd847c3cfe52392ed68f3210" />
-                    <meta name="apple-mobile-web-app-capable" content="yes" />
+                <link rel="icon" type="image/png" href="/static/graphics/favicon-32.png" />
+                <link rel="apple-touch-icon" sizes="57x57" href="/static/graphics/favicon-57.png" />
+                <link rel="apple-touch-icon" sizes="72x72" href="/static/graphics/favicon-72.png" />
+                <link rel="apple-touch-icon" sizes="114x114" href="/static/graphics/favicon-114.png" />
+                <link rel="apple-touch-icon" sizes="144x144" href="/static/graphics/favicon-144.png" />
 
-                    <link rel="icon" type="image/png" href="/static/graphics/favicon-32.png" />
-                    <link rel="apple-touch-icon" sizes="57x57" href="/static/graphics/favicon-57.png" />
-                    <link rel="apple-touch-icon" sizes="72x72" href="/static/graphics/favicon-72.png" />
-                    <link rel="apple-touch-icon" sizes="114x114" href="/static/graphics/favicon-114.png" />
-                    <link rel="apple-touch-icon" sizes="144x144" href="/static/graphics/favicon-144.png" />
+                <link
+                    rel="alternate"
+                    type="application/rss+xml"
+                    title="Шлиссельбургская Детская Художественная Школа"
+                    href="/feed.xml"
+                />
 
-                    <link
-                        rel="alternate"
-                        type="application/rss+xml"
-                        title="Шлиссельбургская Детская Художественная Школа"
-                        href="/feed.xml"
-                    />
+                {process.env.NEXT_PUBLIC_YMETRIKA_ACCOUNT && (
+                    <YMetrika account={Number(process.env.NEXT_PUBLIC_YMETRIKA_ACCOUNT)} />
+                )}
 
-                    {process.env.NEXT_PUBLIC_YMETRIKA_ACCOUNT && (
-                        <YMetrika account={Number(process.env.NEXT_PUBLIC_YMETRIKA_ACCOUNT)} />
-                    )}
+                <ThemeColor
+                    color="white"
+                    darkColor="hsl(240, 10%, 10%)"
+                />
+            </Head>
+            <Script src="https://culturaltracking.ru/static/js/spxl.js?pixelId=27154" data-pixel-id="27154"></Script>
 
-                    <ThemeColor
-                        color="white"
-                        darkColor="hsl(240, 10%, 10%)"
-                    />
-                </Head>
-                <Script src="https://culturaltracking.ru/static/js/spxl.js?pixelId=27154" data-pixel-id="27154"></Script>
-
-                <Component {...pageProps} />
-            </>
-        )
-    }
+            <Component {...pageProps} />
+        </>
+    )
 }

src/components/App/app.module.css

@@ -0,0 +1,18 @@
+.navigation {
+    padding: var(--size-s);
+}
+
+.footerLinks {
+    margin-bottom: var(--size-l);
+}
+
+.footerPanel {
+    align-items: baseline;
+}
+
+.gosuslugi {
+    background-color: white;
+    padding: 10px;
+    border-radius: 10px;
+    margin-bottom: 30px;
+}

src/components/App/index.tsx

@@ -1,3 +1,5 @@
+import s from "./app.module.css"
+
 import { Wrapper } from "../Wrapper"
 import { MenuContext } from "@/context/MenuContext"
 import { Footer } from "../Footer"
@@ -9,7 +11,8 @@ import { useMobile } from "@/hooks/useMobile"
 import { Navigation } from "@/components/Navigation"
 import { Box } from "@/ui/Box"
 import { AccessibilityButton } from "../AccessibilityButton"
-import Copyright from "@/components/Copyright"
+import { Copyright } from "@/components/Copyright"
+import { yearRange } from "@/const"
 import { Spacer } from "../Spacer"
 import { Author } from "../Author"
 import { Title } from "@/ui/Title"
@@ -18,7 +21,6 @@ import { Contacts } from "../Contacts"
 import dynamic from "next/dynamic"
 import Link from "next/link"
 
-import Image from "next/image"
 import AccessibilityPanel from "../AccessibilityPanel"
 import useAccessibility from "@/hooks/useAccessibility"
 
@@ -34,13 +36,10 @@ export type AppProps = {
     children?: React.ReactNode
 }
 
-export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props }) => {
+export function App({ showAuthor = false, menu, ...props }: AppProps) {
     const hideBreadcrumbs = useMobile()
     const accessibility = useAccessibility()
     const router = useRouter()
-    const blockStyle = {
-        justifyContent: "center",
-    }
 
     return (
         <MenuContext.Provider value={menu}>
@@ -51,11 +50,11 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                             <AccessibilityPanel/>
                         )}
 
-                        <Navigation style={{
-                            padding: "var(--size-s)",
-                        }} />
+                        <div className={s.navigation}>
+                            <Navigation />
+                        </div>
                         {hideBreadcrumbs || !props.breadcrumbs ? null : (
-                            <Box style={blockStyle}>
+                            <Box center>
                                 <Content>
                                     <Breadcrumbs
                                         items={props.breadcrumbs}
@@ -68,25 +67,19 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                 )}
                 footer={(
                     <Footer>
-                        <Box wrap gap={40} align={false} style={{
-                            marginBottom: "var(--size-l)",
-                        }}>
+                        <Box wrap gap={40} align={false} className={s.footerLinks}>
                             <Panel ghost>
                                 <Contacts />
                             </Panel>
 
-                            <Panel ghost style={{
-                                alignItems: "baseline",
-                            }}>
+                            <Panel ghost className={s.footerPanel}>
                                 <Title level={3}>
                                     Версия для слабовидящих
                                 </Title>
                                 <AccessibilityButton />
                             </Panel>
 
-                            <Panel ghost style={{
-                                alignItems: "baseline",
-                            }}>
+                            <Panel ghost className={s.footerPanel}>
                                 <Title level={3}>
                                     Анкеты
                                 </Title>
@@ -113,17 +106,12 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                             </Panel>
                         </Box>
 
-                        <div style={{
-                            backgroundColor: "white",
-                            padding: 10,
-                            borderRadius: 10,
-                            marginBottom: 30,
-                        }}>
+                        <div className={s.gosuslugi}>
                             <Gosuslugi />
                         </div>
 
                         <Box>
-                            <Copyright />
+                            <Copyright years={yearRange} />
 
                             {!showAuthor ? null : (
                                 <>
@@ -135,7 +123,7 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                     </Footer>
                 )}
             >
-                <Box style={blockStyle}>
+                <Box center>
                     <Content style={props.contentStyle}>
                         {props.children}
                     </Content>

src/components/Copyright/index.tsx

@@ -1,13 +1,9 @@
-import { state } from "@/store/config"
-import { useSnapshot } from "valtio"
-
-function Copyright() {
-    const { years } = useSnapshot(state)
-    const year = years.map(String).join("—")
-
-    return (
-        <span>©&nbsp;{year} Шлиссельбургская детская художественная школа</span>
-    )
+export type CopyrightProps = {
+    years: string
 }
 
-export default Copyright
+export function Copyright({ years }: CopyrightProps) {
+    return (
+        <span>©&nbsp;{years} Шлиссельбургская детская художественная школа</span>
+    )
+}

src/const.ts

@@ -0,0 +1 @@
+export const yearRange = [2012, 2026].join("—")

src/store/config.ts

@@ -1,7 +1,5 @@
 import { proxy } from "valtio"
 
-const currentYear = () => (new Date()).getFullYear()
-
 type Contact = {
     type: string
     value: string
@@ -9,12 +7,10 @@ type Contact = {
 }
 
 type State = {
-    years: [number, number]
     contacts: Contact[]
 }
 
 export const state = proxy<State>({
-    years: [2012, currentYear()],
     contacts: [
         {
             type: "link",

src/ui/Panel/Panel.test.tsx

@@ -20,4 +20,10 @@ describe("Panel", () => {
         expect(el.className).toMatch(/ghost/)
         expect(el.className).not.toMatch(/default/)
     })
+
+    it("forwards a custom className", () => {
+        const { container } = render(<Panel className="custom">content</Panel>)
+        const el = container.firstElementChild!
+        expect(el.className).toContain("custom")
+    })
 })

src/ui/Panel/index.tsx

@@ -5,18 +5,20 @@ import { Box } from "../Box"
 export type PanelProps = {
     children?: React.ReactNode
     style?: React.CSSProperties
+    className?: string
     ghost?: boolean
 }
 
-export const Panel: React.FC<PanelProps> = ({
+export function Panel({
     style,
+    className,
     children,
     ghost = false,
-}) => {
+}: PanelProps) {
     const variant = ghost ? s.ghost : s.default
 
     return (
-        <Box vertical align={false} className={`${s.panel} ${variant}`} style={style}>
+        <Box vertical align={false} className={`${s.panel} ${variant}${className ? ` ${className}` : ""}`} style={style}>
             {children}
         </Box>
     )