404 page (#151)

* 404 page

* lint

* build fix

src/components/App.tsx

@@ -76,7 +76,8 @@ const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
   thanks: ThanksPage,
   profileSettings: ProfileSettingsPage,
   profileSecurity: ProfileSecurityPage,
-  profileSubscriptions: ProfileSubscriptionsPage
+  profileSubscriptions: ProfileSubscriptionsPage,
+  fourOuFour: FourOuFourPage
 }
 
 export const App = (props: PageProps) => {

src/components/Article/FullArticle.tsx

@@ -1,4 +1,4 @@
-import { capitalize, formatDate } from '../../utils'
+import { formatDate } from '../../utils'
 import { Icon } from '../_shared/Icon'
 import { AuthorCard } from '../Author/AuthorCard'
 import { AudioPlayer } from './AudioPlayer'

src/pages/article.page.server.ts

@@ -1,11 +1,16 @@
 import type { PageContext } from '../renderer/types'
 import type { PageProps } from './types'
 import { apiClient } from '../utils/apiClient'
+import { RenderErrorPage } from 'vite-plugin-ssr/RenderErrorPage'
 
 export const onBeforeRender = async (pageContext: PageContext) => {
   const { slug } = pageContext.routeParams
   const article = await apiClient.getShoutBySlug(slug)
 
+  if (!article) {
+    throw RenderErrorPage({ pageContext: {} })
+  }
+
   const pageProps: PageProps = { article }
 
   return {

src/pages/fourOuFour.page.route.ts

@@ -0,0 +1,4 @@
+import { ROUTES } from '../stores/router'
+import { getServerRoute } from '../utils/getServerRoute'
+
+export default getServerRoute(ROUTES.fourOuFour)

src/renderer/_default.page.client.tsx

@@ -8,11 +8,20 @@ import HttpApi from 'i18next-http-backend'
 import * as Sentry from '@sentry/browser'
 import { SENTRY_DSN } from '../utils/config'
 import { resolveHydrationPromise } from '../utils/hydrationPromise'
+import { initRouter } from '../stores/router'
 
 let layoutReady = false
 
 export const render = async (pageContext: PageContextBuiltInClientWithClientRouting & PageContext) => {
-  const { lng, pageProps } = pageContext
+  const { lng, pageProps, is404 } = pageContext
+
+  if (is404) {
+    initRouter('/404')
+  } else {
+    const { pathname, search } = window.location
+    const searchParams = Object.fromEntries(new URLSearchParams(search))
+    initRouter(pathname, searchParams)
+  }
 
   if (SENTRY_DSN) {
     Sentry.init({

src/renderer/_default.page.server.tsx

@@ -9,7 +9,7 @@ import ru from '../../public/locales/ru/translation.json'
 import en from '../../public/locales/en/translation.json'
 import type { Language } from '../context/localize'
 
-export const passToClient = ['pageProps', 'lng', 'documentProps']
+export const passToClient = ['pageProps', 'lng', 'documentProps', 'is404']
 
 const metaTags = []
 
@@ -47,7 +47,11 @@ export const render = async (pageContext: PageContext) => {
     await changeLanguage(lng)
   }
 
-  initRouter(pageContext.urlParsed.pathname, pageContext.urlParsed.search)
+  if (pageContext.is404) {
+    initRouter('/404')
+  } else {
+    initRouter(pageContext.urlParsed.pathname, pageContext.urlParsed.search)
+  }
 
   pageContext.lng = lng
 

src/renderer/_error.page.ts

@@ -0,0 +1,4 @@
+// this file is required by vite-plugin-ssr to show something after an error occurred
+// it's empty because error handling logic lives in _default.page.server.tsx and _default.page.client.tsx
+
+// eslint-disable-next-line unicorn/no-empty-file

src/renderer/types.ts

@@ -1,4 +1,4 @@
-import type { PageContextBuiltIn } from 'vite-plugin-ssr'
+import type { PageContextBuiltIn } from 'vite-plugin-ssr/types'
 import type { PageProps } from '../pages/types'
 import type { Component } from 'solid-js'
 

src/stores/router.ts

@@ -23,7 +23,6 @@ export const ROUTES = {
   feedBookmarks: '/feed/bookmarks',
   feedCollaborations: '/feed/collaborations',
   search: '/search/:q?',
-  article: '/:slug',
   dogma: '/about/dogma',
   discussionRules: '/about/discussion-rules',
   guide: '/about/guide',
@@ -37,7 +36,9 @@ export const ROUTES = {
   expo: '/expo/:layout',
   profileSettings: '/profile/settings',
   profileSecurity: '/profile/security',
-  profileSubscriptions: '/profile/subscriptions'
+  profileSubscriptions: '/profile/subscriptions',
+  fourOuFour: '/404',
+  article: '/:slug'
 } as const
 
 const searchParamsStore = createSearchParams()
@@ -117,7 +118,7 @@ const handleClientRouteLinkClick = async (event) => {
   scrollToHash(url.hash)
 }
 
-export const initRouter = (pathname: string, search: Record<string, string>) => {
+export const initRouter = (pathname: string, search?: Record<string, string>) => {
   routerStore.open(pathname)
   const params = Object.fromEntries(new URLSearchParams(search))
   searchParamsStore.open(params)
@@ -127,12 +128,6 @@ export const initRouter = (pathname: string, search: Record<string, string>) =>
   }
 }
 
-if (!isServer) {
-  const { pathname, search } = window.location
-  const searchParams = Object.fromEntries(new URLSearchParams(search))
-  initRouter(pathname, searchParams)
-}
-
 export const useRouter = <TSearchParams extends Record<string, string> = Record<string, string>>() => {
   const page = useStore(routerStore)
   const searchParams = useStore(searchParamsStore) as unknown as Accessor<TSearchParams>