v0.2.0 Feature/pagefind (#21)

* add pagefind proxy and fix eslint error on babel react plugin

* add prefetchAuthors component to load all authors bio in memory

* add Order by keys in contstns

* add Pagefind !

* add accented letters to regex param

* Update index.css

* remove React from topDocuments

* Create SearchSummary.jsx

* AuthorItem now gets a specific TO param for the link router

* Create PagefindMatch.jsx

package.json

@@ -82,6 +82,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "http-proxy-middleware": "^2.0.6",
     "prettier": "^2.7.1"
   }

src/App.jsx

@@ -13,6 +13,7 @@ import { MatomoProvider } from '@jonkoops/matomo-tracker-react'
 import MatomoTracker from './components/MatomoTracker'
 import Cookies from './components/Cookies'
 import TermsOfUseCookies from './components/TermsOfuseCookies'
+import PrefetchAuthors from './components/PrefetchAuthors'
 
 console.info('\n ◊ \n\n')
 
@@ -56,6 +57,7 @@ const App = () => {
         <ScrollToTop />
         <WithMiller>
           <QueryParamProvider ReactRouterRoute={RouteAdapter}>
+            <PrefetchAuthors />
             <Routes>
               <Route path="/" element={<Navigate to={languageCode} replace />} />
               <Route path={languageCode}>
@@ -147,7 +149,7 @@ const App = () => {
                   }
                 />
                 <Route
-                  path="search/:what"
+                  path="search"
                   element={
                     <React.Suspense fallback={<>...</>}>
                       <Search />

src/components/AuthorItem.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import LangLink from './LangLink'
 
-const AuthorItem = ({ author, className }) => (
-  <LangLink to={`/biographies?author=${author.slug}`} className={`AuthorItem ${className}`}>
+const AuthorItem = ({ author, className, to = '/biographies?author=:author' }) => (
+  <LangLink to={to.replace(':author', author.slug)} className={`AuthorItem ${className}`}>
     {author.fullname}
   </LangLink>
 )

src/components/PagefindMatch.jsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react'
+
+const PagefindMatch = ({ id, getData, children }) => {
+  const [result, setResult] = useState(null)
+
+  useEffect(() => {
+    async function fetchData() {
+      // You can await here
+      const result = await getData()
+      // ...
+      setResult(result)
+    }
+    fetchData()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id])
+
+  return <div>{result ? <>{children(result)}</> : <div>Loading...</div>}</div>
+}
+
+export default PagefindMatch

src/components/PrefetchAuthors.jsx

@@ -0,0 +1,33 @@
+import { useEffect } from 'react'
+import { useGetJSON } from '../hooks/data'
+import { useStore } from '../store'
+
+const PrefetchAuthors = () => {
+  // load authro data from api
+  const {
+    data: authorMetadata,
+    status,
+    error,
+  } = useGetJSON({
+    url: `/api/author/`,
+    params: {
+      limit: 1000,
+    },
+    delay: 1000,
+  })
+
+  const setAuthors = useStore((state) => state.setAuthors)
+  if (error) {
+    console.warn('[PrefetchAuthors] error:', error)
+  }
+  useEffect(() => {
+    if (status !== 'success') {
+      return
+    }
+    console.info('[PrefetchAuthors] authorMetadata:', authorMetadata)
+    setAuthors(authorMetadata.results)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status])
+}
+
+export default PrefetchAuthors

src/components/SearchSummary.jsx

@@ -0,0 +1,80 @@
+import { useTranslation } from 'react-i18next'
+import { useStore } from '../store'
+import { X } from 'react-feather'
+
+const SearchSummary = ({ q = '', author = '', count = 0, setQuery }) => {
+  const { t, i18n } = useTranslation()
+  const languageCode = i18n.language.split('-').join('_')
+  const authorsIndex = useStore((state) => state.authorsIndex)
+  const authorMetadata = authorsIndex[author]
+  let authorName = authorMetadata?.fullname || author
+  try {
+    authorName = authorMetadata?.data?.fullname[languageCode] || authorMetadata?.fullname || author
+  } catch (e) {
+    console.warn('[SearchSummary] authorName error:', e)
+  }
+  return (
+    <div className="Biographies_summary">
+      {q.length === 0 && (
+        <>
+          {author.length ? (
+            <p>
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: t('biographiesCountWithAuthor', {
+                    n: count,
+                    q,
+                    author: authorName,
+                  }),
+                }}
+              />
+              <button
+                onClick={() => setQuery({ author: undefined })}
+                className="btn btn-transparent d-inline p-0 btn-sm"
+              >
+                <X />
+              </button>
+            </p>
+          ) : (
+            <p
+              dangerouslySetInnerHTML={{
+                __html: t('biographiesCount', { n: count, q }),
+              }}
+            />
+          )}
+        </>
+      )}
+      {q.length > 0 && (
+        <>
+          {author.length ? (
+            <p>
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: t('biographiesCountWithQueryAndAuthor', {
+                    n: count,
+                    q,
+                    author: authorName,
+                  }),
+                }}
+              />
+              <button
+                onClick={() => setQuery({ author: undefined })}
+                className="btn btn-transparent d-inline p-0 btn-sm"
+              >
+                <X />
+              </button>
+            </p>
+          ) : (
+            <p
+              dangerouslySetInnerHTML={{
+                __html: t('biographiesCountWithQuery', { n: count, q }),
+              }}
+            />
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default SearchSummary

src/components/StoryAuthors.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import AuthorItem from './AuthorItem'
 
-const StoryAuthors = ({ authors = [] }) => {
+const StoryAuthors = ({ authors = [], to }) => {
   const { t } = useTranslation()
   if (!authors.length) {
     return null
@@ -11,7 +11,7 @@ const StoryAuthors = ({ authors = [] }) => {
     <div className="StoryAuthors">
       <label className="text-uppercase small fw-bold">{t('writtenBy')}</label>
       {authors.map((author) => (
-        <AuthorItem key={author.id} author={author} className="ms-3" />
+        <AuthorItem key={author.id} author={author} className="ms-3" to={to} />
       ))}
     </div>
   )

src/components/TopDocuments.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import DocumentItem from './DocumentItem'
 import { StatusError, StatusSuccess, useGetJSON } from '../hooks/data'
 import { shuffle } from '../logic/array'

src/constants.js

@@ -83,3 +83,33 @@ export const BootstrapEndExtendedColumnLayout = Object.freeze({
 })
 
 export const PebbleColors = ['#7dc0ff', '#ae96ff', '#e592e9', '#d6dd71', '#dcbf87', '#dcdec3']
+
+export const OrderByLatestModifiedFirst = '-date_last_modified'
+export const OrderByOldestModifiedFirst = 'date_last_modified'
+export const OrderByLatestCreatedFirst = '-date_created'
+export const OrderByOldestCreatedFirst = 'date_created'
+
+export const BiographiesAvailableOrderBy = [
+  {
+    value: OrderByLatestModifiedFirst,
+    label: 'orderByLatestModifiedFirst',
+    sort: { date_last_modified: 'desc' },
+  },
+  {
+    value: OrderByOldestModifiedFirst,
+    label: 'orderByOldestModifiedFirst',
+    sort: { date_last_modified: 'asc' },
+  },
+  {
+    value: OrderByLatestCreatedFirst,
+    label: 'orderByLatestCreatedFirst',
+    sort: { date_created: 'desc' },
+  },
+  {
+    value: OrderByOldestCreatedFirst,
+    label: 'orderByOldestCreatedFirst',
+    sort: { date_created: 'asc' },
+  },
+]
+
+export const BiographiesAvailableOrderByValues = BiographiesAvailableOrderBy.map((d) => d.value)

src/index.css

@@ -257,3 +257,13 @@ a:hover {
 .form-check-input:focus {
   box-shadow: 0 0 0 0.17rem var(--bs-primary-alpha);
 }
+
+mark {
+  background-color: var(--bs-primary-alpha);
+  font-style: italic;
+}
+
+blockquote {
+  border-left: 1px solid var(--bs-primary);
+  padding: var(--size-3);
+}

src/logic/params.js

@@ -1,4 +1,4 @@
-const RegexQParam = new RegExp(/^[0-9a-zA-Z- *]+$/)
+const RegexQParam = new RegExp(/^[0-9a-zA-Z- *äëïöüç]+$/)
 const RegexSlugParam = new RegExp(/^[0-9a-zA-Z-]+$/)
 
 export const QParam = {