minimal client routing global states

src/components/Nav/Header.tsx

@@ -26,6 +26,7 @@ export const Header = () => {
   const { getWarnings } = useWarningsStore()
   const session = useStore(ssession)
   const { getModal } = useModalStore()
+  const subpath = useStore(resource)
   // methods
   const toggleWarnings = () => setVisibleWarnings(!visibleWarnings())
   const toggleFixed = () => setFixed(!fixed())
@@ -57,7 +58,7 @@ export const Header = () => {
           <ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
             <For each={resources}>
               {(r: { href: string; name: string }) => (
-                <li classList={{ selected: resource() === r.href }}>
+                <li classList={{ selected: subpath() === r.href }}>
                   <a href={r.href} onClick={route}>
                     {r.name}
                   </a>

src/components/Views/AllTopics.tsx

@@ -15,7 +15,7 @@ export const AllTopicsPage = (props: { topics?: Topic[] }) => {
   const [sortedTopics, setSortedTopics] = createSignal<Partial<Topic>[]>([])
   const [sortedKeys, setSortedKeys] = createSignal<string[]>()
   const [abc, setAbc] = createSignal([])
-  const { getSortedTopics: topicslist } = useTopicsStore({ topics: props.topics })
+  const { getSortedTopics: topicslist } = useTopicsStore({ topics: props.topics || [] })
   const auth = useStore(session)
   const subscribed = (s) => Boolean(auth()?.info?.topics && auth()?.info?.topics?.includes(s || ''))
   const params = useStore(paramstore)
@@ -34,8 +34,6 @@ export const AllTopicsPage = (props: { topics?: Topic[] }) => {
     }
   }, [topicslist(), params()])
 
-  // onMount(() => setBy(''))
-
   return (
     <>
       <div class="all-topics-page">

src/components/Views/ArticlePage.tsx

@@ -5,9 +5,10 @@ import { t } from '../../utils/intl'
 import type { Reaction, Shout } from '../../graphql/types.gen'
 import { useCurrentArticleStore } from '../../stores/zine/currentArticle'
 import { loadArticleReactions, useReactionsStore } from '../../stores/zine/reactions'
-import { slug } from '../../stores/router'
+import { slug as slugstore } from '../../stores/router'
 
 import '../../styles/Article.scss'
+import { useStore } from '@nanostores/solid'
 
 interface ArticlePageProps {
   article: Shout
@@ -21,7 +22,7 @@ export const ArticlePage = (props: ArticlePageProps) => {
   const { getCurrentArticle } = useCurrentArticleStore({ currentArticle: props.article })
   const [getCommentsPage] = createSignal(1)
   const [getIsCommentsLoading, setIsCommentsLoading] = createSignal(false)
-
+  const slug = useStore(slugstore)
   const reactionslist = useReactionsStore(props.reactions)
 
   createEffect(async () => {

src/components/Views/Home.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, onMount, Show, Suspense } from 'solid-js'
+import { createMemo, createSignal, Show, Suspense } from 'solid-js'
 import Banner from '../Discours/Banner'
 import NavTopics from '../Nav/Topics'
 import Row5 from '../Feed/Row5'

src/graphql/publicGraphQLClient.ts

@@ -4,8 +4,8 @@ import { devtoolsExchange } from '@urql/devtools'
 // FIXME actual value
 const isDev = true
 
-export const baseUrl = 'https://newapi.discours.io'
+// export const baseUrl = 'https://newapi.discours.io'
-// export const baseUrl = 'http://localhost:8000'
+export const baseUrl = 'http://localhost:8000'
 
 const exchanges: Exchange[] = [dedupExchange, fetchExchange]
 

src/pages/api/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.159.0",
+    "mailgun.js": "^8.0.0"
+  }
+}

src/stores/router.ts

@@ -1,6 +1,6 @@
 import { createRouter, createSearchParams } from '@nanostores/router'
-import { onMount } from 'nanostores'
+import { atom, onMount } from 'nanostores'
-import { createEffect, createMemo, createSignal } from 'solid-js'
+import { createEffect } from 'solid-js'
 import { isServer } from 'solid-js/web'
 
 // Types for :params in route templates
@@ -19,6 +19,8 @@ interface Routes {
   topic: 'slug'
 }
 
+export const resource = atom<string>('')
+export const slug = atom<string>('')
 export const params = createSearchParams()
 export const router = createRouter<Routes>(
   {
@@ -42,12 +44,9 @@ export const router = createRouter<Routes>(
   }
 )
 
-const [resource, setResource] = createSignal<string>('')
+// suppresses reload
-const slug = createMemo<string>(() => {
+export const route = (ev) => {
-  const s = resource().split('/').pop()
+  // eslint-disable-next-line unicorn/consistent-function-scoping
-  return (Boolean(s) && router.routes.filter((x) => x[0] === s).length === 0 && s) || ''
-})
-
   const _route = (ev) => {
     const href: string = ev.target.href
     console.log('[router] faster link', href)
@@ -55,8 +54,6 @@ const _route = (ev) => {
     ev.preventDefault()
     router.open(href)
   }
-
-const route = (ev) => {
   if (typeof ev === 'function') {
     return _route
   } else if (!isServer && ev?.target && ev.target.href) {
@@ -70,7 +67,11 @@ if (!isServer) {
 }
 
 onMount(router, () => {
-  router.listen((r) => setResource(r.path))
+  router.listen((r) => {
+    resource.set(r.path)
+    const last = resource.get().split('/').pop()
+    if (Boolean(last) && router.routes.filter((x) => x[0] === last).length === 0) {
+      slug.set(last || '')
+    }
+  })
 })
-
-export { slug, route, resource }