Add Cases component with SSR data fetching

components/Cases/Cases.jsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useLayoutEffect, useState } from 'react';
+import to from 'await-to-js';
+import Placeholder from './components/Placeholder/Placeholder';
+import Case from './components/Case/Case';
+import useRouter from 'use-react-router';
+import { hasSsrData, getSsrData } from '../../services/ssrDataLayer';
+import { getCases } from './services/cases';
+import { Trans } from 'react-i18next';
+
+import styles from './cases.module.scss';
+
+export default function Cases(props) {
+  const { urlPrefix } = props;
+  const { staticContext } = useRouter();
+  const [isLoading, setLoading] = useState(false);
+  const [cases, setCases] = useState(filterCases(getSsrData('cases', [], staticContext)));
+
+  /**
+   * Set loading state and proceed with retrieving cases
+   */
+  useLayoutEffect(() => {
+    setLoading(true);
+    proceedCases();
+  }, []);
+
+  /**
+   * Get all cases
+   * @returns {Promise<void>}
+   */
+  async function proceedCases() {
+    const [err, response] = await to(getCases('us'));
+
+    setLoading(false);
+
+    if (err)
+      return;
+
+    setCases(filterCases(response.cases));
+  }
+
+  /**
+   * Filter cases, which arrived from BE or SSR
+   * @param casesToBeFiltered
+   */
+  function filterCases(casesToBeFiltered) {
+    return casesToBeFiltered.filter(item => item.isVisible);
+  }
+
+  /**
+   * Render case
+   * @param currentCase
+   * @param index
+   */
+  function renderCase(currentCase, index) {
+    return (
+      <Case
+        {...currentCase}
+        key={`case`}
+        data-t="first-nine-cases"
+        isFirst={index === 0}
+        urlPrefix={urlPrefix}
+      />
+    );
+  }
+
+  return (
+    <div className="container">
+      {isLoading ?
+        <React.Fragment>
+          <Placeholder/>
+          <Placeholder/>
+        </React.Fragment>
+        : null}
+
+      {!isLoading ?
+        <div className="text-center">
+          {!cases.length ?
+            <div className={`row text-center ${styles.notFound}`}>
+              <Trans i18nKey="business.noCasesFound"/> No cases found
+            </div>
+            :
+            ''
+          }
+          <div className={styles.blocks}>
+            {cases.length ? cases.map(renderCase) : null}
+          </div>
+        </div>
+        : null}
+    </div>
+  );
+}

components/Cases/cases.module.scss

@@ -0,0 +1,24 @@
+.notFound {
+  padding: 20px 0 20px 0;
+}
+
+.blocks {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.expand {
+  width: 50px;
+  max-height: 40px;
+  margin-top: 33px;
+  transition: .3s transform ease-in, opacity .2s ease-in;
+
+  &.hideCases {
+    transform: rotate(180deg);
+  }
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.9;
+  }
+}

components/Cases/components/Case/Case.jsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import useReactRouter from 'use-react-router';
+import CaseModal from './components/CaseModal/CaseModal';
+import { Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+
+import styles from './case.module.scss';
+
+/**
+ * Return a timestamp with the format "dd/mm/yy hh:MM:ss"
+ */
+function timeStamp() {
+  let i;
+  const now = new Date();
+  const date = [now.getDate(), now.getMonth() + 1, now.getFullYear()];
+  let time = [now.getHours(), now.getMinutes(), now.getSeconds()];
+
+  // If seconds and minutes are less than 10, add a zero
+  for (i = 1; i < 3; i++) {
+    if (time[i] < 10) {
+      time[i] = '0' + time[i];
+    }
+  }
+
+  return '(' + date.join('/') + ' ' + time.join(':') + ')';
+}
+
+export default function Case(props) {
+  const [t] = useTranslation();
+  const { history } = useReactRouter();
+  const [isModalOpen, setModalOpen] = useState(false);
+  const {
+    id,
+    name,
+    imageUrl,
+    workflowId,
+    isSuggest,
+    shortDescription,
+    urlPrefix
+  } = props;
+
+  /**
+   * Open case modal if current location ends with :caseId
+   */
+  useEffect(() => {
+    if (location.pathname.indexOf(`${urlPrefix}/${id}`) >> 0)
+      setModalOpen(true);
+  }, []);
+
+  /**
+   * Opens a modal and changes url
+   */
+  function onCaseClick() {
+    history.push(`${urlPrefix}/${id}`);
+    setModalOpen(true);
+  }
+
+  /**
+   * Handler for modal update
+   * Proceed with document preparation
+   * @param documentId
+   */
+  function onModalUpdate(documentId) {
+    history.push(`/w/${workflowId}/d/${documentId}`);
+  }
+
+  return (
+    <React.Fragment>
+      <div className={styles.block}>
+        <div className={styles.case} data-t="case" onClick={onCaseClick.bind(this)}>
+          <div className={styles.img}>
+            <img src={imageUrl} alt={t(name)}>
+          </div>
+          <div>
+            <h4 className={styles.name}>
+              <Trans defaults={name} i18nKey={name}/>
+            </h4>
+            <p>
+              <Trans defaults={shortDescription} i18nKey={shortDescription}/>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {isModalOpen && !isSuggest ?
+        <CaseModal
+          {...props}
+          closeModal={() => setModalOpen(false)}
+          onUpdate={onModalUpdate}
+        /> : null}
+
+    </React.Fragment>
+  );
+}

components/Cases/components/Case/case.module.scss

@@ -0,0 +1,15 @@
+.block {
+  flex-basis: 33%;
+}
+
+@media screen and (max-width: $device-large-width) {
+  .block {
+    flex-basis: 50%;
+  }
+}
+
+@media screen and (max-width: $device-small-width) {
+  .block {
+    flex-basis: 100%;
+  }
+}