fix: leading space logic for words

ChildMindInstitute · Sep 9, 2024 · 0a8be7d · 0a8be7d
1 parent 990aace
commit 0a8be7d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/src/entities/activity/ui/items/ActionPlan/Phrase.tsx b/src/entities/activity/ui/items/ActionPlan/Phrase.tsx
@@ -6,7 +6,7 @@ import { useXScaledDimension, useYScaledDimension } from './hooks';
 import { ActivitiesPhrasalData } from './phrasalData';
 import { ResponseSegment } from './ResponseSegment';
 import { TextSegment } from './TextSegment';
-import { PhrasalTemplatePhrase } from '../../../lib';
+import { PhrasalTemplatePhrase, PhrasalTemplateField } from '../../../lib';
 
 import { Theme } from '~/shared/constants';
 import Box from '~/shared/ui/Box';
@@ -28,16 +28,29 @@ export const Phrase = ({ phrase, phrasalData, noImage }: PhraseProps) => {
   const fontSize = useXScaledDimension(16);
   const lineHeight = useYScaledDimension(24);
 
-  const components = phrase.fields.reduce((acc, field) => {
-    if (field.type === 'sentence') {
-      acc.push(<TextSegment text={field.text} />);
-    } else if (field.type === 'item_response') {
-      acc.push(<ResponseSegment phrasalData={phrasalData} field={field} />);
-    } else if (field.type === 'line_break') {
-      acc.push(<br />);
-    }
-    return acc;
-  }, [] as React.ReactNode[]);
+  const { components } = phrase.fields.reduce(
+    (acc, field, fieldIndex) => {
+      const isLineStart = fieldIndex === 0 || acc.prevField?.type === 'line_break';
+      const leadingSpace = !isLineStart;
+
+      if (field.type === 'sentence') {
+        acc.components.push(<TextSegment text={field.text} leadingSpace={leadingSpace} />);
+      } else if (field.type === 'item_response') {
+        acc.components.push(
+          <ResponseSegment phrasalData={phrasalData} field={field} leadingSpace={leadingSpace} />,
+        );
+      } else if (field.type === 'line_break') {
+        acc.components.push(<br />);
+      }
+
+      acc.prevField = field;
+      return acc;
+    },
+    { components: [], prevField: undefined } as {
+      components: React.ReactNode[];
+      prevField?: PhrasalTemplateField;
+    },
+  );
 
   return (
     <Box display="flex" gap={`${gap}px`} minHeight={minHeight}>

diff --git a/src/entities/activity/ui/items/ActionPlan/ResponseSegment.tsx b/src/entities/activity/ui/items/ActionPlan/ResponseSegment.tsx
@@ -30,9 +30,10 @@ const joinWithComma: FieldValuesJoiner = (values) => values.join(', ');
 type ResponseSegmentProps = {
   phrasalData: ActivitiesPhrasalData;
   field: PhrasalTemplateItemResponseField;
+  leadingSpace?: boolean;
 };
 
-export const ResponseSegment = ({ phrasalData, field }: ResponseSegmentProps) => {
+export const ResponseSegment = ({ phrasalData, field, leadingSpace }: ResponseSegmentProps) => {
   const { t } = useActionPlanTranslation();
   const listPadding = useXScaledDimension(40);
 
@@ -132,7 +133,10 @@ export const ResponseSegment = ({ phrasalData, field }: ResponseSegmentProps) =>
           </Box>
         </>
       ) : (
-        <>&nbsp;{joinSentenceWords(words)}&nbsp;</>
+        <>
+          {leadingSpace ? ' ' : ''}
+          {joinSentenceWords(words)}
+        </>
       )}
     </Text>
   );

diff --git a/src/entities/activity/ui/items/ActionPlan/TextSegment.tsx b/src/entities/activity/ui/items/ActionPlan/TextSegment.tsx
@@ -1,10 +1,11 @@
 import Text from '~/shared/ui/Text';
 
-type TextSegmentProps = { text: string };
+type TextSegmentProps = { text: string; leadingSpace?: boolean };
 
-export const TextSegment = ({ text }: TextSegmentProps) => {
+export const TextSegment = ({ text, leadingSpace }: TextSegmentProps) => {
   return (
     <Text component="span" fontSize="inherit" lineHeight="inherit">
+      {leadingSpace ? ' ' : ''}
       {text}
     </Text>
   );