Corrected loading issue and extra space in standup submit (#1230)

Co-authored-by: Shubham Sharma <shbh541@gmail.com>

__tests__/Unit/Components/Standup/FormComponent.test.tsx

@@ -7,6 +7,7 @@ import { Provider } from 'react-redux';
 import { setupServer } from 'msw/node';
 import { failedPostStandup } from '../../../../__mocks__/handlers/standup.handler';
 import handlers from '../../../../__mocks__/handlers';
+import { cleanup } from '@testing-library/react';
 
 const server = setupServer(...handlers);
 
@@ -15,6 +16,9 @@ describe('FormComponent', () => {
         server.listen();
     });
     afterEach(() => {
+        cleanup();
+        jest.clearAllMocks();
+        jest.resetModules();
         server.resetHandlers();
     });
     afterAll(() => {
@@ -24,11 +28,7 @@ describe('FormComponent', () => {
     test('should be able to submit the standup form', async () => {
         const { container } = renderWithRouter(
             <Provider store={store()}>
-                <FormInputComponent
-                    setIsFormVisible={() => {
-                        true;
-                    }}
-                />
+                <FormInputComponent />
                 <ToastContainer />
             </Provider>,
             {
@@ -75,11 +75,7 @@ describe('FormComponent', () => {
         server.use(failedPostStandup);
         const { container } = renderWithRouter(
             <Provider store={store()}>
-                <FormInputComponent
-                    setIsFormVisible={() => {
-                        true;
-                    }}
-                />
+                <FormInputComponent />
                 <ToastContainer />
             </Provider>,
             {
@@ -119,4 +115,35 @@ describe('FormComponent', () => {
             ).toBeInTheDocument()
         );
     });
+    test('should disable the submit button after first click', async () => {
+        const { container } = renderWithRouter(
+            <Provider store={store()}>
+                <FormInputComponent />
+                <ToastContainer />
+            </Provider>,
+            {
+                asPath: '/standup',
+                replace: jest.fn(),
+            }
+        );
+
+        const YesterdayInptutField = screen.getByTestId('Yesterday0');
+        fireEvent.change(YesterdayInptutField, {
+            target: { value: 'Working on a backend Go project1' },
+        });
+
+        const todayInputField = screen.getByTestId('Today0');
+        fireEvent.change(todayInputField, {
+            target: { value: 'Working on a live-site project' },
+        });
+
+        const BlockerInputField = screen.getByTestId('Blocker0');
+        fireEvent.change(BlockerInputField, {
+            target: { value: 'None' },
+        });
+        const submitButton = container.getElementsByClassName('submitButton');
+        expect(submitButton[0]).not.toBeDisabled();
+        fireEvent.submit(screen.getByRole('form'));
+        expect(submitButton[0]).toBeDisabled();
+    });
 });

__tests__/Unit/Components/Standup/MainForm.test.tsx

@@ -0,0 +1,48 @@
+import { setupServer } from 'msw/node';
+import handlers from '../../../../__mocks__/handlers';
+import MainForm from '@/components/standup/MainForm';
+import { renderWithRouter } from '@/test_utils/createMockRouter';
+import { Provider } from 'react-redux';
+import { store } from '@/app/store';
+import { screen, waitFor } from '@testing-library/react';
+
+const server = setupServer(...handlers);
+
+describe('MainFOrm', () => {
+    beforeAll(() => {
+        server.listen();
+    });
+    afterEach(() => {
+        server.resetHandlers();
+    });
+    afterAll(() => {
+        server.close();
+    });
+
+    test('If isFormVisible is true it should render form for standup. ', async () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <MainForm isFormVisible={true} />
+            </Provider>
+        );
+
+        await waitFor(() =>
+            expect(screen.getByRole('form')).toBeInTheDocument()
+        );
+    });
+    test('If isFormVisible is false it should render form for standup. ', async () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <MainForm isFormVisible={false} />
+            </Provider>
+        );
+
+        await waitFor(() =>
+            expect(
+                screen.getByText(
+                    'Your standup for the day has already been submitted, please fill out the form tomorrow after 6:00 a.m.'
+                )
+            ).toBeInTheDocument()
+        );
+    });
+});

__tests__/Unit/Components/Standup/StandupContainer.test.tsx

@@ -61,7 +61,6 @@ describe('StandupContainer', () => {
                 replace: jest.fn(),
             }
         );
-
         const addButton = container.getElementsByClassName('addButton');
         const removeButton = container.getElementsByClassName('removeButton');
         const YesterdayInptutField = screen.getByTestId('Yesterday0');
@@ -96,11 +95,6 @@ describe('StandupContainer', () => {
             expect(
                 screen.getByText('User Progress document created successfully.')
             ).toBeInTheDocument();
-            expect(
-                screen.getByText(
-                    'Your standup for the day has already been submitted, please fill out the form tomorrow after 6:00 a.m.'
-                )
-            ).toBeInTheDocument();
         });
     });
 });

src/components/standup/FormInputComponent.tsx

@@ -1,26 +1,18 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/router';
 import { useSaveProgressMutation } from '@/app/services/progressesApi';
 import { toast, ToastTypes } from '@/helperFunctions/toast';
 import styles from '@/components/standup/standupContainer.module.scss';
 import SectionComponent from './SectionComponent';
 
-const intialSection = [
-    { title: 'Yesterday', inputs: [''] },
-    { title: 'Today', inputs: [''] },
-    { title: 'Blocker', inputs: [''] },
-];
-
-interface setIsFormVisibleProps {
-    setIsFormVisible: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const FormInputComponent: FC<setIsFormVisibleProps> = ({
-    setIsFormVisible,
-}) => {
+const FormInputComponent = () => {
     const router = useRouter();
-    const [sections, setSections] = useState(intialSection);
-    const [addStandup] = useSaveProgressMutation();
+    const [sections, setSections] = useState([
+        { title: 'Yesterday', inputs: [''] },
+        { title: 'Today', inputs: [''] },
+        { title: 'Blocker', inputs: [''] },
+    ]);
+    const [addStandup, { isLoading }] = useSaveProgressMutation();
     const { SUCCESS, ERROR } = ToastTypes;
 
     const handleAddField = (sectionIndex: number) => {
@@ -60,11 +52,10 @@ const FormInputComponent: FC<setIsFormVisibleProps> = ({
         e.preventDefault();
         const newData = {
             type: 'user',
-            completed: sections[0].inputs.join('.'),
-            planned: sections[1].inputs.join('. '),
-            blockers: sections[2].inputs.join('. '),
+            completed: sections[0].inputs.join(' ').trim(),
+            planned: sections[1].inputs.join(' ').trim(),
+            blockers: sections[2].inputs.join(' ').trim(),
         };
-        setIsFormVisible(false);
         await addStandup(newData)
             .unwrap()
             .then((data) => {
@@ -100,7 +91,7 @@ const FormInputComponent: FC<setIsFormVisibleProps> = ({
             ))}
             <button
                 type="submit"
-                disabled={!isFormValid()}
+                disabled={!isFormValid() || isLoading}
                 className={`${styles.submitButton}`}
             >
                 Submit

src/components/standup/MainForm.tsx

@@ -0,0 +1,17 @@
+import FormInputComponent from './FormInputComponent';
+import styles from '@/components/standup/standupContainer.module.scss';
+
+const MainForm = ({ isFormVisible }: { isFormVisible: boolean }) => {
+    if (isFormVisible) {
+        return <FormInputComponent />;
+    } else {
+        return (
+            <p className={styles.formFilledMessage}>
+                Your standup for the day has already been submitted, please fill
+                out the form tomorrow after 6:00 a.m.
+            </p>
+        );
+    }
+};
+
+export default MainForm;

src/components/standup/index.tsx

@@ -1,18 +1,16 @@
-import { FC, useEffect, useState } from 'react';
+import { FC } from 'react';
 import styles from '@/components/standup/standupContainer.module.scss';
 import { useGetProgressDetailsQuery } from '@/app/services/progressesApi';
 import { useGetUserQuery } from '@/app/services/userApi';
-import FormInputComponent from './FormInputComponent';
 import { getTotalMissedUpdates } from '@/utils/getTotalMissedUpdate';
 import { STANDUPTIME } from '@/constants/constants';
 import ProgressHeader from '../ProgressForm/ProgressHeader';
 import { getCurrentDate } from '@/utils/getCurrentDate';
 import moment from 'moment';
 import { Loader } from '../tasks/card/Loader';
+import MainForm from './MainForm';
 
 const StandUpContainer: FC = () => {
-    const [isFormVisible, setIsFormVisible] = useState<boolean>(true);
-
     const { data: user } = useGetUserQuery();
     const { data: userStandupdata, isLoading } = useGetProgressDetailsQuery(
         {
@@ -27,42 +25,17 @@ const StandUpContainer: FC = () => {
         (max, current) => (current > max ? current : max),
         standupDates[0]
     );
-    const getDateFromTimeStamp = moment(result).format('DD-MM-YYYY');
+    const getDateFromTimeStamp = result
+        ? moment(result).format('DD-MM-YYYY')
+        : null;
     const getCurrentDateResult = moment().format('DD-MM-YYYY');
     const currentDateResult = getCurrentDateResult.split('-')[0];
-    const dateResult = getDateFromTimeStamp.split('-')[0];
+    const dateResult = getDateFromTimeStamp
+        ? getDateFromTimeStamp.split('-')[0]
+        : null;
     const now = moment();
     const hour = now.hours();
 
-    useEffect(() => {
-        if (currentDateResult === dateResult && standupDates) {
-            setIsFormVisible(false);
-        } else if (hour >= 6 && currentDateResult !== dateResult) {
-            setIsFormVisible(true);
-        } else {
-            setIsFormVisible(true);
-        }
-    }, [standupDates]);
-
-    const mainForm = () => {
-        if (isLoading) {
-            return <Loader />;
-        } else {
-            if (isFormVisible) {
-                return (
-                    <FormInputComponent setIsFormVisible={setIsFormVisible} />
-                );
-            } else {
-                return (
-                    <p className={styles.formFilledMessage}>
-                        Your standup for the day has already been submitted,
-                        please fill out the form tomorrow after 6:00 a.m.
-                    </p>
-                );
-            }
-        }
-    };
-
     return (
         <>
             <section className="container">
@@ -73,10 +46,19 @@ const StandUpContainer: FC = () => {
                 <div className={styles.standupContainer}>
                     <div className={styles.standupUpdateContainer}>
                         <h1 className={styles.standupTitle}>Standup Update</h1>
-                        <h4 className={styles.StandupDate}>
+                        <h4
+                            id={JSON.stringify(userStandupdata)}
+                            className={styles.StandupDate}
+                        >
                             Current Date - {currentDate}
                         </h4>
-                        {mainForm()}
+                        {isLoading ? (
+                            <Loader />
+                        ) : (
+                            <MainForm
+                                isFormVisible={currentDateResult !== dateResult}
+                            />
+                        )}
                     </div>
                 </div>
             </section>