Asap 398 first publish date (#4232)

* [ASAP-398] - set date if entry has not been published yet

* update test

* add condition for existing cases

packages/contentful-app-extensions/date-field-as-first-published-at/src/locations/Field.tsx

@@ -1,14 +1,23 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Text } from '@contentful/f36-components';
-import { EntrySys, FieldExtensionSDK } from '@contentful/app-sdk';
-import { useSDK } from '@contentful/react-apps-toolkit';
+import { EntrySys, FieldAppSDK } from '@contentful/app-sdk';
+import { useFieldValue, useSDK } from '@contentful/react-apps-toolkit';
 
 const Field = () => {
-  const sdk = useSDK<FieldExtensionSDK>();
+  const sdk = useSDK<FieldAppSDK>();
+  const [value, setValue] = useFieldValue();
 
-  const [field] = useState(sdk.field.getValue());
+  useEffect(() => {
+    if (!sdk.entry.getSys().firstPublishedAt) {
+      setValue(new Date().toISOString());
+    }
 
-  return <Text>{field ?? sdk.entry.getSys().firstPublishedAt}</Text>;
+    if (sdk.entry.getSys().firstPublishedAt && !value) {
+      setValue(sdk.entry.getSys().firstPublishedAt);
+    }
+  }, []);
+
+  return <Text>{value}</Text>;
 };
 
 export default Field;

packages/contentful-app-extensions/date-field-as-first-published-at/src/test/locations/Field.test.tsx

@@ -1,36 +1,60 @@
 import '@testing-library/jest-dom';
-import React from 'react';
+import React, { useState } from 'react';
 import Field from '../../locations/Field';
 import { render, screen, waitFor } from '@testing-library/react';
 
-import { useSDK } from '@contentful/react-apps-toolkit';
+import { useSDK, useFieldValue } from '@contentful/react-apps-toolkit';
 
 jest.mock('@contentful/react-apps-toolkit', () => ({
   useSDK: jest.fn(),
+  useFieldValue: jest.fn(),
 }));
 
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
 describe('Field component', () => {
-  it('renders the value when its available', () => {
+  it('updates to current timestamp if entry has not been published', async () => {
     (useSDK as jest.Mock).mockImplementation(() => ({
-      field: {
-        getValue: jest.fn(() => '2023-04-12T16:05:00.000Z'),
+      entry: {
+        getSys: () => ({}),
       },
     }));
+    (useFieldValue as jest.Mock).mockImplementation(() => {
+      return useState('2024-01-01T08:08:00.000Z');
+    });
     render(<Field />);
-
-    expect(screen.getByText('2023-04-12T16:05:00.000Z')).toBeInTheDocument();
+    expect(screen.getByText(new Date().toISOString())).toBeInTheDocument();
   });
 
-  it('renders the value from the system firstPublishedAt when it is not available', () => {
+  it('does not update to current timestamp if entry has been published', async () => {
     (useSDK as jest.Mock).mockImplementation(() => ({
-      field: {
-        getValue: jest.fn(),
+      entry: {
+        getSys: () => ({ firstPublishedAt: '2024-03-01T08:08:00.000Z' }),
       },
+    }));
+    (useFieldValue as jest.Mock).mockImplementation(() => {
+      return useState('2024-01-01T08:08:00.000Z');
+    });
+    render(<Field />);
+    expect(screen.getByText('2024-01-01T08:08:00.000Z')).toBeInTheDocument();
+  });
+
+  it('updates with firstPublishedAt if entry published but field not set', async () => {
+    (useSDK as jest.Mock).mockImplementation(() => ({
       entry: {
-        getSys: () => ({ firstPublishedAt: '2020-10-11T16:05:00.000Z' }),
+        getSys: () => ({ firstPublishedAt: '2024-03-01T08:08:00.000Z' }),
       },
     }));
+    (useFieldValue as jest.Mock).mockImplementation(() => {
+      return useState(undefined);
+    });
     render(<Field />);
-    expect(screen.getByText('2020-10-11T16:05:00.000Z')).toBeInTheDocument();
+    expect(screen.getByText('2024-03-01T08:08:00.000Z')).toBeInTheDocument();
   });
 });