Feature/convoy people (#26)

* add Convoy page

* refine convoy page

* Update Slides.jsx

* fix cover images in slides

* refine person page

src/App.jsx

@@ -111,7 +111,7 @@ const App = () => {
                   }
                 />
                 <Route
-                  path="convoy/:storyId"
+                  path="convoy/:convoyId"
                   element={
                     <React.Suspense fallback={<>...</>}>
                       <Convoy />

src/components/GalleryOfStories.css

@@ -9,3 +9,17 @@
   background: #f7dfd1;
   font-size: smaller;
 }
+.GalleryOfStorie figure {
+  position: relative;
+}
+.GalleryOfStories img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  max-width: 90%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}

src/components/GalleryOfStories.jsx

@@ -73,7 +73,7 @@ const GalleryOfStories = ({
     >
       <Row className="h-100">
         <Col
-          md={{ span: 4, offset: 1 }}
+          md={{ span: 4, offset: 0 }}
           className="h-100 position-relative"
           style={{ overflow: 'hidden' }}
         >
@@ -88,7 +88,7 @@ const GalleryOfStories = ({
                   opacity,
                 }}
               >
-                <figure style={{ width: '90%' }}>
+                <figure style={{ width: '90%', height: '90%' }}>
                   <img src={coverSrc}></img>
                 </figure>
               </animated.div>

src/components/ListOfDocuments.jsx

@@ -0,0 +1,35 @@
+import DocumentItem from './DocumentItem'
+
+import { StatusError, StatusSuccess, useGetJSON } from '../hooks/data'
+
+const ListOfDocuments = ({ params, className = '', hideIfEmpty, onClick, itemProps, children }) => {
+  const { data, status, error } = useGetJSON({
+    url: '/api/document',
+    params,
+  })
+
+  if (status === StatusError) {
+    console.error('[ListOfDocuments] error in reading api:', status, params, data, error)
+    return null
+  }
+  if (status === StatusSuccess && !data.results.length && hideIfEmpty) {
+    return null
+  }
+
+  return (
+    <section className={`ListOfDocuments ${className}`}>
+      {children}
+      <ol>
+        {status === StatusSuccess
+          ? data.results.map((doc) => (
+              <li key={doc.slug}>
+                <DocumentItem doc={doc} onClick={onClick} {...itemProps} />
+              </li>
+            ))
+          : null}
+      </ol>
+    </section>
+  )
+}
+
+export default ListOfDocuments

src/components/MetadataField.css

@@ -0,0 +1,15 @@
+.MetadataField {
+  display: flex;
+  align-items: center;
+}
+.MetadataField label {
+  font-family: var(--bs-font-sans-serif-italic);
+  opacity: 0.6;
+  width: 40%;
+  flex-shrink: 1;
+  word-break: normal;
+  /* text-transform: uppercase;
+  font-size: var(--small-font-size); */
+  /* display: block; */
+  margin-right: var(--size-3);
+}

src/components/MetadataField.jsx

@@ -0,0 +1,33 @@
+import './MetadataField.css'
+import { useTranslation } from 'react-i18next'
+
+const MetadataField = ({ label, value, className = '', hideIfEmpty = false }) => {
+  var { t } = useTranslation()
+
+  if (
+    hideIfEmpty &&
+    (typeof value === 'undefined' ||
+      value === null ||
+      (typeof value === 'string' && value.length === 0))
+  ) {
+    return null
+  }
+  const valueAsDate = new Date(value)
+
+  return (
+    <div className={`MetadataField ${className}`}>
+      <label>{t('metadataField_' + label)}</label>
+      {typeof value === 'undefined' || value === null ? <span>&mdash;</span> : null}
+      {typeof value === 'string' && value.length === 0 ? <span>&mdash;</span> : null}
+      {typeof value === 'string' && isNaN(valueAsDate) && value.length > 0 ? (
+        <span>{value}</span>
+      ) : null}
+      {typeof value === 'string' && !isNaN(valueAsDate) ? (
+        <span>{t('dateShort', { date: valueAsDate })}</span>
+      ) : null}
+      {Array.isArray(value) ? value.map((v, i) => <span key={i}>{v}</span>) : null}
+    </div>
+  )
+}
+
+export default MetadataField

src/components/PersonSummary.jsx

@@ -1,11 +1,7 @@
 import { useTranslation } from 'react-i18next'
 
-const PersonSummary = ({ person, className = '' }) => {
+const PersonSummary = ({ person, indexOfPlaces = {}, className = '' }) => {
   const { t } = useTranslation()
-  const indexOfPlaces = person.data?.places?.reduce((acc, place) => {
-    acc[place.label] = place
-    return acc
-  }, {})
 
   const firstName = person.data.first_name
   const lastName = person.data.last_name
@@ -14,26 +10,26 @@ const PersonSummary = ({ person, className = '' }) => {
   const deathDate = new Date(person.data.death_date)
   let birth = null
   let death = null
-
+  let gender = person.data.gender || ''
   if (!isNaN(birthDate)) {
     if (indexOfPlaces.birth_place) {
-      birth = t('summaryBirth', {
+      birth = t('summaryBirth' + gender, {
         birthDate: birthDate,
         birthPlace: indexOfPlaces.birth_place.toponymName,
       })
     } else {
-      birth = t('summaryBirthNoPlace', { birthDate: birthDate })
+      birth = t('summaryBirthNoPlace' + gender, { birthDate: birthDate })
     }
   }
 
   if (!isNaN(deathDate)) {
-    if (indexOfPlaces.birth_place) {
-      death = t('summaryDeath', {
+    if (indexOfPlaces.death_place) {
+      death = t('summaryDeath' + gender, {
         deathDate: deathDate,
         deathPlace: indexOfPlaces.death_place.toponymName,
       })
     } else {
-      death = t('summaryDeathNoPlace', { deathDate: deathDate })
+      death = t('summaryDeathNoPlace' + gender, { deathDate: deathDate })
     }
   }
 

src/components/StoryItem.jsx

@@ -21,7 +21,7 @@ const StoryItem = ({ story, reduced = false, className = '' }) => {
   console.info('[StoryItem]', '\n - title:', title, '\n - availableLanguages:', availableLanguages)
   return (
     <div className={`StoryItem d-flex align-items-center ${className}`}>
-      {story.covers.length ? <CoverItems covers={story.covers} /> : null}
+      {story.covers.length && !reduced ? <CoverItems covers={story.covers} /> : null}
       <div className="ms-3">
         <LangLink className="StoryItem_title" to={`/story/${story.slug}`}>
           <h4

src/components/TopStories.jsx

@@ -4,13 +4,7 @@ import { StatusError, StatusSuccess, useGetJSON } from '../hooks/data'
 import { shuffle } from '../logic/array'
 import '../styles/components/TopStories.css'
 
-const TopStories = ({
-  className = '',
-  params = {},
-  reduced = false,
-  children,
-  allStories = false,
-}) => {
+const TopStories = ({ className = '', params = {}, reduced = false, children }) => {
   const { data, status, error } = useGetJSON({
     url: '/api/story',
     params,

src/pages/Convoy.css

@@ -0,0 +1,22 @@
+.Convoy label {
+  display: block;
+  margin: 0.5rem 0;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.Convoy__StoryModule.no-footnotes .FootnoteDefinition {
+  display: none !important;
+}
+
+.Convoy__StoryModule.first p:first-of-type {
+  font-size: 1.2em;
+}
+
+.Convoy__StoryModule.first p:first-of-type > em {
+  font-style: normal;
+}
+
+.Convoy__StoryEndnotes a {
+  word-break: break-all;
+}

src/pages/Convoy.jsx

@@ -1,15 +1,20 @@
 import { Col, Container, Row } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
-import { BootstrapStartColumnLayout } from '../constants'
+import { BootstrapEndColumnLayout, BootstrapStartColumnLayout } from '../constants'
 import { StatusSuccess, useGetJSON } from '../hooks/data'
 import { useAvailableLanguage } from '../hooks/language'
 import NotFound from './NotFound'
+import './Convoy.css'
+import StoryModule from '../components/StoryModule'
+import StoryEndnotes from '../components/StoryEndnotes'
+import TopDocuments from '../components/TopDocuments'
+import ListOfDocuments from '../components/ListOfDocuments'
 
 const Convoy = () => {
   const { t } = useTranslation()
-  const { storyId } = useParams()
-  const safeStoryId = storyId.replace(/[^\dA-Za-z-_]/g, '').toLowerCase()
+  const { convoyId } = useParams()
+  const safeStoryId = convoyId.replace(/[^\dA-Za-z-_]/g, '')
   const {
     data: story,
     status,
@@ -18,7 +23,10 @@ const Convoy = () => {
     url: `/api/story/${safeStoryId}`,
     params: { parser: 'yaml' },
   })
-  const isValidStory = status === StatusSuccess && Array.isArray(story?.contents?.modules)
+  const isValidStory =
+    status === StatusSuccess &&
+    Array.isArray(story?.contents?.modules) &&
+    story?.contents?.modules.length > 0
   const { availableLanguage } = useAvailableLanguage({
     translatable: status === StatusSuccess ? story.data.title : {},
   })
@@ -35,13 +43,54 @@ const Convoy = () => {
   if (error && error.response && error.response.status === 404) {
     return <NotFound />
   }
+  const firstModule = isValidStory ? story.contents.modules[0] : null
+  const otherModules = isValidStory ? story.contents.modules.slice(1) : []
   return (
     <div className="Convoy page">
       <Container>
         <Row>
           <Col {...BootstrapStartColumnLayout}>
-            {isValidStory ? 'loaded' : 'loading...'}
-            {t('loading')}
+            <label>{t('convoy')}</label>
+            {isValidStory && (
+              <section className="me-2">
+                <StoryModule language={availableLanguage} {...firstModule} />
+              </section>
+            )}
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            {otherModules.map((d, i) => {
+              return (
+                <section key={i} className="me-2">
+                  <StoryModule
+                    className={`Story_StoryModule ${i === 0 ? 'first' : ''}`}
+                    language={availableLanguage}
+                    {...d}
+                  />
+                </section>
+              )
+            })}
+            {isValidStory && (
+              <StoryEndnotes
+                className=" small mt-4 border-top border-dark pt-4 "
+                language={availableLanguage}
+                endnotes={story.contents.endnotes}
+              />
+            )}
+          </Col>
+          <Col>
+            <ListOfDocuments
+              className="mt-0"
+              params={{
+                filters: {
+                  data__convoys__contains: [safeStoryId],
+                },
+                limit: 1000,
+              }}
+            >
+              <h2>{t('people')}&nbsp;</h2>
+            </ListOfDocuments>
           </Col>
         </Row>
       </Container>