Update ChangesDiff component (#405)

* Update ChangesDiff component * Fix ChangesDiff stories
beda-software · Dec 10, 2024 · bfd075c · bfd075c
1 parent 7f55b0d
commit bfd075c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 19 deletions.
diff --git a/src/components/ChangesDiff/ChangesDiff.stories.tsx b/src/components/ChangesDiff/ChangesDiff.stories.tsx
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { WithQuestionFormProviderDecorator, withColorSchemeDecorator } from 'src/storybook/decorators';
 
-import { ChangesDiff, Props } from './index';
+import { ChangesDiff, ChangesDiffProps } from './index';
 
 const meta: Meta<typeof ChangesDiff> = {
     title: 'components / ChangesDiff',
@@ -21,7 +21,7 @@ export const Deletions: Story = {
     render: () => <ChangesDiff {...props2} />,
 };
 
-const props1: Props = {
+const props1: ChangesDiffProps = {
     id: '6d2d6fe6-beba-4ce6-9a9f-dd0d4b06d4e5',
     activityCode: 'CREATE',
     recorded: '2023-07-19T14:16:19.825125Z',
@@ -48,7 +48,7 @@ const props1: Props = {
     ],
 };
 
-const props2: Props = {
+const props2: ChangesDiffProps = {
     id: '27613e5f-e8dd-4a9c-8d36-dfd2f1089d5e',
     activityCode: 'UPDATE',
     recorded: '2023-07-19T14:16:19.825125Z',

diff --git a/src/components/ChangesDiff/index.tsx b/src/components/ChangesDiff/index.tsx
@@ -5,39 +5,44 @@ import { Text } from 'src/components/Typography';
 import { formatHumanDateTime } from 'src/utils/date';
 
 import { S } from './ChangesDiff.styles';
+import { CSSProperties } from 'react';
 
-interface Change {
+export interface ChangesDiffChange {
     key: string;
     title: string;
     valueBefore: string | null;
     valueAfter: string | null;
 }
 
-export interface Props {
+export interface ChangesDiffProps {
     id: string;
-    changes: Change[];
-    activityCode: string;
-    recorded: string;
-    author: string[];
+    changes: ChangesDiffChange[];
+    activityCode?: string;
+    recorded?: string;
+    author?: string[];
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
 }
 
-export function ChangesDiff(props: Props) {
-    const { changes, id, activityCode, recorded, author = [] } = props;
+export function ChangesDiff(props: ChangesDiffProps) {
+    const { changes, id, activityCode, recorded, author = [], className, style } = props;
     const codesMapping = {
         CREATE: t`Created`,
         UPDATE: t`Updated`,
     };
-    const activity = codesMapping[activityCode];
-    const date = formatHumanDateTime(recorded);
+    const activity = activityCode ? codesMapping[activityCode] : null;
+    const date = recorded ? formatHumanDateTime(recorded) : null;
     const by = author.join(', ');
 
     return (
-        <S.Container>
-            <S.Header>
-                <b>
-                    {activity} {date} by {by}
-                </b>
-            </S.Header>
+        <S.Container className={className} style={style}>
+            {activity ? (
+                <S.Header>
+                    <b>
+                        {activity} {date} by {by}
+                    </b>
+                </S.Header>
+            ) : null}
             {changes.map((item) => (
                 <div key={`diff-${id}-${item.key}`}>
                     <Text>{item.title}</Text>