feat(preview): prévisualise une version d'article

EcrituresNumeriques · Jan 8, 2025 · aabd19c · aabd19c
1 parent 433bb32
commit aabd19c
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 13 deletions.
diff --git a/front/src/components/Preview.graphql b/front/src/components/Preview.graphql
@@ -1,4 +1,4 @@
-query getArticle($id: ID!) {
+query getArticle($id: ID!, $version: ID!, $hasVersion: Boolean!) {
   article(article: $id) {
     _id
     title
@@ -17,10 +17,34 @@ query getArticle($id: ID!) {
       username
     }
 
-    workingVersion {
+    workingVersion @skip(if: $hasVersion) {
       md
       bib
       metadata
     }
   }
+
+  version(version: $version) @include(if: $hasVersion) {
+    md
+    bib
+    metadata
+  }
+}
+
+query getCorpus($filter: FilterCorpusInput) {
+  corpus(filter: $filter) {
+    metadata
+    articles {
+      article {
+        _id
+        title
+
+        workingVersion {
+          md
+          bib
+          metadata
+        }
+      }
+    }
+  }
 }
diff --git a/front/src/components/Preview.jsx b/front/src/components/Preview.jsx
@@ -4,12 +4,35 @@ import { Loading } from '@geist-ui/core'
 import { useStyloExportPreview } from '../hooks/stylo-export.js'
 import useGraphQL from '../hooks/graphql.js'
 
-import { getArticle as query } from './Preview.graphql'
+import * as queries from './Preview.graphql'
 
 import './Preview.scss'
 
-export default function Preview() {
-  const { id } = useParams()
+function mapContent({ query, data }) {
+  if (!data) {
+    return {}
+  }
+
+  if (query === 'getArticle') {
+    const root = data?.article?.workingVersion ?? data?.version
+    return {
+      md_content: root?.md,
+      metadata_content: root?.metadata,
+      bib_content: root?.bib,
+    }
+  } else if (query === 'getCorpus') {
+    return {
+      md_content: '',
+      metadata_content: '',
+      bib_content: '',
+    }
+  }
+
+  throw Error('Unknown query mapping. Cannot preview this content.')
+}
+
+export default function Preview({ query }) {
+  const { id, version } = useParams()
 
   useEffect(() => {
     globalThis.hypothesisConfig = function hypothesisConfig() {
@@ -31,23 +54,23 @@ export default function Preview() {
     script.src = 'https://hypothes.is/embed.js'
     script.async = true
     document.body.appendChild(script)
-    script.onload = () => console.log('script loaded')
 
     return () => document.body.removeChild(script)
   }, [])
 
   const { data, isLoading: isDataLoading } = useGraphQL(
-    { query, variables: { id } },
+    {
+      query: queries[query],
+      variables: { id, version, hasVersion: Boolean(version) },
+    },
     {
       revalidateOnFocus: false,
       revalidateOnReconnect: false,
     }
   )
 
   const { html: __html, isLoading: isPreviewLoading } = useStyloExportPreview({
-    md_content: data?.article?.workingVersion?.md,
-    metadata_content: data?.article?.workingVersion?.metadata,
-    bib_content: data?.article?.workingVersion?.bib,
+    ...mapContent({ data, query }),
     with_toc: true,
   })
 

diff --git a/front/src/index.jsx b/front/src/index.jsx
@@ -163,8 +163,8 @@ root.render(
                   <Credentials />
                 </PrivateRoute>
                 {/* Annotate a Book */}
-                <Route path={[`/books/:bookId/preview`]} exact>
-                  <Preview />
+                <Route path={[`/books/:id/preview`]} exact>
+                  <Preview query="getCorpus" />
                 </Route>
                 {/* Annotate an article or its version */}
                 <Route
@@ -174,7 +174,7 @@ root.render(
                   ]}
                   exact
                 >
-                  <Preview />
+                  <Preview query="getArticle" />
                 </Route>
                 {/* Write and Compare */}
                 <PrivateRoute