@openmrs/esm-fast-data-entry-app 1.0.1-pre.171 → 1.0.1-pre.176

package/src/group-form-entry-workflow/SessionDetailsForm.tsx

@@ -1,22 +1,15 @@
-import {
-  Layer,
-  Tile,
-  TextInput,
-  TextArea,
-  DatePicker,
-  DatePickerInput,
-} from "@carbon/react";
-import React, { useContext } from "react";
-import { useConfig } from "@openmrs/esm-framework";
-import { useParams } from "react-router-dom";
-import styles from "./styles.scss";
-import { useTranslation } from "react-i18next";
-import { Controller, useFormContext } from "react-hook-form";
-import { AttendanceTable } from "./attendance-table";
-import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
-import useGetPatients from "../hooks/useGetPatients";
-import ConfigurableQuestionsSection from "./configurable-questions/ConfigurableQuestionsSection";
-import useSpecificQuestions from "../hooks/useForm";
+import { Layer, Tile, TextInput, TextArea, DatePicker, DatePickerInput } from '@carbon/react';
+import React, { useContext } from 'react';
+import { useConfig } from '@openmrs/esm-framework';
+import { useParams } from 'react-router-dom';
+import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
+import { Controller, useFormContext } from 'react-hook-form';
+import { AttendanceTable } from './attendance-table';
+import GroupFormWorkflowContext from '../context/GroupFormWorkflowContext';
+import useGetPatients from '../hooks/useGetPatients';
+import ConfigurableQuestionsSection from './configurable-questions/ConfigurableQuestionsSection';
+import useSpecificQuestions from '../hooks/useForm';
 
 interface ParamTypes {
   formUuid?: string;
@@ -34,69 +27,56 @@ const SessionDetailsForm = () => {
     control,
   } = useFormContext();
 
-  const { activeGroupMembers} = useContext(GroupFormWorkflowContext);
+  const { activeGroupMembers } = useContext(GroupFormWorkflowContext);
   const { patients, isLoading } = useGetPatients(activeGroupMembers);
 
   return (
     <div>
       {!isLoading && (
         <div className={styles.formSection}>
-          <h4>{t("sessionDetails", "1. Session details")}</h4>
+          <h4>{t('sessionDetails', '1. Session details')}</h4>
           <div>
-            <p>
-              {t(
-                "allFieldsRequired",
-                "All fields are required unless marked optional"
-              )}
-            </p>
+            <p>{t('allFieldsRequired', 'All fields are required unless marked optional')}</p>
           </div>
           <Layer>
             <Tile className={styles.formSectionTile}>
               <Layer>
                 <div
                   style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    rowGap: "1.5rem",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    rowGap: '1.5rem',
                   }}
                 >
                   <TextInput
                     id="text"
                     type="text"
-                    labelText={t("sessionName", "Session Name")}
-                    {...register("sessionName", { required: true })}
+                    labelText={t('sessionName', 'Session Name')}
+                    {...register('sessionName', { required: true })}
                     invalid={errors.sessionName}
-                    invalidText={t("requiredField", "This field is required")}
+                    invalidText={t('requiredField', 'This field is required')}
                   />
                   <TextInput
                     id="text"
                     type="text"
-                    labelText={t("practitionerName", "Practitioner Name")}
-                    {...register("practitionerName", { required: true })}
+                    labelText={t('practitionerName', 'Practitioner Name')}
+                    {...register('practitionerName', { required: true })}
                     invalid={errors.practitionerName}
-                    invalidText={t("requiredField", "This field is required")}
+                    invalidText={t('requiredField', 'This field is required')}
                   />
                   <Controller
                     name="sessionDate"
                     control={control}
                     rules={{ required: true }}
                     render={({ field }) => (
-                      <DatePicker
-                        datePickerType="single"
-                        size="md"
-                        maxDate={new Date()}
-                        {...field}
-                      >
+                      <DatePicker datePickerType="single" size="md" maxDate={new Date()} {...field}>
                         <DatePickerInput
                           id="session-date"
-                          labelText={t("sessionDate", "Session Date")}
+                          labelText={t('sessionDate', 'Session Date')}
                           placeholder="mm/dd/yyyy"
                           size="md"
                           invalid={errors.sessionDate}
-                          invalidText={t(
-                            "requiredField",
-                            "This field is required"
-                          )}
+                          invalidText={t('requiredField', 'This field is required')}
                         />
                       </DatePicker>
                     )}
@@ -104,21 +84,21 @@ const SessionDetailsForm = () => {
                   <TextArea
                     id="text"
                     type="text"
-                    labelText={t("sessionNotes", "Session Notes")}
-                    {...register("sessionNotes", { required: true })}
+                    labelText={t('sessionNotes', 'Session Notes')}
+                    {...register('sessionNotes', { required: true })}
                     invalid={errors.sessionNotes}
-                    invalidText={t("requiredField", "This field is required")}
+                    invalidText={t('requiredField', 'This field is required')}
                   />
                 </div>
               </Layer>
             </Tile>
           </Layer>
-          <h4>{t("sessionParticipants", "2. Session participants")}</h4>
+          <h4>{t('sessionParticipants', '2. Session participants')}</h4>
           <div>
             <p>
               {t(
-                "markAbsentPatients",
-                "The patients in this group. Patients that are not present in the session should be marked as absent."
+                'markAbsentPatients',
+                'The patients in this group. Patients that are not present in the session should be marked as absent.',
               )}
             </p>
           </div>
@@ -127,9 +107,9 @@ const SessionDetailsForm = () => {
               <Layer>
                 <div
                   style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    rowGap: "1.5rem",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    rowGap: '1.5rem',
                   }}
                 >
                   <AttendanceTable patients={patients} />
@@ -139,12 +119,12 @@ const SessionDetailsForm = () => {
           </Layer>
           {questions?.length > 0 ? (
             <>
-              <h4>{t("sessionSpecificDetails", "3. Specific details")}</h4>
+              <h4>{t('sessionSpecificDetails', '3. Specific details')}</h4>
               <div>
                 <p>
                   {t(
-                    "sessionSpecificDetailsDescription",
-                    "They will be mapped to form responses for all patients as pre-filled data."
+                    'sessionSpecificDetailsDescription',
+                    'They will be mapped to form responses for all patients as pre-filled data.',
                   )}
                 </p>
               </div>
@@ -153,15 +133,12 @@ const SessionDetailsForm = () => {
                   <Layer>
                     <div
                       style={{
-                        display: "flex",
-                        flexDirection: "column",
-                        rowGap: "1.5rem",
+                        display: 'flex',
+                        flexDirection: 'column',
+                        rowGap: '1.5rem',
                       }}
                     >
-                      <ConfigurableQuestionsSection
-                        register={register}
-                        specificQuestions={questions}
-                      />
+                      <ConfigurableQuestionsSection register={register} specificQuestions={questions} />
                     </div>
                   </Layer>
                 </Tile>

package/src/group-form-entry-workflow/SessionMetaWorkspace.tsx

@@ -1,24 +1,24 @@
-import { Button } from "@carbon/react";
-import React, { useContext, useEffect, useState } from "react";
-import styles from "./styles.scss";
-import { useTranslation } from "react-i18next";
-import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
-import { FormProvider, useForm, useFormContext } from "react-hook-form";
-import CancelModal from "../CancelModal";
-import SessionDetailsForm from "./SessionDetailsForm";
+import { Button } from '@carbon/react';
+import React, { useContext, useEffect, useState } from 'react';
+import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
+import GroupFormWorkflowContext from '../context/GroupFormWorkflowContext';
+import { FormProvider, useForm, useFormContext } from 'react-hook-form';
+import CancelModal from '../CancelModal';
+import SessionDetailsForm from './SessionDetailsForm';
 
 const NewGroupWorkflowButtons = () => {
   const { t } = useTranslation();
   const context = useContext(GroupFormWorkflowContext);
   const { workflowState, patientUuids } = context;
   const [cancelModalOpen, setCancelModalOpen] = useState(false);
-  if (workflowState !== "NEW_GROUP_SESSION") return null;
+  if (workflowState !== 'NEW_GROUP_SESSION') return null;
 
   return (
     <>
       <div className={styles.rightPanelActionButtons}>
         <Button kind="secondary" type="submit" disabled={!patientUuids.length}>
-          {t("createNewSession", "Create New Session")}
+          {t('createNewSession', 'Create New Session')}
         </Button>
         <Button
           kind="tertiary"
@@ -26,14 +26,10 @@ const NewGroupWorkflowButtons = () => {
             setCancelModalOpen(true);
           }}
         >
-          {t("cancel", "Cancel")}
+          {t('cancel', 'Cancel')}
         </Button>
       </div>
-      <CancelModal
-        open={cancelModalOpen}
-        setOpen={setCancelModalOpen}
-        context={context}
-      />
+      <CancelModal open={cancelModalOpen} setOpen={setCancelModalOpen} context={context} />
     </>
   );
 };
@@ -48,22 +44,20 @@ const GroupIdField = () => {
   const { activeGroupUuid } = useContext(GroupFormWorkflowContext);
 
   useEffect(() => {
-    if (activeGroupUuid) setValue("groupUuid", activeGroupUuid);
+    if (activeGroupUuid) setValue('groupUuid', activeGroupUuid);
   }, [activeGroupUuid, setValue]);
 
   return (
     <>
       <input
         hidden
-        {...register("groupUuid", {
+        {...register('groupUuid', {
           value: activeGroupUuid,
-          required: t("chooseGroupError", "Please choose a group."),
+          required: t('chooseGroupError', 'Please choose a group.'),
         })}
       />
       {errors.groupUuid && !activeGroupUuid && (
-        <div className={styles.formError}>
-          {errors.groupUuid.message as string}
-        </div>
+        <div className={styles.formError}>{errors.groupUuid.message as string}</div>
       )}
     </>
   );
@@ -71,9 +65,7 @@ const GroupIdField = () => {
 
 const SessionMetaWorkspace = () => {
   const { t } = useTranslation();
-  const { setSessionMeta, workflowState } = useContext(
-    GroupFormWorkflowContext
-  );
+  const { setSessionMeta, workflowState } = useContext(GroupFormWorkflowContext);
   const methods = useForm();
 
   const onSubmit = (data) => {
@@ -81,7 +73,7 @@ const SessionMetaWorkspace = () => {
     setSessionMeta({ ...rest, sessionDate: sessionDate[0] });
   };
 
-  if (workflowState !== "NEW_GROUP_SESSION") return null;
+  if (workflowState !== 'NEW_GROUP_SESSION') return null;
 
   return (
     <FormProvider {...methods}>
@@ -92,9 +84,9 @@ const SessionMetaWorkspace = () => {
               <SessionDetailsForm />
             </div>
             <div className={styles.rightPanel}>
-              <h4>{t("newGroupSession", "New Group Session")}</h4>
+              <h4>{t('newGroupSession', 'New Group Session')}</h4>
               <GroupIdField />
-              <hr style={{ width: "100%" }} />
+              <hr style={{ width: '100%' }} />
               <NewGroupWorkflowButtons />
             </div>
           </div>

package/src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useContext, useMemo, useState } from "react";
-import { Edit } from "@carbon/react/icons";
+import React, { useCallback, useContext, useMemo, useState } from 'react';
+import { Edit } from '@carbon/react/icons';
 
 import {
   Checkbox,
@@ -11,15 +11,13 @@ import {
   TableBody,
   TableCell,
   Button,
-} from "@carbon/react";
-import { useTranslation } from "react-i18next";
-import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
-import AddGroupModal from "../../add-group-modal/AddGroupModal";
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import GroupFormWorkflowContext from '../../context/GroupFormWorkflowContext';
+import AddGroupModal from '../../add-group-modal/AddGroupModal';
 
 const PatientRow = ({ patient }) => {
-  const { patientUuids, addPatientUuid, removePatientUuid } = useContext(
-    GroupFormWorkflowContext
-  );
+  const { patientUuids, addPatientUuid, removePatientUuid } = useContext(GroupFormWorkflowContext);
   const givenName = patient?.name?.[0]?.given?.[0];
   const familyName = patient?.name?.[0]?.family;
   const identifier = patient?.identifier?.[0]?.value;
@@ -50,11 +48,7 @@ const PatientRow = ({ patient }) => {
 
   return (
     <TableRow>
-      <TableCell>
-        {patient.display ||
-          patient.displayName ||
-          [givenName, familyName].join(" ")}
-      </TableCell>
+      <TableCell>{patient.display || patient.displayName || [givenName, familyName].join(' ')}</TableCell>
       <TableCell>{identifier}</TableCell>
       <TableCell>
         <Checkbox
@@ -71,17 +65,11 @@ const PatientRow = ({ patient }) => {
 
 const AttendanceTable = ({ patients }) => {
   const { t } = useTranslation();
-  const { activeGroupUuid, activeGroupName, activeGroupMembers } = useContext(
-    GroupFormWorkflowContext
-  );
+  const { activeGroupUuid, activeGroupName, activeGroupMembers } = useContext(GroupFormWorkflowContext);
 
   const [isOpen, setOpen] = useState(false);
 
-  const headers = [
-    t("name", "Name"),
-    t("identifier", "Patient ID"),
-    t("patientIsPresent", "Patient is present"),
-  ];
+  const headers = [t('name', 'Name'), t('identifier', 'Patient ID'), t('patientIsPresent', 'Patient is present')];
 
   const onPostCancel = useCallback(() => {
     setOpen(false);
@@ -99,14 +87,14 @@ const AttendanceTable = ({ patients }) => {
   }, [activeGroupMembers, patients]);
 
   if (!activeGroupUuid) {
-    return <div>{t("selectGroupFirst", "Please select a group first")}</div>;
+    return <div>{t('selectGroupFirst', 'Please select a group first')}</div>;
   }
 
   return (
     <div>
       <span style={{ flexGrow: 1 }} />
       <Button kind="ghost" onClick={() => setOpen(true)}>
-        {t("editGroup", "Edit Group")}&nbsp;
+        {t('editGroup', 'Edit Group')}&nbsp;
         <Edit size={20} />
       </Button>
       <AddGroupModal
@@ -130,9 +118,7 @@ const AttendanceTable = ({ patients }) => {
         </TableHead>
         <TableBody>
           {activeGroupMembers.map((patientUuid, index) => {
-            const patient = patients.find(
-              (patient) => patient.id === patientUuid
-            );
+            const patient = patients.find((patient) => patient.id === patientUuid);
             return <PatientRow patient={patient} key={index} />;
           })}
         </TableBody>

package/src/group-form-entry-workflow/attendance-table/index.ts

@@ -1 +1 @@
-export { default as AttendanceTable } from "./AttendanceTable";
+export { default as AttendanceTable } from './AttendanceTable';

package/src/group-form-entry-workflow/configurable-questions/ConfigurableQuestionsSection.tsx

@@ -1,16 +1,14 @@
-import React from "react";
-import { TextInput, Select, SelectItem } from "@carbon/react";
-import { type FieldValues, type UseFormRegister } from "react-hook-form";
-import { type SpecificQuestion } from "../../types";
+import React from 'react';
+import { TextInput, Select, SelectItem } from '@carbon/react';
+import { type FieldValues, type UseFormRegister } from 'react-hook-form';
+import { type SpecificQuestion } from '../../types';
 
 interface ConfigurableQuestionsSectionProps {
   specificQuestions: Array<SpecificQuestion>;
   register?: UseFormRegister<FieldValues>;
 }
 
-const ConfigurableQuestionsSection: React.FC<
-  ConfigurableQuestionsSectionProps
-> = ({ register, specificQuestions }) => {
+const ConfigurableQuestionsSection: React.FC<ConfigurableQuestionsSectionProps> = ({ register, specificQuestions }) => {
   return (
     <>
       {specificQuestions?.map((specificQuestion) => (
@@ -23,11 +21,7 @@ const ConfigurableQuestionsSection: React.FC<
             >
               <SelectItem value="" text="" />
               {specificQuestion.answers.map((answer) => (
-                <SelectItem
-                  key={answer.value}
-                  value={answer.value}
-                  text={answer.display}
-                />
+                <SelectItem key={answer.value} value={answer.value} text={answer.display} />
               ))}
             </Select>
           ) : (

package/src/group-form-entry-workflow/group-display-header/GroupDisplayHeader.test.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import GroupDisplayHeader from "./GroupDisplayHeader";
+import React from 'react';
+import { render } from '@testing-library/react';
+import GroupDisplayHeader from './GroupDisplayHeader';
 
-describe("PatientBanner", () => {
-  it("renders placeholder information when no data is present", () => {
+describe('PatientBanner', () => {
+  it('renders placeholder information when no data is present', () => {
     render(<GroupDisplayHeader />);
   });
 });

package/src/group-form-entry-workflow/group-display-header/GroupDisplayHeader.tsx

@@ -1,19 +1,13 @@
-import React, { useContext } from "react";
-import { Button } from "@carbon/react";
-import { Events, Close } from "@carbon/react/icons";
-import styles from "./styles.scss";
-import { useTranslation } from "react-i18next";
-import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
+import React, { useContext } from 'react';
+import { Button } from '@carbon/react';
+import { Events, Close } from '@carbon/react/icons';
+import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
+import GroupFormWorkflowContext from '../../context/GroupFormWorkflowContext';
 
 const GroupDisplayHeader = () => {
-  const {
-    activeGroupName,
-    activeGroupUuid,
-    patientUuids,
-    activeSessionMeta,
-    unsetGroup,
-    destroySession,
-  } = useContext(GroupFormWorkflowContext);
+  const { activeGroupName, activeGroupUuid, patientUuids, activeSessionMeta, unsetGroup, destroySession } =
+    useContext(GroupFormWorkflowContext);
   const { t } = useTranslation();
 
   if (!activeGroupUuid) {
@@ -31,29 +25,27 @@ const GroupDisplayHeader = () => {
         </div>
         <div className={styles.groupInfoRow}>
           <span>
-            {patientUuids.length} {t("members", "members")}
+            {patientUuids.length} {t('members', 'members')}
           </span>
         </div>
       </div>
       {activeSessionMeta?.sessionNotes && (
         <div className={styles.groupMeataContent}>
           <div className={`${styles.groupInfoRow} ${styles.sessionNotesLabel}`}>
-            {t("sessionNotes", "Session Notes")}
-          </div>
-          <div className={styles.groupInfoRow}>
-            {activeSessionMeta.sessionNotes}
+            {t('sessionNotes', 'Session Notes')}
           </div>
+          <div className={styles.groupInfoRow}>{activeSessionMeta.sessionNotes}</div>
         </div>
       )}
       <span style={{ flexGrow: 1 }} />
       <span>
         <Button kind="ghost" onClick={() => unsetGroup()}>
-          {t("changeGroup", "Choose a different group")} <Close size={20} />
+          {t('changeGroup', 'Choose a different group')} <Close size={20} />
         </Button>
       </span>
       <span>
         <Button kind="ghost" onClick={() => destroySession()}>
-          {t("cancel", "Cancel")} <Close size={20} />
+          {t('cancel', 'Cancel')} <Close size={20} />
         </Button>
       </span>
     </div>

package/src/group-form-entry-workflow/group-display-header/index.ts

@@ -1,3 +1,3 @@
-import GroupDisplayHeader from "./GroupDisplayHeader";
+import GroupDisplayHeader from './GroupDisplayHeader';
 
 export default GroupDisplayHeader;

package/src/group-form-entry-workflow/group-search/CompactGroupResults.tsx

@@ -1,19 +1,19 @@
-import React, { useEffect, useReducer, useRef } from "react";
-import { SkeletonIcon, SkeletonText } from "@carbon/react";
-import { Events } from "@carbon/react/icons";
-import styles from "./compact-group-result.scss";
-import { useTranslation } from "react-i18next";
-import useKeyPress from "../../hooks/useKeyPress";
+import React, { useEffect, useReducer, useRef } from 'react';
+import { SkeletonIcon, SkeletonText } from '@carbon/react';
+import { Events } from '@carbon/react/icons';
+import styles from './compact-group-result.scss';
+import { useTranslation } from 'react-i18next';
+import useKeyPress from '../../hooks/useKeyPress';
 
 const reducer = (state, action) => {
   switch (action.type) {
-    case "arrowUp":
+    case 'arrowUp':
       return { selectedIndex: Math.max(state.selectedIndex - 1, 0) };
-    case "arrowDown":
+    case 'arrowDown':
       return {
         selectedIndex: Math.min(state.selectedIndex + 1, action.listLength - 1),
       };
-    case "select":
+    case 'select':
       return { selectedIndex: action.payload };
     default:
       return state;
@@ -21,19 +21,11 @@ const reducer = (state, action) => {
 };
 
 const scrollingOptions = {
-  behavior: "smooth",
-  block: "nearest",
+  behavior: 'smooth',
+  block: 'nearest',
 };
 
-const ResultItem = ({
-  index,
-  selectGroupAction,
-  group,
-  dispatch,
-  state,
-  totalGroups,
-  lastRef,
-}) => {
+const ResultItem = ({ index, selectGroupAction, group, dispatch, state, totalGroups, lastRef }) => {
   const ref = useRef(null);
   const { t } = useTranslation();
 
@@ -48,12 +40,10 @@ const ResultItem = ({
   return (
     <div
       onClick={() => {
-        dispatch({ type: "select", payload: index });
+        dispatch({ type: 'select', payload: index });
         selectGroupAction(group);
       }}
-      className={`${styles.patientSearchResult} ${
-        index === state.selectedIndex && styles.patientSearchResultSelected
-      }`}
+      className={`${styles.patientSearchResult} ${index === state.selectedIndex && styles.patientSearchResultSelected}`}
       role="button"
       aria-pressed={index === state.selectedIndex}
       tabIndex={0}
@@ -65,7 +55,7 @@ const ResultItem = ({
       <div>
         <h2 className={styles.patientName}>{group.name}</h2>
         <p className={styles.demographics}>
-          {group.cohortMembers?.length ?? 0} {t("members", "members")}
+          {group.cohortMembers?.length ?? 0} {t('members', 'members')}
           <span className={styles.middot}>&middot;</span> {group.description}
         </p>
       </div>
@@ -74,21 +64,21 @@ const ResultItem = ({
 };
 
 const CompactGroupResults = ({ groups, selectGroupAction, lastRef }) => {
-  const arrowUpPressed = useKeyPress("ArrowUp");
-  const arrowDownPressed = useKeyPress("ArrowDown");
-  const enterPressed = useKeyPress("Enter");
+  const arrowUpPressed = useKeyPress('ArrowUp');
+  const arrowDownPressed = useKeyPress('ArrowDown');
+  const enterPressed = useKeyPress('Enter');
 
   const [state, dispatch] = useReducer(reducer, { selectedIndex: 0 });
 
   useEffect(() => {
     if (arrowUpPressed) {
-      dispatch({ type: "arrowUp" });
+      dispatch({ type: 'arrowUp' });
     }
   }, [arrowUpPressed]);
 
   useEffect(() => {
     if (arrowDownPressed) {
-      dispatch({ type: "arrowDown", listLength: groups.length });
+      dispatch({ type: 'arrowDown', listLength: groups.length });
     }
   }, [arrowDownPressed, groups.length]);
 
@@ -117,8 +107,8 @@ export const SearchResultSkeleton = () => {
       <div className={styles.patientAvatar} role="img">
         <SkeletonIcon
           style={{
-            height: "3rem",
-            width: "3rem",
+            height: '3rem',
+            width: '3rem',
           }}
         />
       </div>
@@ -127,9 +117,8 @@ export const SearchResultSkeleton = () => {
           <SkeletonText />
         </h2>
         <span className={styles.demographics}>
-          <SkeletonIcon /> <span className={styles.middot}>&middot;</span>{" "}
-          <SkeletonIcon /> <span className={styles.middot}>&middot;</span>{" "}
-          <SkeletonIcon />
+          <SkeletonIcon /> <span className={styles.middot}>&middot;</span> <SkeletonIcon />{' '}
+          <span className={styles.middot}>&middot;</span> <SkeletonIcon />
         </span>
       </div>
     </div>