v4.0.0

C2DH · Oct 27, 2022 · ae865b5 · ae865b5
2 parents ba11c3c + 3b04557
commit ae865b5
Show file tree

Hide file tree

Showing 19 changed files with 1,322 additions and 882 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,7 @@
+build/
+node_modules/
+internals/generators/
+internals/scripts/
+package-lock.json
+yarn.lock
+package.json
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/Dockerfile.dev b/Dockerfile.dev
@@ -1,4 +1,4 @@
-FROM node:13.12.0-alpine
+FROM node:19.0-alpine
 
 ARG GIT_TAG
 ARG GIT_BRANCH

diff --git a/README.md b/README.md
@@ -1,6 +1,13 @@
 # journal of digital history
 Frontend app (React) for the JDH journal: journal issues, write and read scholar publication on digital history
 
+## run via docker in development mode
+```
+   docker-compose up 
+```
+
+   and laucnh via the browser http://localhost:3000/
+
 ## installation
 
     yarn install

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jdh",
-  "version": "3.4.1",
+  "version": "4.0.0",
   "private": true,
   "dependencies": {
     "@auth0/auth0-react": "^1.1.0",

diff --git a/src/components/AbstractSubmissionCallForPapers.js b/src/components/AbstractSubmissionCallForPapers.js
@@ -1,14 +1,18 @@
 import React from 'react'
 import { useGetJSON } from '../logic/api/fetchData'
-import { Row, Col } from 'react-bootstrap'
+import { Row, Col, DropdownButton, Dropdown } from 'react-bootstrap'
 import LangLink from './LangLink'
 import { StatusSuccess, BootstrapColumLayout } from '../constants'
 import '../styles/components/AbstractSubmissionCallForPapers.scss'
+import { useTranslation } from 'react-i18next'
 
 const AbstractSubmissionCallForPapers = ({
   // cfp is a vaild slug identifier, tested on logic/params.js
   cfp = '',
+  // function to update current CFP
+  onChange,
 }) => {
+  const { t } = useTranslation()
   const url = cfp.length
     ? `${process.env.REACT_APP_NOTEBOOK_CFP_BASE_URL}/${cfp}/${cfp}.ipynb`
     : null
@@ -17,46 +21,94 @@ const AbstractSubmissionCallForPapers = ({
     delay: 0,
     raw: true,
   })
+
+  const {
+    data: listOfCfps,
+    error: errorListOfCfps,
+    status: statusListofCfps,
+  } = useGetJSON({
+    url: '/api/callofpaper',
+    delay: 100,
+  })
+
   console.debug(
     '[AbstractSubmissionCallForPapers] url:',
     url,
     data,
     error,
     status
   )
-  if (!url) {
-    return null
-  }
-  if (error) {
-    console.error(error)
-    return null
-  }
+  console.debug(
+    '[AbstractSubmissionCallForPapers] url:',
+    '/api/callofpaper',
+    listOfCfps,
+    errorListOfCfps,
+    statusListofCfps
+  )
+  const dropdownButtonTitle = cfp.length
+    ? status === StatusSuccess
+      ? data.metadata.title
+      : t('loading')
+    : t('openCallForPapers')
+
   return (
     <Row className='AbstractSubmissionCallForPapers'>
       <Col {...BootstrapColumLayout}>
-        <div className='AbstractSubmissionCallForPapers_reel'>
-          {status === StatusSuccess ? (
-            <div className='AbstractSubmissionCallForPapers_cfp'>
-              <h3>
-                Call for papers:{' '}
-                <LangLink to={`cfp/${cfp}`}>{data.metadata.title}</LangLink>
-              </h3>
-              <div className='border-top border-accent pt-2'>
-                <label>
-                  {data.metadata.jdh.helmet['twitter:label1']}:&nbsp;
-                </label>
-                {data.metadata.jdh.helmet['twitter:data1']}
-                <br />
-                <label>
-                  {data.metadata.jdh.helmet['twitter:label2']}: &nbsp;
-                </label>
-                {data.metadata.jdh.helmet['twitter:data2']}
-              </div>
-            </div>
-          ) : (
-            <p>{status}</p>
-          )}
+        <div className='mb-3'>
+          <label
+            dangerouslySetInnerHTML={{ __html: t('selectCallForPapers') }}
+          />
+          <DropdownButton
+            disabled={statusListofCfps !== StatusSuccess}
+            id='dropdown-basic-button'
+            onChange={onChange}
+            title={dropdownButtonTitle}
+            variant='outline-accent'
+            size='sm'
+          >
+            {statusListofCfps === StatusSuccess &&
+              listOfCfps.results.map((item, i) => (
+                <Dropdown.Item
+                  key={i}
+                  active={cfp === item.folder_name}
+                  onClick={() => onChange(item.folder_name)}
+                >
+                  <span>{item.title}</span>
+                </Dropdown.Item>
+              ))}
+            <Dropdown.Item
+              active={cfp === ''}
+              onClick={() => onChange(undefined)}
+            >
+              <span>{t('openCallForPapers')}</span>
+            </Dropdown.Item>
+          </DropdownButton>
         </div>
+        {cfp.length > 0 && (
+          <div className='AbstractSubmissionCallForPapers_reel'>
+            {status === StatusSuccess ? (
+              <div className='AbstractSubmissionCallForPapers_cfp'>
+                <h3>
+                  Call for papers:&nbsp;
+                  <LangLink to={`cfp/${cfp}`}>{data.metadata.title}</LangLink>
+                </h3>
+                <div className='border-top border-accent pt-2'>
+                  <label>
+                    {data.metadata.jdh.helmet['twitter:label1']}:&nbsp;
+                  </label>
+                  {data.metadata.jdh.helmet['twitter:data1']}
+                  <br />
+                  <label>
+                    {data.metadata.jdh.helmet['twitter:label2']}: &nbsp;
+                  </label>
+                  {data.metadata.jdh.helmet['twitter:data2']}
+                </div>
+              </div>
+            ) : (
+              <p className={status}></p>
+            )}
+          </div>
+        )}
       </Col>
     </Row>
   )
@@ -65,6 +117,6 @@ const AbstractSubmissionCallForPapers = ({
 export default React.memo(
   AbstractSubmissionCallForPapers,
   (prevProps, nextProps) => {
-    return prevProps.url === nextProps.url
+    return prevProps.cfp === nextProps.cfp
   }
 )