standup feature page that takes standup of people and stores it

src/app/services/api.ts

@@ -22,6 +22,7 @@ export const api = createApi({
         'User',
         'Tags',
         'Levels',
+        'User_Standup',
     ],
     /**
      * This api has endpoints injected in adjacent files,

src/app/services/progressesApi.ts

@@ -1,4 +1,5 @@
 import { api } from './api';
+import { userDetails } from '@/types/standup.type';
 
 export const progressesApi = api.injectEndpoints({
     endpoints: (builder) => ({
@@ -13,7 +14,12 @@ export const progressesApi = api.injectEndpoints({
                 },
             }),
         }),
+        userProgressDetails: builder.query<userDetails, string | undefined>({
+            query: (id): string => `/progresses?userId=${id}`,
+            providesTags: ['User_Standup'],
+        }),
     }),
 });
 
-export const { useSaveProgressMutation } = progressesApi;
+export const { useSaveProgressMutation, useUserProgressDetailsQuery } =
+    progressesApi;

src/components/Layout/index.tsx

@@ -1,9 +1,10 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, Fragment } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import Footer from '@/components/footer';
 import styles from '@/components/Layout/Layout.module.scss';
 import NavBar from '@/components/navBar';
+import { navBarContentMock, featureFlags } from '@/constants/navbar-Content';
 import { useGetUserQuery } from '@/app/services/userApi';
 import { Loader } from '../tasks/card/Loader';
 
@@ -37,50 +38,33 @@ const Layout: FC<Props> = ({ children }) => {
             {isLoading && <Loader />}
             <div className={styles.wrapper}>
                 <div className={styles.header}>
-                    {navBarContent('Tasks', '/', router.pathname === '/')}|
-                    {navBarContent(
-                        'Issues',
-                        '/issues',
-                        router.pathname === '/issues'
-                    )}
-                    |
-                    {navBarContent(
-                        'Mine',
-                        '/mine',
-                        router.pathname === '/mine'
-                    )}
-                    {/* TODO: Uncomment when DS(Chanllenges) is ready */}
-                    {/* |
-                    {navBarContent(
-                        'DS',
-                        '/challenges',
-                        router.pathname === '/challenges'
-                    )} */}
-                    |
-                    {navBarContent(
-                        'Open PRs',
-                        '/openPRs',
-                        router.pathname === '/openPRs'
-                    )}
-                    |
-                    {navBarContent(
-                        'Stale PRs',
-                        '/stale-pr',
-                        router.pathname === '/stale-pr'
-                    )}
-                    |
-                    {navBarContent(
-                        'Idle Users',
-                        '/idle-users',
-                        router.pathname === '/idle-users'
-                    )}
-                    {dev && (
-                        <>
-                            |
+                    {navBarContentMock.map((element, index) => (
+                        <Fragment key={index}>
                             {navBarContent(
-                                'Availability Panel',
-                                '/availability-panel'
+                                element.title,
+                                element.refURL,
+                                router.pathname === element.pathName
                             )}
+                            {element.pipeSymbol}
+                        </Fragment>
+                    ))}
+                    {dev && (
+                        <>
+                            {featureFlags.map((element, index) => {
+                                return (
+                                    <>
+                                        {element.pipeSymbol}
+                                        <Fragment key={index}>
+                                            {navBarContent(
+                                                element.title,
+                                                element.refURL,
+                                                router.pathname ===
+                                                    element.pathName
+                                            )}
+                                        </Fragment>
+                                    </>
+                                );
+                            })}
                         </>
                     )}
                 </div>

src/components/ProgressForm/ProgressForm.module.scss

@@ -12,15 +12,13 @@ $section-padding-top-bottom: $base-unit * 30;
 $section-padding-left-right: $base-unit * 25;
 
 .banner {
-    width: 60%;
-    margin: $diff-margin auto;
-    background-color: $color-blue;
-    color: $color-white;
-    border: 1px solid $color-red;
-    font-size: $base-unit * 4;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    margin-top: $diff-margin;
+    margin-left: 8.2rem;
 }
 
 .mark {

src/components/ProgressForm/ProgressHeader.tsx

@@ -1,15 +1,25 @@
-import styles from '@/components/ProgressForm/ProgressForm.module.scss';
+import { FC } from 'react';
+import styles from '@/components/standup/standupContainer.module.scss';
+import { progressHeaderProps } from '@/types/ProgressUpdates';
 
-function ProgressHeader() {
+const ProgressHeader: FC<progressHeaderProps> = ({
+    totalMissedUpdates,
+    updateType,
+}) => {
     return (
-        <header className={styles.banner}>
-            <p>
-                You have <span className={styles.mark}> 2 missed</span> Progress
-                Updates
+        <div className={styles.progressBanner}>
+            <p className={styles.bannerPara}>
+                You have
+                <span className={styles.totalMissedUpdates}>
+                    {totalMissedUpdates} missed
+                </span>
+                {updateType} updates
             </p>
-            <p>Lets try to avoid missing updates</p>
-        </header>
+            <p className={styles.bannerPara}>
+                Let&apos;s try to avoid having zero days
+            </p>
+        </div>
     );
-}
+};
 
 export default ProgressHeader;

src/components/ProgressForm/ProgressLayout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 
 import getCurrentDate from '@/utils/getLatestDate';
 
@@ -8,19 +8,31 @@ import ProgressForm from './ProgressForm';
 import styles from '@/components/ProgressForm/ProgressForm.module.scss';
 
 import { questions } from '@/constants/ProgressUpdates';
+import { getTotalMissedUpdates } from '@/utils/getTotalMissedUpdate';
+import { useUserProgressDetailsQuery } from '@/app/services/progressesApi';
+import { useGetUserQuery } from '@/app/services/userApi';
 
-function ProgressLayout() {
+const ProgressLayout: FC = () => {
+    const { data: user } = useGetUserQuery();
+    const { data: userStandupdata } = useUserProgressDetailsQuery(user?.id);
+    const standupDates = userStandupdata?.data?.map((element) => element.date);
+    const totalMissedUpdates = getTotalMissedUpdates(standupDates || []);
     return (
         <>
             <NavBar />
-            <ProgressHeader />
+            <div className={styles.banner}>
+                <ProgressHeader
+                    totalMissedUpdates={totalMissedUpdates}
+                    updateType="Progress"
+                />
+            </div>
             <section className={styles.container}>
                 <h1 className={styles.formHeading}>Task Updates</h1>
                 <h2 className={styles.date}>On {getCurrentDate()}</h2>
                 <ProgressForm questions={questions} />
             </section>
         </>
     );
-}
+};
 
 export default ProgressLayout;

src/components/standup/FormInputComponent.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+
+import styles from '@/components/standup/standupContainer.module.scss';
+import { InputProps } from '@/types/standup.type';
+
+const FormInputComponent: FC<InputProps> = ({
+    placeholder,
+    name,
+    value,
+    dataTestId,
+    labelValue,
+    htmlFor,
+    inputId,
+    handleChange,
+}) => {
+    return (
+        <>
+            <label className={styles.updateHeading} htmlFor={htmlFor}>
+                {labelValue}
+            </label>
+            <input
+                id={inputId}
+                data-testid={dataTestId}
+                type="text"
+                className={styles.inputField}
+                placeholder={placeholder}
+                required
+                name={name}
+                value={value}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleChange(e)
+                }
+            />
+        </>
+    );
+};
+
+export default FormInputComponent;

src/components/standup/index.tsx

@@ -0,0 +1,135 @@
+import { FC, useState, useEffect } from 'react';
+import moment from 'moment';
+import styles from '@/components/standup/standupContainer.module.scss';
+
+import {
+    useSaveProgressMutation,
+    useUserProgressDetailsQuery,
+} from '@/app/services/progressesApi';
+import { useGetUserQuery } from '@/app/services/userApi';
+
+import FormInputComponent from './FormInputComponent';
+import { standupUpdateType } from '@/types/standup.type';
+import { getTotalMissedUpdates } from '@/utils/getTotalMissedUpdate';
+import { toast, ToastTypes } from '@/helperFunctions/toast';
+import {
+    ERROR_MESSAGE,
+    STANDUP_SUBMISSION_SUCCESS,
+} from '@/constants/constants';
+import ProgressHeader from '../ProgressForm/ProgressHeader';
+
+const defaultState = {
+    type: 'user',
+    completed: '',
+    planned: '',
+    blockers: '',
+};
+
+const StandUpContainer: FC = () => {
+    const [standupUpdate, setStandupUpdate] =
+        useState<standupUpdateType>(defaultState);
+
+    const [addStandup] = useSaveProgressMutation();
+    const { data: user } = useGetUserQuery();
+    const { data: userStandupdata } = useUserProgressDetailsQuery(user?.id);
+
+    const { SUCCESS, ERROR } = ToastTypes;
+    const standupDates = userStandupdata?.data?.map((element) => element.date);
+    const totalMissedUpdates = getTotalMissedUpdates(standupDates || []);
+    const yesterdayDate = moment().subtract(1, 'days').format('MMMM DD, YYYY');
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setStandupUpdate((prevStandupUpdate) => ({
+            ...prevStandupUpdate,
+            [event.target.name]: event.target.value,
+        }));
+    };
+    const isValidate = () => {
+        return (
+            standupUpdate.completed !== '' &&
+            standupUpdate.planned !== '' &&
+            standupUpdate.blockers !== ''
+        );
+    };
+
+    const buttonStyleClass = !isValidate()
+        ? `${styles.nonActiveButton}`
+        : `${styles.activeButton}`;
+
+    const handleFormSubmission = async (
+        event: React.FormEvent<HTMLFormElement>
+    ) => {
+        event.preventDefault();
+        try {
+            await addStandup(standupUpdate);
+            toast(SUCCESS, STANDUP_SUBMISSION_SUCCESS);
+            setStandupUpdate(defaultState);
+        } catch (error) {
+            console.error(error);
+            toast(ERROR, ERROR_MESSAGE);
+        }
+    };
+
+    return (
+        <>
+            <section className="container">
+                <div className={styles.standupContainer}>
+                    <ProgressHeader
+                        totalMissedUpdates={totalMissedUpdates}
+                        updateType="Standup"
+                    />
+
+                    <div className={styles.standupUpdateContainer}>
+                        <h1 className={styles.standupTitle}>Standup Update</h1>
+                        <form
+                            className={styles.standupForm}
+                            onSubmit={handleFormSubmission}
+                        >
+                            <fieldset className={styles.formFields}>
+                                <FormInputComponent
+                                    htmlFor="completed"
+                                    labelValue={yesterdayDate}
+                                    dataTestId="completedInputField"
+                                    placeholder="e.g Raised PR for adding new config"
+                                    name="completed"
+                                    value={standupUpdate.completed}
+                                    inputId="completed"
+                                    handleChange={handleChange}
+                                />
+                                <FormInputComponent
+                                    htmlFor="planned"
+                                    labelValue="Today"
+                                    dataTestId="todayInputField"
+                                    placeholder="e.g Refactor signup to support Google login"
+                                    name="planned"
+                                    value={standupUpdate.planned}
+                                    inputId="planned"
+                                    handleChange={handleChange}
+                                />
+                                <FormInputComponent
+                                    htmlFor="blockers"
+                                    labelValue="Blockers"
+                                    dataTestId="blockerInputField"
+                                    placeholder="e.g Waiting on identity team to deploy FF"
+                                    name="blockers"
+                                    value={standupUpdate.blockers}
+                                    inputId="blockers"
+                                    handleChange={handleChange}
+                                />
+                            </fieldset>
+                            <button
+                                className={`${styles.submitButton} ${buttonStyleClass}`}
+                                disabled={!isValidate()}
+                                type="submit"
+                            >
+                                Submit
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default StandUpContainer;