From 82d743a752dd2d270f19dd70ed2431df63f036bb Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 26 Apr 2023 18:09:05 +0530 Subject: [PATCH 01/79] standup feature page that takes standup op people and stores it --- src/components/Layout/index.tsx | 6 ++ src/components/constants/url.ts | 3 +- src/pages/standup.tsx | 74 +++++++++++++++ src/styles/index.scss | 1 + src/styles/standup.module.scss | 158 ++++++++++++++++++++++++++++++++ 5 files changed, 241 insertions(+), 1 deletion(-) create mode 100644 src/pages/standup.tsx create mode 100644 src/styles/standup.module.scss diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index bd3df56ca..a26b4afec 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -40,6 +40,12 @@ const Layout: FC = ({ children }) => { router.pathname === '/mine' )} | + {navBarContent( + 'Standup', + '/standup', + router.pathname === '/standup' + )} + | {navBarContent( 'DS', '/challenges', diff --git a/src/components/constants/url.ts b/src/components/constants/url.ts index 1fe7ff635..d797c2930 100644 --- a/src/components/constants/url.ts +++ b/src/components/constants/url.ts @@ -2,6 +2,7 @@ export const BASE_URL = `${process.env.NEXT_PUBLIC_BASE_URL}`; export const SUBSCRIBE_TO_CHALLENGE_URL = `${BASE_URL}/challenges/subscribe`; export const MINE_TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tasks/self`; export const USER_PROFILE_URL = 'https://my.realdevsquad.com/profile'; +export const USER_STANDUP_URL = 'https://dev.realdevsquad.com/standup'; export const HOME_URL = 'https://realdevsquad.com'; export const WELCOME_URL = 'https://welcome.realdevsquad.com'; export const EVENTS_URL = 'https://www.realdevsquad.com/events.html'; @@ -23,4 +24,4 @@ export const ALL_TAGS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tags`; export const ALL_LEVELS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/levels`; export const ITEM_TYPES = { task: 'TASK' }; export const TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tasks`; -export const USERS_URL = `${BASE_URL}/users`; \ No newline at end of file +export const USERS_URL = `${BASE_URL}/users`; diff --git a/src/pages/standup.tsx b/src/pages/standup.tsx new file mode 100644 index 000000000..da920f67d --- /dev/null +++ b/src/pages/standup.tsx @@ -0,0 +1,74 @@ +import { FC } from 'react'; +import Head from '@/components/head'; +import Layout from '@/components/Layout'; + +import styles from '@/styles/standup.module.scss'; + +const StandUp: FC = () => { + return ( + <> + + +
+
+
+

+ You have 2 missed Standup updates + this week +

+

Let's try to avoid having zero days

+
+ + +
+
+
+

Standup Update

+
+
+

+ On March 11, 2023 +

+ +
+
+

+ Today +

+ +
+
+

+ Blockers +

+ +
+ +
+
+
+
+ + + ); +}; + +export default StandUp; diff --git a/src/styles/index.scss b/src/styles/index.scss index de3935726..02171fa6e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,5 +1,6 @@ body { margin: 0 auto; + background-color: #f5f5f5; } html { diff --git a/src/styles/standup.module.scss b/src/styles/standup.module.scss new file mode 100644 index 000000000..a45205976 --- /dev/null +++ b/src/styles/standup.module.scss @@ -0,0 +1,158 @@ +.standupContainer { + display: flex; + flex-direction: column; + margin-top: 30px; + width: 100%; + align-items: center; + justify-content: center; +} + +.standupBanner { + background-color: #1c325e; + width: 83.6875%; + height: 12%; + color: #ffffff; + padding: 24px 0 24px 49px; + border-radius: 8px; +} + +.standupBanner p { + font-family: 'Poppins', sans-serif; + font-size: 20px; + font-weight: 600; +} + +.standupBanner p span { + color: #f1416c; + text-decoration: underline; +} + +.buttonContainer { + display: flex; + flex-direction: row; + // justify-content: center; + // align-items: center; + padding: 0px 20px; + gap: 8px; + flex-wrap: wrap; +} + +.buttonContainer button { + width: 128px; + height: 40px; + border-radius: 8px; + border: none; + cursor: pointer; + color: #ffffff; + font-weight: 500; + letter-spacing: 1px; +} + +.continueButton { + background: #1e429f; + font-size: 14px; + line-height: 150%; + margin-right: 10px; +} + +.updateButton { + background-color: #d61f69; + letter-spacing: 0.5px; +} + +.standupUpdateContainer { + width: 50.63625%; + margin-top: 50px; +} + +.standupForm { + margin-top: 35px; +} + +.standupUpdateContainer h1 { + color: #1e429f; + font-family: 'Inter', sans-serif; + font-size: 2.2rem; +} + +.yesterdayUpdate h1, +.todayUpdate h1, +.blockerUpdate h1 { + color: #6b7280; + font-size: 1.4rem; + margin-top: 40px; +} + +.inputFlield { + height: 58px; + width: 100%; + border-radius: 8px; + border: 1px solid #d1d5db; + background: #ffffff; + padding: 5px; + font-weight: 400; + font-size: 14px; + line-height: 150%; + font-family: 'Inter', sans-serif; +} + +.inputFlield:focus { + border: 1px solid #1c64f2; + outline: none; +} + +.submitButton { + width: 209px; + height: 52px; + margin-top: 45px; + border-radius: 8px; + background: #e5e7eb; + font-weight: 400; + font-size: 14px; + line-height: 150%; + font-family: 'Inter', sans-serif; + border: none; + cursor: pointer; +} + +@media (max-width: 946px) { + .standupUpdateContainer { + width: 64.63625%; + } +} + +@media (max-width: 600px) { + .standupBanner { + width: 100%; + } + + .standupBanner p { + font-size: 16px; + word-wrap: break-word; + } + + .standupUpdateContainer { + width: 76.63625%; + } + + .standupUpdateContainer h1 { + font-size: 1.6rem; + } + + .yesterdayUpdate h1, + .todayUpdate h1, + .blockerUpdate h1 { + font-size: 1rem; + } + + .submitButton { + width: 150px; + height: 40px; + } +} + +@media (max-width: 375px) { + .standupUpdateContainer { + width: 100%; + } +} From 56dda6c28100e8ca5535b2913faa0dfae6f915f2 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Fri, 28 Apr 2023 20:45:30 +0530 Subject: [PATCH 02/79] modified UI design only --- src/components/constants/url.ts | 3 +- src/pages/standup.tsx | 14 +++---- src/styles/standup.module.scss | 70 ++++++++++++++++++++++----------- 3 files changed, 54 insertions(+), 33 deletions(-) diff --git a/src/components/constants/url.ts b/src/components/constants/url.ts index 1d0f06766..260006397 100644 --- a/src/components/constants/url.ts +++ b/src/components/constants/url.ts @@ -1,8 +1,7 @@ export const BASE_URL = `${process.env.NEXT_PUBLIC_BASE_URL}`; export const SUBSCRIBE_TO_CHALLENGE_URL = `${BASE_URL}/challenges/subscribe`; export const MINE_TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tasks/self`; -export const USER_PROFILE_URL = 'https://my.realdevsquad.com/profile'; -export const USER_STANDUP_URL = 'https://dev.realdevsquad.com/standup'; +export const USER_PROFILE_URL = 'https://dev.realdevsquad.com/profile'; export const HOME_URL = 'https://realdevsquad.com'; export const WELCOME_URL = 'https://welcome.realdevsquad.com'; export const EVENTS_URL = 'https://www.realdevsquad.com/events.html'; diff --git a/src/pages/standup.tsx b/src/pages/standup.tsx index da920f67d..49b01a266 100644 --- a/src/pages/standup.tsx +++ b/src/pages/standup.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import React, { FC } from 'react'; import Head from '@/components/head'; import Layout from '@/components/Layout'; @@ -30,9 +30,9 @@ const StandUp: FC = () => {

Standup Update

-

+

+ { />
-

+

+ { />
-

+

+ Date: Mon, 1 May 2023 20:11:46 +0530 Subject: [PATCH 03/79] test cases added for the standup feature --- .../Unit/Components/standup/standup.test.tsx | 59 +++++++++++++++++++ src/pages/standup.tsx | 10 +++- 2 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 __tests__/Unit/Components/standup/standup.test.tsx diff --git a/__tests__/Unit/Components/standup/standup.test.tsx b/__tests__/Unit/Components/standup/standup.test.tsx new file mode 100644 index 000000000..2004e33f6 --- /dev/null +++ b/__tests__/Unit/Components/standup/standup.test.tsx @@ -0,0 +1,59 @@ +import StandUp from '@/pages/standup'; +import { RouterContext } from 'next/dist/shared/lib/router-context'; +import { NextRouter } from 'next/router'; +import { Provider } from 'react-redux'; +import { store } from '@/app/store'; +import { + createMockRouter, + renderWithRouter, +} from '@/test_utils/createMockRouter'; + +describe('Standup', () => { + test('renders the missed updates of the user', () => { + const { queryByTestId } = renderWithRouter( + + + + + ); + + expect(queryByTestId('missed-updates')).toBeInTheDocument(); + }); + test('renders the yesterday Update Input', () => { + const { queryByTestId } = renderWithRouter( + + + + + ); + + expect(queryByTestId('yesterday-input-update')).toBeInTheDocument(); + }); + test('renders the Today Update Input', () => { + const { queryByTestId } = renderWithRouter( + + + + + ); + expect(queryByTestId('today-input-update')).toBeInTheDocument(); + }); + test('renders the blocker Input', () => { + const { queryByTestId } = renderWithRouter( + + + + + ); + + expect(queryByTestId('blocker-input-update')).toBeInTheDocument(); + }); +}); diff --git a/src/pages/standup.tsx b/src/pages/standup.tsx index 49b01a266..f373a348e 100644 --- a/src/pages/standup.tsx +++ b/src/pages/standup.tsx @@ -13,8 +13,11 @@ const StandUp: FC = () => {

- You have 2 missed Standup updates - this week + You have + + 2 missed + + Standup updates this week

Let's try to avoid having zero days

@@ -37,6 +40,7 @@ const StandUp: FC = () => { type="text" className={styles.inputFlield} placeholder="e.g Raised PR for adding new config" + data-testid="yesterday-input-update" />
@@ -47,6 +51,7 @@ const StandUp: FC = () => { type="text" className={styles.inputFlield} placeholder="e.g Refactor signup to support Google login" + data-testid="today-input-update" />
@@ -57,6 +62,7 @@ const StandUp: FC = () => { type="text" className={styles.inputFlield} placeholder="e.g Waiting on identity team to deploy FF" + data-testid="blocker-input-update" />
+ + + + + + ); +}; + +export default StandUpContainer; diff --git a/src/styles/standup.module.scss b/src/components/standup/standupContainer.module.scss similarity index 81% rename from src/styles/standup.module.scss rename to src/components/standup/standupContainer.module.scss index a1ffd825c..9c16a9673 100644 --- a/src/styles/standup.module.scss +++ b/src/components/standup/standupContainer.module.scss @@ -36,37 +36,7 @@ $radius: 8px; .standupBanner p span { color: $theme-FrenchRose; text-decoration: underline; -} - -.buttonContainer { - display: flex; - flex-direction: row; - padding: 0px 20px; - gap: 8px; - flex-wrap: wrap; -} - -.buttonContainer button { - width: 128px; - height: 40px; - border-radius: $radius; - border: none; - cursor: pointer; - color: $theme-white; - font-weight: 500; - letter-spacing: 1px; -} - -.continueButton { - background: $theme-FunBlue; - font-size: 14px; - line-height: 150%; - margin-right: 10px; -} - -.updateButton { - background-color: $theme-CeriseRed; - letter-spacing: 0.5px; + margin: 0 4px; } .standupUpdateContainer { @@ -106,7 +76,7 @@ $radius: 8px; border-radius: $radius; border: 1px solid $theme-Mischka; background: $theme-white; - padding: 5px; + padding: 1rem; font-weight: 400; font-size: 14px; line-height: 150%; @@ -124,25 +94,40 @@ $radius: 8px; height: 52px; margin-top: 45px; border-radius: $radius; - background: $theme-AthensGray; font-weight: 400; font-size: 14px; line-height: 150%; font-family: 'Inter', sans-serif; border: none; cursor: pointer; + letter-spacing: 0.9px; +} + +.submitButton:active { + background: $theme-FunBlue; + color: $theme-white; +} + +.activeButton { + background: $theme-FunBlue; + color: $theme-white; +} + +.nonActiveButton { + background: $theme-AthensGray; } @media (max-width: 946px) { .standupUpdateContainer { - width: 64.63625%; + width: 76.63625%; } } @media (max-width: 600px) { .standupBanner { width: 100%; - padding: 15px 0 15px 20px; + padding: 16px 0 8px 4px; + text-align: center; } .standupBanner p { @@ -151,7 +136,8 @@ $radius: 8px; } .standupUpdateContainer { - width: 76.63625%; + width: 100%; + margin-top: 4px; } .standupUpdateContainer h1 { @@ -163,9 +149,6 @@ $radius: 8px; .blockerUpdate label { font-size: 1rem; } - .inputFlield { - padding: 3px; - } .submitButton { width: 150px; diff --git a/src/interfaces/standup.type.ts b/src/interfaces/standup.type.ts new file mode 100644 index 000000000..b1dbaa62f --- /dev/null +++ b/src/interfaces/standup.type.ts @@ -0,0 +1,16 @@ +export type addStandup = { + type: string; + completed: string; + planned: string; + blockers: string; +}; + +export interface Standup { + handleFormSubmission: (e: React.FormEvent) => void; + handleChange: (e: React.ChangeEvent) => void; + yesterdayDate: string; + buttonDisable: boolean; + completed: string; + planned: string; + blockers: string; +} diff --git a/src/pages/standup.tsx b/src/pages/standup.tsx index f373a348e..574989e7e 100644 --- a/src/pages/standup.tsx +++ b/src/pages/standup.tsx @@ -1,79 +1,71 @@ -import React, { FC } from 'react'; +import React, { FC, useState } from 'react'; import Head from '@/components/head'; import Layout from '@/components/Layout'; -import styles from '@/styles/standup.module.scss'; +import { addStandup } from '@/interfaces/standup.type'; +import { FormatDate } from '@/utils/FormatDate'; +import { LOGIN_URL } from '@/components/constants/url'; +import useAuthenticated from '@/hooks/useAuthenticated'; +import StandUpContainer from '@/components/standup'; +import { useAppContext } from '@/context'; const StandUp: FC = () => { + const [update, setUpdate] = useState({ + type: 'user', + completed: '', + planned: '', + blockers: '', + }); + const [buttonDisable, setButtonDisable] = useState(true); + + const { isLoggedIn, isLoading } = useAuthenticated(); + + const { state } = useAppContext(); + const { isLoading: isAuthenticating } = state; + + const yesterdayDate = FormatDate(); + + const handleFormSubmission = (event: React.FormEvent) => { + event.preventDefault(); + setButtonDisable(false); + setUpdate({ type: 'user', completed: '', planned: '', blockers: '' }); + setButtonDisable(true); + console.log(update); + }; + + const handleChange = (event: React.ChangeEvent) => { + setUpdate({ + ...update, + [event.target.name]: event.target.value, + }); + }; + return ( - <> - - -
-
-
-

- You have - - 2 missed - - Standup updates this week -

-

Let's try to avoid having zero days

-
- - -
-
-
-

Standup Update

-
-
- - -
-
- - -
-
- - -
- -
-
-
+ + + {!isAuthenticating && isLoggedIn ? ( + isLoading ? ( +

Loading...

+ ) : ( + + ) + ) : ( +
+

You are not Authorized

+ + Click here to Login +
- - + )} + ); }; diff --git a/src/utils/FormatDate.js b/src/utils/FormatDate.js new file mode 100644 index 000000000..13acb07ae --- /dev/null +++ b/src/utils/FormatDate.js @@ -0,0 +1,23 @@ +export function FormatDate() { + const months = { + 0: 'January', + 1: 'February', + 2: 'March', + 3: 'April', + 4: 'May', + 5: 'June', + 6: 'July', + 7: 'August', + 8: 'September', + 9: 'October', + 10: 'November', + 11: 'December', + }; + const date = new Date(); + const currentMonth = months[Number(date.getMonth())]; + const yesterday = date.getDate() - 1; + const currentYear = date.getFullYear(); + const yesterDayDate = `${currentMonth} ${yesterday}, ${currentYear}`; + + return yesterDayDate; +} diff --git a/tsconfig.json b/tsconfig.json index 95f7795a1..1246f21b0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,7 +28,7 @@ "src/**/*.ts", "src/**/*.tsx", "__tests__/**/*.tsx" -, "__mocks__/styleMock.ts", "server.ts" ], +, "__mocks__/styleMock.ts", "server.ts", "src/utils/FormatDate.js" ], "exclude": ["node_modules"], "types": ["node", "jest", "@testing-library/jest-dom"] } From 58697721db3e60057015134221a1730864982fe2 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Fri, 28 Apr 2023 20:45:30 +0530 Subject: [PATCH 08/79] modified UI design only --- src/constants/url.ts | 3 +- src/pages/standup.tsx | 14 +++---- src/styles/standup.module.scss | 70 ++++++++++++++++++++++------------ 3 files changed, 54 insertions(+), 33 deletions(-) diff --git a/src/constants/url.ts b/src/constants/url.ts index 1d0f06766..260006397 100644 --- a/src/constants/url.ts +++ b/src/constants/url.ts @@ -1,8 +1,7 @@ export const BASE_URL = `${process.env.NEXT_PUBLIC_BASE_URL}`; export const SUBSCRIBE_TO_CHALLENGE_URL = `${BASE_URL}/challenges/subscribe`; export const MINE_TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tasks/self`; -export const USER_PROFILE_URL = 'https://my.realdevsquad.com/profile'; -export const USER_STANDUP_URL = 'https://dev.realdevsquad.com/standup'; +export const USER_PROFILE_URL = 'https://dev.realdevsquad.com/profile'; export const HOME_URL = 'https://realdevsquad.com'; export const WELCOME_URL = 'https://welcome.realdevsquad.com'; export const EVENTS_URL = 'https://www.realdevsquad.com/events.html'; diff --git a/src/pages/standup.tsx b/src/pages/standup.tsx index da920f67d..49b01a266 100644 --- a/src/pages/standup.tsx +++ b/src/pages/standup.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import React, { FC } from 'react'; import Head from '@/components/head'; import Layout from '@/components/Layout'; @@ -30,9 +30,9 @@ const StandUp: FC = () => {

Standup Update

-

+

+ { />
-

+

+ { />
-

+

+ Date: Mon, 1 May 2023 20:11:46 +0530 Subject: [PATCH 09/79] test cases added for the standup feature --- .../Unit/Components/standup/standup.test.tsx | 59 +++++++++++++++++++ src/pages/standup.tsx | 10 +++- 2 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 __tests__/Unit/Components/standup/standup.test.tsx diff --git a/__tests__/Unit/Components/standup/standup.test.tsx b/__tests__/Unit/Components/standup/standup.test.tsx new file mode 100644 index 000000000..2004e33f6 --- /dev/null +++ b/__tests__/Unit/Components/standup/standup.test.tsx @@ -0,0 +1,59 @@ +import StandUp from '@/pages/standup'; +import { RouterContext } from 'next/dist/shared/lib/router-context'; +import { NextRouter } from 'next/router'; +import { Provider } from 'react-redux'; +import { store } from '@/app/store'; +import { + createMockRouter, + renderWithRouter, +} from '@/test_utils/createMockRouter'; + +describe('Standup', () => { + test('renders the missed updates of the user', () => { + const { queryByTestId } = renderWithRouter( + + + + + ); + + expect(queryByTestId('missed-updates')).toBeInTheDocument(); + }); + test('renders the yesterday Update Input', () => { + const { queryByTestId } = renderWithRouter( + + + + + ); + + expect(queryByTestId('yesterday-input-update')).toBeInTheDocument(); + }); + test('renders the Today Update Input', () => { + const { queryByTestId } = renderWithRouter( + + + + + ); + expect(queryByTestId('today-input-update')).toBeInTheDocument(); + }); + test('renders the blocker Input', () => { + const { queryByTestId } = renderWithRouter( + + + + + ); + + expect(queryByTestId('blocker-input-update')).toBeInTheDocument(); + }); +}); diff --git a/src/pages/standup.tsx b/src/pages/standup.tsx index 49b01a266..f373a348e 100644 --- a/src/pages/standup.tsx +++ b/src/pages/standup.tsx @@ -13,8 +13,11 @@ const StandUp: FC = () => {

- You have 2 missed Standup updates - this week + You have + + 2 missed + + Standup updates this week

Let's try to avoid having zero days

@@ -37,6 +40,7 @@ const StandUp: FC = () => { type="text" className={styles.inputFlield} placeholder="e.g Raised PR for adding new config" + data-testid="yesterday-input-update" />
@@ -47,6 +51,7 @@ const StandUp: FC = () => { type="text" className={styles.inputFlield} placeholder="e.g Refactor signup to support Google login" + data-testid="today-input-update" />
@@ -57,6 +62,7 @@ const StandUp: FC = () => { type="text" className={styles.inputFlield} placeholder="e.g Waiting on identity team to deploy FF" + data-testid="blocker-input-update" />
+ + + + + + ); +}; + +export default StandUpContainer; diff --git a/src/styles/standup.module.scss b/src/components/standup/standupContainer.module.scss similarity index 81% rename from src/styles/standup.module.scss rename to src/components/standup/standupContainer.module.scss index a1ffd825c..9c16a9673 100644 --- a/src/styles/standup.module.scss +++ b/src/components/standup/standupContainer.module.scss @@ -36,37 +36,7 @@ $radius: 8px; .standupBanner p span { color: $theme-FrenchRose; text-decoration: underline; -} - -.buttonContainer { - display: flex; - flex-direction: row; - padding: 0px 20px; - gap: 8px; - flex-wrap: wrap; -} - -.buttonContainer button { - width: 128px; - height: 40px; - border-radius: $radius; - border: none; - cursor: pointer; - color: $theme-white; - font-weight: 500; - letter-spacing: 1px; -} - -.continueButton { - background: $theme-FunBlue; - font-size: 14px; - line-height: 150%; - margin-right: 10px; -} - -.updateButton { - background-color: $theme-CeriseRed; - letter-spacing: 0.5px; + margin: 0 4px; } .standupUpdateContainer { @@ -106,7 +76,7 @@ $radius: 8px; border-radius: $radius; border: 1px solid $theme-Mischka; background: $theme-white; - padding: 5px; + padding: 1rem; font-weight: 400; font-size: 14px; line-height: 150%; @@ -124,25 +94,40 @@ $radius: 8px; height: 52px; margin-top: 45px; border-radius: $radius; - background: $theme-AthensGray; font-weight: 400; font-size: 14px; line-height: 150%; font-family: 'Inter', sans-serif; border: none; cursor: pointer; + letter-spacing: 0.9px; +} + +.submitButton:active { + background: $theme-FunBlue; + color: $theme-white; +} + +.activeButton { + background: $theme-FunBlue; + color: $theme-white; +} + +.nonActiveButton { + background: $theme-AthensGray; } @media (max-width: 946px) { .standupUpdateContainer { - width: 64.63625%; + width: 76.63625%; } } @media (max-width: 600px) { .standupBanner { width: 100%; - padding: 15px 0 15px 20px; + padding: 16px 0 8px 4px; + text-align: center; } .standupBanner p { @@ -151,7 +136,8 @@ $radius: 8px; } .standupUpdateContainer { - width: 76.63625%; + width: 100%; + margin-top: 4px; } .standupUpdateContainer h1 { @@ -163,9 +149,6 @@ $radius: 8px; .blockerUpdate label { font-size: 1rem; } - .inputFlield { - padding: 3px; - } .submitButton { width: 150px; diff --git a/src/interfaces/standup.type.ts b/src/interfaces/standup.type.ts new file mode 100644 index 000000000..b1dbaa62f --- /dev/null +++ b/src/interfaces/standup.type.ts @@ -0,0 +1,16 @@ +export type addStandup = { + type: string; + completed: string; + planned: string; + blockers: string; +}; + +export interface Standup { + handleFormSubmission: (e: React.FormEvent) => void; + handleChange: (e: React.ChangeEvent) => void; + yesterdayDate: string; + buttonDisable: boolean; + completed: string; + planned: string; + blockers: string; +} diff --git a/src/pages/standup.tsx b/src/pages/standup.tsx index f373a348e..574989e7e 100644 --- a/src/pages/standup.tsx +++ b/src/pages/standup.tsx @@ -1,79 +1,71 @@ -import React, { FC } from 'react'; +import React, { FC, useState } from 'react'; import Head from '@/components/head'; import Layout from '@/components/Layout'; -import styles from '@/styles/standup.module.scss'; +import { addStandup } from '@/interfaces/standup.type'; +import { FormatDate } from '@/utils/FormatDate'; +import { LOGIN_URL } from '@/components/constants/url'; +import useAuthenticated from '@/hooks/useAuthenticated'; +import StandUpContainer from '@/components/standup'; +import { useAppContext } from '@/context'; const StandUp: FC = () => { + const [update, setUpdate] = useState({ + type: 'user', + completed: '', + planned: '', + blockers: '', + }); + const [buttonDisable, setButtonDisable] = useState(true); + + const { isLoggedIn, isLoading } = useAuthenticated(); + + const { state } = useAppContext(); + const { isLoading: isAuthenticating } = state; + + const yesterdayDate = FormatDate(); + + const handleFormSubmission = (event: React.FormEvent) => { + event.preventDefault(); + setButtonDisable(false); + setUpdate({ type: 'user', completed: '', planned: '', blockers: '' }); + setButtonDisable(true); + console.log(update); + }; + + const handleChange = (event: React.ChangeEvent) => { + setUpdate({ + ...update, + [event.target.name]: event.target.value, + }); + }; + return ( - <> - - -
-
-
-

- You have - - 2 missed - - Standup updates this week -

-

Let's try to avoid having zero days

-
- - -
-
-
-

Standup Update

-
-
- - -
-
- - -
-
- - -
- -
-
-
+ + + {!isAuthenticating && isLoggedIn ? ( + isLoading ? ( +

Loading...

+ ) : ( + + ) + ) : ( +
+

You are not Authorized

+ + Click here to Login +
- - + )} + ); }; diff --git a/src/utils/FormatDate.js b/src/utils/FormatDate.js new file mode 100644 index 000000000..13acb07ae --- /dev/null +++ b/src/utils/FormatDate.js @@ -0,0 +1,23 @@ +export function FormatDate() { + const months = { + 0: 'January', + 1: 'February', + 2: 'March', + 3: 'April', + 4: 'May', + 5: 'June', + 6: 'July', + 7: 'August', + 8: 'September', + 9: 'October', + 10: 'November', + 11: 'December', + }; + const date = new Date(); + const currentMonth = months[Number(date.getMonth())]; + const yesterday = date.getDate() - 1; + const currentYear = date.getFullYear(); + const yesterDayDate = `${currentMonth} ${yesterday}, ${currentYear}`; + + return yesterDayDate; +} diff --git a/tsconfig.json b/tsconfig.json index 95f7795a1..1246f21b0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,7 +28,7 @@ "src/**/*.ts", "src/**/*.tsx", "__tests__/**/*.tsx" -, "__mocks__/styleMock.ts", "server.ts" ], +, "__mocks__/styleMock.ts", "server.ts", "src/utils/FormatDate.js" ], "exclude": ["node_modules"], "types": ["node", "jest", "@testing-library/jest-dom"] } From 63f7f568c4c6fe064f01ef8609468260c6053157 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Fri, 28 Apr 2023 20:45:30 +0530 Subject: [PATCH 11/79] modified UI design only --- src/components/standup/standupContainer.module.scss | 3 +++ src/pages/standup.tsx | 8 ++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/standup/standupContainer.module.scss b/src/components/standup/standupContainer.module.scss index 9c16a9673..4554f14c5 100644 --- a/src/components/standup/standupContainer.module.scss +++ b/src/components/standup/standupContainer.module.scss @@ -149,6 +149,9 @@ $radius: 8px; .blockerUpdate label { font-size: 1rem; } + .inputFlield { + padding: 3px; + } .submitButton { width: 150px; diff --git a/src/pages/standup.tsx b/src/pages/standup.tsx index 574989e7e..5d60c3535 100644 --- a/src/pages/standup.tsx +++ b/src/pages/standup.tsx @@ -4,10 +4,11 @@ import Layout from '@/components/Layout'; import { addStandup } from '@/interfaces/standup.type'; import { FormatDate } from '@/utils/FormatDate'; -import { LOGIN_URL } from '@/components/constants/url'; +import { LOGIN_URL } from '@/constants/url'; import useAuthenticated from '@/hooks/useAuthenticated'; import StandUpContainer from '@/components/standup'; -import { useAppContext } from '@/context'; +import { useGetUserQuery } from '@/app/services/userApi'; +import { skipToken } from '@reduxjs/toolkit/dist/query'; const StandUp: FC = () => { const [update, setUpdate] = useState({ @@ -20,8 +21,7 @@ const StandUp: FC = () => { const { isLoggedIn, isLoading } = useAuthenticated(); - const { state } = useAppContext(); - const { isLoading: isAuthenticating } = state; + const { isLoading: isAuthenticating } = useGetUserQuery(skipToken); const yesterdayDate = FormatDate(); From b94c266e69d087da60b55bd7807d095d5511f97d Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar <82165483+Pratiyushkumar@users.noreply.github.com> Date: Tue, 2 May 2023 12:15:28 +0530 Subject: [PATCH 12/79] Delete url.ts --- src/constants/url.ts | 27 --------------------------- 1 file changed, 27 deletions(-) delete mode 100644 src/constants/url.ts diff --git a/src/constants/url.ts b/src/constants/url.ts deleted file mode 100644 index 260006397..000000000 --- a/src/constants/url.ts +++ /dev/null @@ -1,27 +0,0 @@ -export const BASE_URL = `${process.env.NEXT_PUBLIC_BASE_URL}`; -export const SUBSCRIBE_TO_CHALLENGE_URL = `${BASE_URL}/challenges/subscribe`; -export const MINE_TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tasks/self`; -export const USER_PROFILE_URL = 'https://dev.realdevsquad.com/profile'; -export const HOME_URL = 'https://realdevsquad.com'; -export const WELCOME_URL = 'https://welcome.realdevsquad.com'; -export const EVENTS_URL = 'https://www.realdevsquad.com/events.html'; -export const CRYPTO_URL = 'https://crypto.realdevsquad.com'; -export const STATUS_URL = 'https://status.realdevsquad.com'; -export const LOGIN_URL = `https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97&state=${STATUS_URL}`; -export const MEMBERS_URL = 'https://members.realdevsquad.com'; -export const CHALLENGES_URL = `${BASE_URL}/challenges`; -export const USER_SELF = `${BASE_URL}/users/self`; -export const DEFAULT_AVATAR = '/Avatar.png'; -export const RDS_LOGO = '/RDSLogo.png'; -export const GITHUB_LOGO = '/github-white.png'; -export const SIGNUP_LINK = 'https://my.realdevsquad.com/signup'; -export const LOGOUT_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/auth/signout`; -export const IDLE_USERS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/users/status?state=IDLE`; -export const ITEM_BY_FILTER_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/items/filter`; -export const ITEMS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/items`; -export const ALL_TAGS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tags`; -export const ALL_LEVELS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/levels`; -export const ITEM_TYPES = { task: 'TASK' }; -export const TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tasks`; -export const ISSUES_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/issues`; -export const USERS_URL = `${BASE_URL}/users`; From c80e1897810239e06e0e719e7c3c6a8c8786dd95 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 17 May 2023 16:31:06 +0530 Subject: [PATCH 13/79] updating the code as per the review comments --- src/app/services/api.ts | 11 ++- src/components/Layout/index.tsx | 6 +- src/components/standup/index.tsx | 10 +-- .../standup/standupContainer.module.scss | 51 +++++------- src/constants/url.ts | 27 +++++++ src/interfaces/standup.type.ts | 2 +- src/pages/standup/index.tsx | 79 +++++++++++++++++++ src/styles/index.scss | 4 +- src/utils/FormatDate.js | 23 ------ src/utils/FormatDate.ts | 11 +++ tsconfig.json | 2 +- 11 files changed, 161 insertions(+), 65 deletions(-) create mode 100644 src/constants/url.ts create mode 100644 src/pages/standup/index.tsx delete mode 100644 src/utils/FormatDate.js create mode 100644 src/utils/FormatDate.ts diff --git a/src/app/services/api.ts b/src/app/services/api.ts index 15e32146c..7ef08e861 100644 --- a/src/app/services/api.ts +++ b/src/app/services/api.ts @@ -12,7 +12,16 @@ export const api = createApi({ * Tag types must be defined in the original API definition * for any tags that would be provided by injected endpoints */ - tagTypes: ['Users', 'Status', 'Tasks', 'TaskTag', 'User', 'Tags', 'Levels','STANDUP'], + tagTypes: [ + 'Users', + 'Status', + 'Tasks', + 'TaskTag', + 'User', + 'Tags', + 'Levels', + 'STANDUP', + ], /** * This api has endpoints injected in adjacent files, * which is why no endpoints are shown below. diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index ccb635acd..97c9deb4c 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -45,14 +45,14 @@ const Layout: FC = ({ children }) => { '/mine', router.pathname === '/mine' )} - {/* TODO: Uncomment when DS(Chanllenges) is ready */} - {/* | + | {navBarContent( 'Standup', '/standup', router.pathname === '/standup' )} - | + {/* TODO: Uncomment when DS(Chanllenges) is ready */} + {/* | {navBarContent( 'DS', '/challenges', diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index 2b02a8f39..ff2cf4fc0 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import { FC } from 'react'; import styles from '@/components/standup/standupContainer.module.scss'; import { Standup } from '@/interfaces/standup.type'; @@ -14,8 +14,8 @@ const StandUpContainer: FC = ({ }: Standup) => { return ( <> -
-
+
+

You have @@ -99,8 +99,8 @@ const StandUpContainer: FC = ({

-
-
+
+ ); }; diff --git a/src/components/standup/standupContainer.module.scss b/src/components/standup/standupContainer.module.scss index 4554f14c5..bbab45c27 100644 --- a/src/components/standup/standupContainer.module.scss +++ b/src/components/standup/standupContainer.module.scss @@ -7,12 +7,12 @@ $theme-CeriseRed: #d61f69; $theme-PaleSky: #6b7280; $theme-Mischka: #d1d5db; $theme-AthensGray: #e5e7eb; -$radius: 8px; +$radius: 0.5rem; .standupContainer { display: flex; flex-direction: column; - margin-top: 30px; + margin-top: 1.875rem; width: 100%; align-items: center; justify-content: center; @@ -23,29 +23,29 @@ $radius: 8px; width: 83.6875%; height: 12%; color: $theme-white; - padding: 24px 0 24px 49px; + padding: 1.5rem 0 1.5rem 3.0625rem; border-radius: $radius; } .standupBanner p { font-family: 'Poppins', sans-serif; - font-size: 20px; + font-size: 1.25rem; font-weight: 600; } .standupBanner p span { color: $theme-FrenchRose; text-decoration: underline; - margin: 0 4px; + margin: 0 0.25rem; } .standupUpdateContainer { width: 50.63625%; - margin-top: 50px; + margin-top: 3.125rem; } .standupForm { - margin-top: 35px; + margin-top: 2.1875rem; } .standupUpdateContainer h1 { @@ -57,7 +57,7 @@ $radius: 8px; .yesterdayUpdate, .todayUpdate, .blockerUpdate { - margin-bottom: 20px; + margin-bottom: 1.25rem; } .yesterdayUpdate label, @@ -65,8 +65,8 @@ $radius: 8px; .blockerUpdate label { color: $theme-PaleSky; font-size: 1.4rem; - margin-top: 40px; - margin-bottom: 10px; + margin-top: 2.5rem; + margin-bottom: 0.625rem; font-family: 'Inter', sans-serif; } @@ -78,10 +78,10 @@ $radius: 8px; background: $theme-white; padding: 1rem; font-weight: 400; - font-size: 14px; + font-size: 0.875rem; line-height: 150%; font-family: 'Inter', sans-serif; - margin-top: 13px; + margin-top: 0.8125rem; } .inputFlield:focus { @@ -90,12 +90,12 @@ $radius: 8px; } .submitButton { - width: 209px; - height: 52px; - margin-top: 45px; + width: 13.0625rem; + height: 3.25rem; + margin-top: 2.8125rem; border-radius: $radius; font-weight: 400; - font-size: 14px; + font-size: 0.875rem; line-height: 150%; font-family: 'Inter', sans-serif; border: none; @@ -126,18 +126,18 @@ $radius: 8px; @media (max-width: 600px) { .standupBanner { width: 100%; - padding: 16px 0 8px 4px; + padding: 1rem 0 0.5rem 0.25rem; text-align: center; } .standupBanner p { - font-size: 16px; + font-size: 1rem; word-wrap: break-word; } .standupUpdateContainer { width: 100%; - margin-top: 4px; + margin-top: 0.25rem; } .standupUpdateContainer h1 { @@ -149,18 +149,9 @@ $radius: 8px; .blockerUpdate label { font-size: 1rem; } - .inputFlield { - padding: 3px; - } .submitButton { - width: 150px; - height: 40px; - } -} - -@media (max-width: 375px) { - .standupUpdateContainer { - width: 100%; + width: 9.375rem; + height: 2.5rem; } } diff --git a/src/constants/url.ts b/src/constants/url.ts new file mode 100644 index 000000000..c04b98f2a --- /dev/null +++ b/src/constants/url.ts @@ -0,0 +1,27 @@ +export const BASE_URL = `${process.env.NEXT_PUBLIC_BASE_URL}`; +export const SUBSCRIBE_TO_CHALLENGE_URL = `${BASE_URL}/challenges/subscribe`; +export const MINE_TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tasks/self`; +export const USER_PROFILE_URL = 'https://my.realdevsquad.com/profile'; +export const HOME_URL = 'https://realdevsquad.com'; +export const WELCOME_URL = 'https://welcome.realdevsquad.com'; +export const EVENTS_URL = 'https://www.realdevsquad.com/events.html'; +export const CRYPTO_URL = 'https://crypto.realdevsquad.com'; +export const STATUS_URL = 'https://status.realdevsquad.com'; +export const LOGIN_URL = `https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97&state=${STATUS_URL}`; +export const MEMBERS_URL = 'https://members.realdevsquad.com'; +export const CHALLENGES_URL = `${BASE_URL}/challenges`; +export const USER_SELF = `${BASE_URL}/users/self`; +export const DEFAULT_AVATAR = '/Avatar.png'; +export const RDS_LOGO = '/RDSLogo.png'; +export const GITHUB_LOGO = '/github-white.png'; +export const SIGNUP_LINK = 'https://my.realdevsquad.com/signup'; +export const LOGOUT_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/auth/signout`; +export const IDLE_USERS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/users/status?state=IDLE`; +export const ITEM_BY_FILTER_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/items/filter`; +export const ITEMS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/items`; +export const ALL_TAGS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tags`; +export const ALL_LEVELS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/levels`; +export const ITEM_TYPES = { task: 'TASK' }; +export const TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tasks`; +export const ISSUES_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/issues`; +export const USERS_URL = `${BASE_URL}/users`; diff --git a/src/interfaces/standup.type.ts b/src/interfaces/standup.type.ts index b1dbaa62f..6c846f42a 100644 --- a/src/interfaces/standup.type.ts +++ b/src/interfaces/standup.type.ts @@ -1,4 +1,4 @@ -export type addStandup = { +export type standupUpdateType = { type: string; completed: string; planned: string; diff --git a/src/pages/standup/index.tsx b/src/pages/standup/index.tsx new file mode 100644 index 000000000..88a17e2a6 --- /dev/null +++ b/src/pages/standup/index.tsx @@ -0,0 +1,79 @@ +import { FC, useState } from 'react'; +import Head from '@/components/head'; +import Layout from '@/components/Layout'; + +import { standupUpdateType } from '@/interfaces/standup.type'; +import { FormatDate } from '@/utils/FormatDate'; +import { LOGIN_URL } from '@/constants/url'; +import useAuthenticated from '@/hooks/useAuthenticated'; +import StandUpContainer from '@/components/standup'; +import { useGetUserQuery } from '@/app/services/userApi'; +import { skipToken } from '@reduxjs/toolkit/dist/query'; + +const StandUp: FC = () => { + const [standupUpdate, setStandupUpdate] = useState({ + type: 'user', + completed: '', + planned: '', + blockers: '', + }); + const [buttonDisable, setButtonDisable] = useState(true); + + const { isLoggedIn, isLoading } = useAuthenticated(); + + const { isLoading: isAuthenticating } = useGetUserQuery(skipToken); + + // here FormatDate() is a function that is defined inside the util folder and + // is used to calculate currentDate - 1 which returns the date as May 16, 2023 + // which is getting stored in the yesterdayDate variable + const yesterdayDate = FormatDate(); + + const handleFormSubmission = (event: React.FormEvent) => { + event.preventDefault(); + setButtonDisable(false); + setStandupUpdate({ + type: 'user', + completed: '', + planned: '', + blockers: '', + }); + console.log(standupUpdate); + }; + + const handleChange = (event: React.ChangeEvent) => { + setStandupUpdate({ + ...standupUpdate, + [event.target.name]: event.target.value, + }); + }; + + return ( + + + {!isAuthenticating && isLoggedIn ? ( + isLoading ? ( +

Loading...

+ ) : ( + + ) + ) : ( +
+

You are not Authorized

+ + Click here to Login + +
+ )} + + ); +}; + +export default StandUp; diff --git a/src/styles/index.scss b/src/styles/index.scss index 02171fa6e..c4b6da35e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,6 +1,8 @@ +$theme-backgroundColor: #f5f5f5; + body { margin: 0 auto; - background-color: #f5f5f5; + background-color: $theme-backgroundColor; } html { diff --git a/src/utils/FormatDate.js b/src/utils/FormatDate.js deleted file mode 100644 index 13acb07ae..000000000 --- a/src/utils/FormatDate.js +++ /dev/null @@ -1,23 +0,0 @@ -export function FormatDate() { - const months = { - 0: 'January', - 1: 'February', - 2: 'March', - 3: 'April', - 4: 'May', - 5: 'June', - 6: 'July', - 7: 'August', - 8: 'September', - 9: 'October', - 10: 'November', - 11: 'December', - }; - const date = new Date(); - const currentMonth = months[Number(date.getMonth())]; - const yesterday = date.getDate() - 1; - const currentYear = date.getFullYear(); - const yesterDayDate = `${currentMonth} ${yesterday}, ${currentYear}`; - - return yesterDayDate; -} diff --git a/src/utils/FormatDate.ts b/src/utils/FormatDate.ts new file mode 100644 index 000000000..f7f21925a --- /dev/null +++ b/src/utils/FormatDate.ts @@ -0,0 +1,11 @@ +import { month } from '@/constants/ProgressUpdates'; + +export function FormatDate(): string { + const date = new Date(); + const currentMonth = month[Number(date.getMonth())]; + const yesterday = date.getDate() - 1; + const currentYear = date.getFullYear(); + const yesterdayDate = `${currentMonth} ${yesterday}, ${currentYear}`; + + return yesterdayDate; +} diff --git a/tsconfig.json b/tsconfig.json index 1246f21b0..95f7795a1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,7 +28,7 @@ "src/**/*.ts", "src/**/*.tsx", "__tests__/**/*.tsx" -, "__mocks__/styleMock.ts", "server.ts", "src/utils/FormatDate.js" ], +, "__mocks__/styleMock.ts", "server.ts" ], "exclude": ["node_modules"], "types": ["node", "jest", "@testing-library/jest-dom"] } From 77f146699a56b757c71162eb1770fac09f3c5bb0 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 17 May 2023 16:41:35 +0530 Subject: [PATCH 14/79] fixed error --- src/pages/standup.tsx | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/pages/standup.tsx b/src/pages/standup.tsx index 5d60c3535..3eef9aecb 100644 --- a/src/pages/standup.tsx +++ b/src/pages/standup.tsx @@ -2,7 +2,7 @@ import React, { FC, useState } from 'react'; import Head from '@/components/head'; import Layout from '@/components/Layout'; -import { addStandup } from '@/interfaces/standup.type'; +import { standupUpdateType } from '@/interfaces/standup.type'; import { FormatDate } from '@/utils/FormatDate'; import { LOGIN_URL } from '@/constants/url'; import useAuthenticated from '@/hooks/useAuthenticated'; @@ -11,7 +11,7 @@ import { useGetUserQuery } from '@/app/services/userApi'; import { skipToken } from '@reduxjs/toolkit/dist/query'; const StandUp: FC = () => { - const [update, setUpdate] = useState({ + const [standupUpdate, setStandupUpdate] = useState({ type: 'user', completed: '', planned: '', @@ -28,14 +28,19 @@ const StandUp: FC = () => { const handleFormSubmission = (event: React.FormEvent) => { event.preventDefault(); setButtonDisable(false); - setUpdate({ type: 'user', completed: '', planned: '', blockers: '' }); + setStandupUpdate({ + type: 'user', + completed: '', + planned: '', + blockers: '', + }); setButtonDisable(true); - console.log(update); + console.log(standupUpdate); }; const handleChange = (event: React.ChangeEvent) => { - setUpdate({ - ...update, + setStandupUpdate({ + ...standupUpdate, [event.target.name]: event.target.value, }); }; @@ -52,9 +57,9 @@ const StandUp: FC = () => { handleFormSubmission={handleFormSubmission} buttonDisable={buttonDisable} yesterdayDate={yesterdayDate} - completed={update.completed} - blockers={update.blockers} - planned={update.planned} + completed={standupUpdate.completed} + blockers={standupUpdate.blockers} + planned={standupUpdate.planned} /> ) ) : ( From 4d430fd372d7b13af8b4296152d0a658b104e5cd Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 17 May 2023 20:01:40 +0530 Subject: [PATCH 15/79] fixing the errors in the PR --- src/app/services/api.ts | 1 + tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/services/api.ts b/src/app/services/api.ts index 7ef08e861..1ff49aef6 100644 --- a/src/app/services/api.ts +++ b/src/app/services/api.ts @@ -21,6 +21,7 @@ export const api = createApi({ 'Tags', 'Levels', 'STANDUP', + 'Mine_Tasks', ], /** * This api has endpoints injected in adjacent files, diff --git a/tsconfig.json b/tsconfig.json index 1246f21b0..95f7795a1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,7 +28,7 @@ "src/**/*.ts", "src/**/*.tsx", "__tests__/**/*.tsx" -, "__mocks__/styleMock.ts", "server.ts", "src/utils/FormatDate.js" ], +, "__mocks__/styleMock.ts", "server.ts" ], "exclude": ["node_modules"], "types": ["node", "jest", "@testing-library/jest-dom"] } From ef1f4994aa30c8f6587e3d36f69dd28b015cd388 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 17 May 2023 20:07:45 +0530 Subject: [PATCH 16/79] deleting formatDate.js --- src/utils/FormatDate.js | 23 ----------------------- 1 file changed, 23 deletions(-) delete mode 100644 src/utils/FormatDate.js diff --git a/src/utils/FormatDate.js b/src/utils/FormatDate.js deleted file mode 100644 index 13acb07ae..000000000 --- a/src/utils/FormatDate.js +++ /dev/null @@ -1,23 +0,0 @@ -export function FormatDate() { - const months = { - 0: 'January', - 1: 'February', - 2: 'March', - 3: 'April', - 4: 'May', - 5: 'June', - 6: 'July', - 7: 'August', - 8: 'September', - 9: 'October', - 10: 'November', - 11: 'December', - }; - const date = new Date(); - const currentMonth = months[Number(date.getMonth())]; - const yesterday = date.getDate() - 1; - const currentYear = date.getFullYear(); - const yesterDayDate = `${currentMonth} ${yesterday}, ${currentYear}`; - - return yesterDayDate; -} From 6e207f3a5eab0893592b787756cb66fd6ecc3c02 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 17 May 2023 21:05:45 +0530 Subject: [PATCH 17/79] fixed the api.ts file and standup.ts file --- src/app/services/api.ts | 2 +- src/app/services/standup.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/services/api.ts b/src/app/services/api.ts index 1ff49aef6..76cf2ae26 100644 --- a/src/app/services/api.ts +++ b/src/app/services/api.ts @@ -20,7 +20,7 @@ export const api = createApi({ 'User', 'Tags', 'Levels', - 'STANDUP', + 'Standup', 'Mine_Tasks', ], /** diff --git a/src/app/services/standup.ts b/src/app/services/standup.ts index 119c0f760..aca5bf1e7 100644 --- a/src/app/services/standup.ts +++ b/src/app/services/standup.ts @@ -1,15 +1,15 @@ -import { addStandup } from '@/interfaces/standup.type'; +import { standupUpdateType } from '@/interfaces/standup.type'; import { api } from './api'; export const standupApi = api.injectEndpoints({ endpoints: (build) => ({ - addStandUp: build.mutation({ + addStandUp: build.mutation({ query: (standupUpdate) => ({ url: '/progress', method: 'POST', body: standupUpdate, }), - invalidatesTags: ['STANDUP'], + invalidatesTags: ['Standup'], }), }), }); From 33c86ecfe2ea9056c323c99f8ce6ba4d01a33b5d Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 17 May 2023 21:25:49 +0530 Subject: [PATCH 18/79] addded comments and also removed unwanted file --- src/pages/standup.tsx | 77 ------------------------------------- src/pages/standup/index.tsx | 4 ++ 2 files changed, 4 insertions(+), 77 deletions(-) delete mode 100644 src/pages/standup.tsx diff --git a/src/pages/standup.tsx b/src/pages/standup.tsx deleted file mode 100644 index 3eef9aecb..000000000 --- a/src/pages/standup.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React, { FC, useState } from 'react'; -import Head from '@/components/head'; -import Layout from '@/components/Layout'; - -import { standupUpdateType } from '@/interfaces/standup.type'; -import { FormatDate } from '@/utils/FormatDate'; -import { LOGIN_URL } from '@/constants/url'; -import useAuthenticated from '@/hooks/useAuthenticated'; -import StandUpContainer from '@/components/standup'; -import { useGetUserQuery } from '@/app/services/userApi'; -import { skipToken } from '@reduxjs/toolkit/dist/query'; - -const StandUp: FC = () => { - const [standupUpdate, setStandupUpdate] = useState({ - type: 'user', - completed: '', - planned: '', - blockers: '', - }); - const [buttonDisable, setButtonDisable] = useState(true); - - const { isLoggedIn, isLoading } = useAuthenticated(); - - const { isLoading: isAuthenticating } = useGetUserQuery(skipToken); - - const yesterdayDate = FormatDate(); - - const handleFormSubmission = (event: React.FormEvent) => { - event.preventDefault(); - setButtonDisable(false); - setStandupUpdate({ - type: 'user', - completed: '', - planned: '', - blockers: '', - }); - setButtonDisable(true); - console.log(standupUpdate); - }; - - const handleChange = (event: React.ChangeEvent) => { - setStandupUpdate({ - ...standupUpdate, - [event.target.name]: event.target.value, - }); - }; - - return ( - - - {!isAuthenticating && isLoggedIn ? ( - isLoading ? ( -

Loading...

- ) : ( - - ) - ) : ( -
-

You are not Authorized

- - Click here to Login - -
- )} - - ); -}; - -export default StandUp; diff --git a/src/pages/standup/index.tsx b/src/pages/standup/index.tsx index 88a17e2a6..dbee84cb2 100644 --- a/src/pages/standup/index.tsx +++ b/src/pages/standup/index.tsx @@ -37,6 +37,10 @@ const StandUp: FC = () => { planned: '', blockers: '', }); + //needed to set the button disabled=true so that it + // is clickable for the next time on the same day if user has + // to submit it + setButtonDisable(true); console.log(standupUpdate); }; From 47cda6a4e637c7f3fb0f00c53e76fb150d9f68d1 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Sat, 20 May 2023 20:55:26 +0530 Subject: [PATCH 19/79] fixed the suggested changes in PR --- .../Unit/Components/standup/standup.test.tsx | 10 +-- src/components/standup/FormInputComponent.tsx | 29 ++++++++ src/components/standup/index.tsx | 70 +++++++------------ .../standup/standupContainer.module.scss | 31 ++++---- src/interfaces/standup.type.ts | 13 +++- src/pages/standup/index.tsx | 62 ++++++++-------- src/utils/FormatDate.ts | 11 --- src/utils/getYesterdayDate.ts | 29 ++++++++ 8 files changed, 146 insertions(+), 109 deletions(-) create mode 100644 src/components/standup/FormInputComponent.tsx delete mode 100644 src/utils/FormatDate.ts create mode 100644 src/utils/getYesterdayDate.ts diff --git a/__tests__/Unit/Components/standup/standup.test.tsx b/__tests__/Unit/Components/standup/standup.test.tsx index 6cd93fcb9..124fb1177 100644 --- a/__tests__/Unit/Components/standup/standup.test.tsx +++ b/__tests__/Unit/Components/standup/standup.test.tsx @@ -1,7 +1,7 @@ import StandUpContainer from '@/components/standup'; import { render, screen } from '@testing-library/react'; -const DEFAULT_Props = { +const defaultProps = { handleChange: jest.fn(), handleFormSubmission: jest.fn(), buttonDisable: false, @@ -13,21 +13,21 @@ const DEFAULT_Props = { describe('Standup', () => { test('renders the missed updates of the user', () => { - render(); + render(); expect(screen.getByTestId('missed-updates')).toBeInTheDocument(); }); test('renders the yesterday Update Input', () => { - render(); + render(); expect( screen.queryByTestId('yesterday-input-update') ).toBeInTheDocument(); }); test('renders the Today Update Input', () => { - render(); + render(); expect(screen.queryByTestId('today-input-update')).toBeInTheDocument(); }); test('renders the blocker Input', () => { - render(); + render(); expect( screen.queryByTestId('blocker-input-update') ).toBeInTheDocument(); diff --git a/src/components/standup/FormInputComponent.tsx b/src/components/standup/FormInputComponent.tsx new file mode 100644 index 000000000..4da5cfaa3 --- /dev/null +++ b/src/components/standup/FormInputComponent.tsx @@ -0,0 +1,29 @@ +import { FC } from 'react'; + +import styles from '@/components/standup/standupContainer.module.scss'; +import { InputProps } from '@/interfaces/standup.type'; + +const FormInputComponent: FC = ({ + placeholder, + name, + value, + dataTestId, + handleChange, +}) => { + return ( + ) => + handleChange(e) + } + /> + ); +}; + +export default FormInputComponent; diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index ff2cf4fc0..32320933b 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -2,6 +2,7 @@ import { FC } from 'react'; import styles from '@/components/standup/standupContainer.module.scss'; import { Standup } from '@/interfaces/standup.type'; +import FormInputComponent from './FormInputComponent'; const StandUpContainer: FC = ({ handleFormSubmission, @@ -12,19 +13,23 @@ const StandUpContainer: FC = ({ planned, blockers, }: Standup) => { + const buttonStyleClass = buttonDisable + ? `${styles.nonActiveButton}` + : `${styles.activeButton}`; + return ( <> -
-
-
+
+
+

You have 2 missed Standup updates this week

Let's try to avoid having zero days

-
-
+
+

Standup Update

= ({ handleFormSubmission(e) } > -
+
- - ) => handleChange(e)} + handleChange={handleChange} /> -
-
- - ) => handleChange(e)} + handleChange={handleChange} /> -
-
+ - - ) => handleChange(e)} + handleChange={handleChange} /> -
+
- -
-
+
+ + ); }; diff --git a/src/components/standup/standupContainer.module.scss b/src/components/standup/standupContainer.module.scss index bbab45c27..bbb680b8a 100644 --- a/src/components/standup/standupContainer.module.scss +++ b/src/components/standup/standupContainer.module.scss @@ -20,7 +20,7 @@ $radius: 0.5rem; .standupBanner { background-color: $theme-Biscay; - width: 83.6875%; + width: 83.7%; height: 12%; color: $theme-white; padding: 1.5rem 0 1.5rem 3.0625rem; @@ -40,7 +40,7 @@ $radius: 0.5rem; } .standupUpdateContainer { - width: 50.63625%; + width: 50.7%; margin-top: 3.125rem; } @@ -52,25 +52,21 @@ $radius: 0.5rem; color: $theme-FunBlue; font-family: 'Inter', sans-serif; font-size: 2.2rem; + padding-left: 1rem; } -.yesterdayUpdate, -.todayUpdate, -.blockerUpdate { +.formFields { margin-bottom: 1.25rem; + border: none; } -.yesterdayUpdate label, -.todayUpdate label, -.blockerUpdate label { +.updateHeading { color: $theme-PaleSky; font-size: 1.4rem; - margin-top: 2.5rem; - margin-bottom: 0.625rem; font-family: 'Inter', sans-serif; } -.inputFlield { +.inputField { height: 58px; width: 100%; border-radius: $radius; @@ -81,10 +77,11 @@ $radius: 0.5rem; font-size: 0.875rem; line-height: 150%; font-family: 'Inter', sans-serif; - margin-top: 0.8125rem; + margin-top: 0.8rem; + margin-bottom: 2.5rem; } -.inputFlield:focus { +.inputField:focus { border: 1px solid $theme-CornFlowerBlue; outline: none; } @@ -92,7 +89,6 @@ $radius: 0.5rem; .submitButton { width: 13.0625rem; height: 3.25rem; - margin-top: 2.8125rem; border-radius: $radius; font-weight: 400; font-size: 0.875rem; @@ -101,6 +97,7 @@ $radius: 0.5rem; border: none; cursor: pointer; letter-spacing: 0.9px; + margin-left: 1rem; } .submitButton:active { @@ -119,7 +116,7 @@ $radius: 0.5rem; @media (max-width: 946px) { .standupUpdateContainer { - width: 76.63625%; + width: 76.7%; } } @@ -144,9 +141,7 @@ $radius: 0.5rem; font-size: 1.6rem; } - .yesterdayUpdate label, - .todayUpdate label, - .blockerUpdate label { + .updateHeading { font-size: 1rem; } diff --git a/src/interfaces/standup.type.ts b/src/interfaces/standup.type.ts index 6c846f42a..cb990a81c 100644 --- a/src/interfaces/standup.type.ts +++ b/src/interfaces/standup.type.ts @@ -5,7 +5,7 @@ export type standupUpdateType = { blockers: string; }; -export interface Standup { +export type Standup = { handleFormSubmission: (e: React.FormEvent) => void; handleChange: (e: React.ChangeEvent) => void; yesterdayDate: string; @@ -13,4 +13,13 @@ export interface Standup { completed: string; planned: string; blockers: string; -} +}; + +export type InputProps = { + // id: string; + placeholder: string; + name: string; + value: string; + dataTestId: string; + handleChange: (e: React.ChangeEvent) => void; +}; diff --git a/src/pages/standup/index.tsx b/src/pages/standup/index.tsx index dbee84cb2..278e8a898 100644 --- a/src/pages/standup/index.tsx +++ b/src/pages/standup/index.tsx @@ -1,9 +1,9 @@ -import { FC, useState } from 'react'; +import { FC, useState, memo, useEffect } from 'react'; import Head from '@/components/head'; import Layout from '@/components/Layout'; import { standupUpdateType } from '@/interfaces/standup.type'; -import { FormatDate } from '@/utils/FormatDate'; +import { getYesterdayDate } from '@/utils/getYesterdayDate'; import { LOGIN_URL } from '@/constants/url'; import useAuthenticated from '@/hooks/useAuthenticated'; import StandUpContainer from '@/components/standup'; @@ -23,10 +23,7 @@ const StandUp: FC = () => { const { isLoading: isAuthenticating } = useGetUserQuery(skipToken); - // here FormatDate() is a function that is defined inside the util folder and - // is used to calculate currentDate - 1 which returns the date as May 16, 2023 - // which is getting stored in the yesterdayDate variable - const yesterdayDate = FormatDate(); + const yesterdayDate = getYesterdayDate(); const handleFormSubmission = (event: React.FormEvent) => { event.preventDefault(); @@ -39,11 +36,39 @@ const StandUp: FC = () => { }); //needed to set the button disabled=true so that it // is clickable for the next time on the same day if user has - // to submit it + // to submit it after the form is filled and submitted + // setButtonDisable(!buttonDisable); setButtonDisable(true); console.log(standupUpdate); }; + const handleConditionalRendering = () => { + if (!isAuthenticating && isLoggedIn) { + if (isLoading) { + return

Loading...

; + } else { + return ( + + ); + } + } else { +
+

You are not Authorized

+ + Click here to Login + +
; + } + }; + const handleChange = (event: React.ChangeEvent) => { setStandupUpdate({ ...standupUpdate, @@ -54,28 +79,7 @@ const StandUp: FC = () => { return ( - {!isAuthenticating && isLoggedIn ? ( - isLoading ? ( -

Loading...

- ) : ( - - ) - ) : ( -
-

You are not Authorized

- - Click here to Login - -
- )} + {handleConditionalRendering()} ); }; diff --git a/src/utils/FormatDate.ts b/src/utils/FormatDate.ts deleted file mode 100644 index f7f21925a..000000000 --- a/src/utils/FormatDate.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { month } from '@/constants/ProgressUpdates'; - -export function FormatDate(): string { - const date = new Date(); - const currentMonth = month[Number(date.getMonth())]; - const yesterday = date.getDate() - 1; - const currentYear = date.getFullYear(); - const yesterdayDate = `${currentMonth} ${yesterday}, ${currentYear}`; - - return yesterdayDate; -} diff --git a/src/utils/getYesterdayDate.ts b/src/utils/getYesterdayDate.ts new file mode 100644 index 000000000..2e0e3c5e4 --- /dev/null +++ b/src/utils/getYesterdayDate.ts @@ -0,0 +1,29 @@ +import { month } from '@/constants/ProgressUpdates'; + +export function getYesterdayDate(): string { + const date = new Date(); + const currentDay = date.getDate(); + const currentMonth = month[Number(date.getMonth())]; + const currentYear = date.getFullYear(); + + let yesterdayDay = currentDay - 1; + let yesterdayMonth = currentMonth; + let yesterdayYear = currentYear; + + if (yesterdayDay === 0) { + const lastDayOfPreviousMonth = new Date( + currentYear, + date.getMonth(), + 0 + ).getDate(); + yesterdayMonth = month[Number(date.getMonth()) - 1]; + yesterdayDay = lastDayOfPreviousMonth; + } + + if (yesterdayDay === 31 && yesterdayMonth === 'December') { + yesterdayYear = currentYear - 1; + } + const yesterdayDate = `${yesterdayMonth} ${yesterdayDay}, ${yesterdayYear}`; + + return yesterdayDate; +} From 8305d200f6a67643f7c8a2cda2de2f39d0c7099f Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Mon, 22 May 2023 20:05:42 +0530 Subject: [PATCH 20/79] PR review comments fixed --- .../Unit/Components/standup/standup.test.tsx | 18 ++--- src/components/Layout/index.tsx | 55 +++------------ src/components/standup/index.tsx | 68 ++++++++++++++----- src/constants/navbar-Content.ts | 39 +++++++++++ src/interfaces/standup.type.ts | 18 ++--- src/pages/standup/index.tsx | 50 +------------- 6 files changed, 115 insertions(+), 133 deletions(-) create mode 100644 src/constants/navbar-Content.ts diff --git a/__tests__/Unit/Components/standup/standup.test.tsx b/__tests__/Unit/Components/standup/standup.test.tsx index 124fb1177..615e56079 100644 --- a/__tests__/Unit/Components/standup/standup.test.tsx +++ b/__tests__/Unit/Components/standup/standup.test.tsx @@ -1,33 +1,23 @@ import StandUpContainer from '@/components/standup'; import { render, screen } from '@testing-library/react'; -const defaultProps = { - handleChange: jest.fn(), - handleFormSubmission: jest.fn(), - buttonDisable: false, - yesterdayDate: 'May 5, 2023', - completed: 'Working on a backend Go project', - blockers: 'Implement error handling for API endpoints', - planned: 'Waiting for database access credentials', -}; - describe('Standup', () => { test('renders the missed updates of the user', () => { - render(); + render(); expect(screen.getByTestId('missed-updates')).toBeInTheDocument(); }); test('renders the yesterday Update Input', () => { - render(); + render(); expect( screen.queryByTestId('yesterday-input-update') ).toBeInTheDocument(); }); test('renders the Today Update Input', () => { - render(); + render(); expect(screen.queryByTestId('today-input-update')).toBeInTheDocument(); }); test('renders the blocker Input', () => { - render(); + render(); expect( screen.queryByTestId('blocker-input-update') ).toBeInTheDocument(); diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 97c9deb4c..a4e5c3aa0 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -1,9 +1,10 @@ -import { FC, ReactNode } from 'react'; +import React, { FC, ReactNode } 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 from '@/constants/navbar-Content'; interface Props { children?: ReactNode; @@ -33,49 +34,15 @@ const Layout: FC = ({ children }) => {
- {navBarContent('Tasks', '/', router.pathname === '/')}| - {navBarContent( - 'Issues', - '/issues', - router.pathname === '/issues' - )} - | - {navBarContent( - 'Mine', - '/mine', - router.pathname === '/mine' - )} - | - {navBarContent( - 'Standup', - '/standup', - router.pathname === '/standup' - )} - {/* 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' - )} + {navBarContentMock.map((element, index) => ( + + {navBarContent( + element.title, + element.refURL, + router.pathname === element.pathName + )} + + ))} {dev && ( <> | diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index 32320933b..21d76d316 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -1,22 +1,56 @@ -import { FC } from 'react'; +import { FC, useState, useEffect } from 'react'; -import styles from '@/components/standup/standupContainer.module.scss'; -import { Standup } from '@/interfaces/standup.type'; import FormInputComponent from './FormInputComponent'; +import { standupUpdateType } from '@/interfaces/standup.type'; +import { getYesterdayDate } from '@/utils/getYesterdayDate'; + +import styles from '@/components/standup/standupContainer.module.scss'; + +const StandUpContainer: FC = () => { + const [standupUpdate, setStandupUpdate] = useState({ + type: 'user', + completed: '', + planned: '', + blockers: '', + }); + + const [buttonDisable, setButtonDisable] = useState(true); + + const yesterdayDate = getYesterdayDate(); -const StandUpContainer: FC = ({ - handleFormSubmission, - handleChange, - yesterdayDate, - buttonDisable, - completed, - planned, - blockers, -}: Standup) => { const buttonStyleClass = buttonDisable ? `${styles.nonActiveButton}` : `${styles.activeButton}`; + const handleChange = (event: React.ChangeEvent) => { + setStandupUpdate((prevStandupUpdate) => ({ + ...prevStandupUpdate, + [event.target.name]: event.target.value, + })); + }; + const isVaidate = () => { + return ( + standupUpdate.completed !== '' && + standupUpdate.planned !== '' && + standupUpdate.blockers !== '' + ); + }; + useEffect(() => { + const isValid = isVaidate(); + setButtonDisable(!isValid); + }, [standupUpdate.completed, standupUpdate.planned]); + + const handleFormSubmission = (event: React.FormEvent) => { + event.preventDefault(); + setStandupUpdate({ + type: 'user', + completed: '', + planned: '', + blockers: '', + }); + console.log(standupUpdate); + }; + return ( <>
@@ -33,9 +67,7 @@ const StandUpContainer: FC = ({

Standup Update

) => - handleFormSubmission(e) - } + onSubmit={handleFormSubmission} >
diff --git a/src/constants/navbar-Content.ts b/src/constants/navbar-Content.ts new file mode 100644 index 000000000..dc0833f6e --- /dev/null +++ b/src/constants/navbar-Content.ts @@ -0,0 +1,39 @@ +const navBarContentMock = [ + { + title: 'Tasks', + refURL: '/', + pathName: '/', + }, + { + title: 'Issues', + refURL: '/issues', + pathName: '/issues', + }, + { + title: 'Mine', + refURL: '/mine', + pathName: '/mine', + }, + { + title: 'Standup', + refURL: '/standup', + pathName: '/standup', + }, + { + title: 'Open PRs', + refURL: '/openPRs', + pathName: '/openPRs', + }, + { + title: 'Stale PRs', + refURL: '/stale-pr', + pathName: '/stale-pr', + }, + { + title: 'Idle Users', + refURL: '/idle-users', + pathName: '/idle-users', + }, +]; + +export default navBarContentMock; diff --git a/src/interfaces/standup.type.ts b/src/interfaces/standup.type.ts index cb990a81c..3c35477b4 100644 --- a/src/interfaces/standup.type.ts +++ b/src/interfaces/standup.type.ts @@ -5,15 +5,15 @@ export type standupUpdateType = { blockers: string; }; -export type Standup = { - handleFormSubmission: (e: React.FormEvent) => void; - handleChange: (e: React.ChangeEvent) => void; - yesterdayDate: string; - buttonDisable: boolean; - completed: string; - planned: string; - blockers: string; -}; +// export type Standup = { +// handleFormSubmission: (e: React.FormEvent) => void; +// handleChange: (e: React.ChangeEvent) => void; +// yesterdayDate: string; +// buttonDisable: boolean; +// completed: string; +// planned: string; +// blockers: string; +// }; export type InputProps = { // id: string; diff --git a/src/pages/standup/index.tsx b/src/pages/standup/index.tsx index 278e8a898..2b5fe2896 100644 --- a/src/pages/standup/index.tsx +++ b/src/pages/standup/index.tsx @@ -1,9 +1,7 @@ -import { FC, useState, memo, useEffect } from 'react'; +import { FC } from 'react'; import Head from '@/components/head'; import Layout from '@/components/Layout'; -import { standupUpdateType } from '@/interfaces/standup.type'; -import { getYesterdayDate } from '@/utils/getYesterdayDate'; import { LOGIN_URL } from '@/constants/url'; import useAuthenticated from '@/hooks/useAuthenticated'; import StandUpContainer from '@/components/standup'; @@ -11,53 +9,16 @@ import { useGetUserQuery } from '@/app/services/userApi'; import { skipToken } from '@reduxjs/toolkit/dist/query'; const StandUp: FC = () => { - const [standupUpdate, setStandupUpdate] = useState({ - type: 'user', - completed: '', - planned: '', - blockers: '', - }); - const [buttonDisable, setButtonDisable] = useState(true); - const { isLoggedIn, isLoading } = useAuthenticated(); const { isLoading: isAuthenticating } = useGetUserQuery(skipToken); - const yesterdayDate = getYesterdayDate(); - - const handleFormSubmission = (event: React.FormEvent) => { - event.preventDefault(); - setButtonDisable(false); - setStandupUpdate({ - type: 'user', - completed: '', - planned: '', - blockers: '', - }); - //needed to set the button disabled=true so that it - // is clickable for the next time on the same day if user has - // to submit it after the form is filled and submitted - // setButtonDisable(!buttonDisable); - setButtonDisable(true); - console.log(standupUpdate); - }; - const handleConditionalRendering = () => { if (!isAuthenticating && isLoggedIn) { if (isLoading) { return

Loading...

; } else { - return ( - - ); + return ; } } else {
@@ -69,13 +30,6 @@ const StandUp: FC = () => { } }; - const handleChange = (event: React.ChangeEvent) => { - setStandupUpdate({ - ...standupUpdate, - [event.target.name]: event.target.value, - }); - }; - return ( From dd8a827040babcc0dcbe471ece971e05a0f26af4 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Mon, 22 May 2023 20:09:00 +0530 Subject: [PATCH 21/79] comments removed from standup.type file --- src/interfaces/standup.type.ts | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/interfaces/standup.type.ts b/src/interfaces/standup.type.ts index 3c35477b4..1a5232468 100644 --- a/src/interfaces/standup.type.ts +++ b/src/interfaces/standup.type.ts @@ -5,16 +5,6 @@ export type standupUpdateType = { blockers: string; }; -// export type Standup = { -// handleFormSubmission: (e: React.FormEvent) => void; -// handleChange: (e: React.ChangeEvent) => void; -// yesterdayDate: string; -// buttonDisable: boolean; -// completed: string; -// planned: string; -// blockers: string; -// }; - export type InputProps = { // id: string; placeholder: string; From 5f32fa8d07414ab51c160f0a455637025181af75 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Tue, 23 May 2023 03:12:42 +0530 Subject: [PATCH 22/79] adding memo and useEffect dependency --- src/components/standup/FormInputComponent.tsx | 4 ++-- src/components/standup/index.tsx | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/standup/FormInputComponent.tsx b/src/components/standup/FormInputComponent.tsx index 4da5cfaa3..a274394e9 100644 --- a/src/components/standup/FormInputComponent.tsx +++ b/src/components/standup/FormInputComponent.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import React, { FC } from 'react'; import styles from '@/components/standup/standupContainer.module.scss'; import { InputProps } from '@/interfaces/standup.type'; @@ -26,4 +26,4 @@ const FormInputComponent: FC = ({ ); }; -export default FormInputComponent; +export default React.memo(FormInputComponent); diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index 21d76d316..9e27ad84e 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -38,7 +38,11 @@ const StandUpContainer: FC = () => { useEffect(() => { const isValid = isVaidate(); setButtonDisable(!isValid); - }, [standupUpdate.completed, standupUpdate.planned]); + }, [ + standupUpdate.completed, + standupUpdate.planned, + standupUpdate.blockers, + ]); const handleFormSubmission = (event: React.FormEvent) => { event.preventDefault(); From e532b6bc69e16017cc68d40907714ffef814e14a Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 24 May 2023 18:18:29 +0530 Subject: [PATCH 23/79] changes fixed as per PR review comments --- src/app/services/standup.ts | 2 +- src/components/standup/index.tsx | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/services/standup.ts b/src/app/services/standup.ts index aca5bf1e7..f05d8013b 100644 --- a/src/app/services/standup.ts +++ b/src/app/services/standup.ts @@ -3,7 +3,7 @@ import { api } from './api'; export const standupApi = api.injectEndpoints({ endpoints: (build) => ({ - addStandUp: build.mutation({ + addStandup: build.mutation({ query: (standupUpdate) => ({ url: '/progress', method: 'POST', diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index 9e27ad84e..bab46d21b 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -52,13 +52,12 @@ const StandUpContainer: FC = () => { planned: '', blockers: '', }); - console.log(standupUpdate); }; return ( <>
-
+

You have @@ -117,7 +116,7 @@ const StandUpContainer: FC = () => {

-
+
); From beaec0a985abdd59d077aa56cec3aec383d0e3ba Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Thu, 25 May 2023 20:30:18 +0530 Subject: [PATCH 24/79] pipe symbol fixed and background color change fixed --- src/components/Layout/index.tsx | 1 + src/constants/navbar-Content.ts | 7 +++++++ src/styles/index.scss | 3 --- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index a4e5c3aa0..7586d9dd8 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -41,6 +41,7 @@ const Layout: FC = ({ children }) => { element.refURL, router.pathname === element.pathName )} + {element.pipeSymbol} ))} {dev && ( diff --git a/src/constants/navbar-Content.ts b/src/constants/navbar-Content.ts index dc0833f6e..445de857d 100644 --- a/src/constants/navbar-Content.ts +++ b/src/constants/navbar-Content.ts @@ -3,36 +3,43 @@ const navBarContentMock = [ title: 'Tasks', refURL: '/', pathName: '/', + pipeSymbol: '|', }, { title: 'Issues', refURL: '/issues', pathName: '/issues', + pipeSymbol: '|', }, { title: 'Mine', refURL: '/mine', pathName: '/mine', + pipeSymbol: '|', }, { title: 'Standup', refURL: '/standup', pathName: '/standup', + pipeSymbol: '|', }, { title: 'Open PRs', refURL: '/openPRs', pathName: '/openPRs', + pipeSymbol: '|', }, { title: 'Stale PRs', refURL: '/stale-pr', pathName: '/stale-pr', + pipeSymbol: '|', }, { title: 'Idle Users', refURL: '/idle-users', pathName: '/idle-users', + pipeSymbol: '', }, ]; diff --git a/src/styles/index.scss b/src/styles/index.scss index c4b6da35e..de3935726 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,8 +1,5 @@ -$theme-backgroundColor: #f5f5f5; - body { margin: 0 auto; - background-color: $theme-backgroundColor; } html { From fb96dcb4e3aba119a27a14b78184ffa5fedd5c25 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Fri, 26 May 2023 12:07:43 +0530 Subject: [PATCH 25/79] PR review comments fixed --- src/components/standup/FormInputComponent.tsx | 4 ++-- src/components/standup/index.tsx | 11 ++++------- src/interfaces/standup.type.ts | 1 - src/pages/standup/index.tsx | 6 +++--- 4 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/standup/FormInputComponent.tsx b/src/components/standup/FormInputComponent.tsx index a274394e9..4da5cfaa3 100644 --- a/src/components/standup/FormInputComponent.tsx +++ b/src/components/standup/FormInputComponent.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import { FC } from 'react'; import styles from '@/components/standup/standupContainer.module.scss'; import { InputProps } from '@/interfaces/standup.type'; @@ -26,4 +26,4 @@ const FormInputComponent: FC = ({ ); }; -export default React.memo(FormInputComponent); +export default FormInputComponent; diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index bab46d21b..88261b100 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -28,7 +28,7 @@ const StandUpContainer: FC = () => { [event.target.name]: event.target.value, })); }; - const isVaidate = () => { + const isValidate = () => { return ( standupUpdate.completed !== '' && standupUpdate.planned !== '' && @@ -36,13 +36,9 @@ const StandUpContainer: FC = () => { ); }; useEffect(() => { - const isValid = isVaidate(); + const isValid = isValidate(); setButtonDisable(!isValid); - }, [ - standupUpdate.completed, - standupUpdate.planned, - standupUpdate.blockers, - ]); + }, [standupUpdate.completed, standupUpdate.planned]); const handleFormSubmission = (event: React.FormEvent) => { event.preventDefault(); @@ -111,6 +107,7 @@ const StandUpContainer: FC = () => { diff --git a/src/interfaces/standup.type.ts b/src/interfaces/standup.type.ts index 1a5232468..d588d6a2d 100644 --- a/src/interfaces/standup.type.ts +++ b/src/interfaces/standup.type.ts @@ -6,7 +6,6 @@ export type standupUpdateType = { }; export type InputProps = { - // id: string; placeholder: string; name: string; value: string; diff --git a/src/pages/standup/index.tsx b/src/pages/standup/index.tsx index 2b5fe2896..80e71b4f5 100644 --- a/src/pages/standup/index.tsx +++ b/src/pages/standup/index.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import { FC, memo } from 'react'; import Head from '@/components/head'; import Layout from '@/components/Layout'; @@ -8,7 +8,7 @@ import StandUpContainer from '@/components/standup'; import { useGetUserQuery } from '@/app/services/userApi'; import { skipToken } from '@reduxjs/toolkit/dist/query'; -const StandUp: FC = () => { +const StandUp: FC = memo(function StandUp() { const { isLoggedIn, isLoading } = useAuthenticated(); const { isLoading: isAuthenticating } = useGetUserQuery(skipToken); @@ -36,6 +36,6 @@ const StandUp: FC = () => { {handleConditionalRendering()} ); -}; +}); export default StandUp; From 6acc12b9120974875df1ddc20015f4c1dfdf60e3 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Sat, 27 May 2023 16:16:45 +0530 Subject: [PATCH 26/79] API integration running and feature is ready to be merge --- .../Unit/Components/standup/standup.test.tsx | 29 +++++++++++++++---- src/app/services/api.ts | 1 + src/app/services/standup.ts | 10 +++++-- src/components/standup/index.tsx | 25 +++++++++++++--- src/interfaces/standup.type.ts | 17 +++++++++++ src/utils/getTotalMissedUpdate.ts | 11 +++++++ 6 files changed, 82 insertions(+), 11 deletions(-) create mode 100644 src/utils/getTotalMissedUpdate.ts diff --git a/__tests__/Unit/Components/standup/standup.test.tsx b/__tests__/Unit/Components/standup/standup.test.tsx index 615e56079..9b761138e 100644 --- a/__tests__/Unit/Components/standup/standup.test.tsx +++ b/__tests__/Unit/Components/standup/standup.test.tsx @@ -1,23 +1,42 @@ +import { store } from '@/app/store'; +import { Provider } from 'react-redux'; import StandUpContainer from '@/components/standup'; -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; +import { renderWithRouter } from '@/test_utils/createMockRouter'; describe('Standup', () => { test('renders the missed updates of the user', () => { - render(); + renderWithRouter( + + + + ); expect(screen.getByTestId('missed-updates')).toBeInTheDocument(); }); test('renders the yesterday Update Input', () => { - render(); + renderWithRouter( + + + + ); expect( screen.queryByTestId('yesterday-input-update') ).toBeInTheDocument(); }); test('renders the Today Update Input', () => { - render(); + renderWithRouter( + + + + ); expect(screen.queryByTestId('today-input-update')).toBeInTheDocument(); }); test('renders the blocker Input', () => { - render(); + renderWithRouter( + + + + ); expect( screen.queryByTestId('blocker-input-update') ).toBeInTheDocument(); diff --git a/src/app/services/api.ts b/src/app/services/api.ts index 76cf2ae26..56d353634 100644 --- a/src/app/services/api.ts +++ b/src/app/services/api.ts @@ -22,6 +22,7 @@ export const api = createApi({ 'Levels', 'Standup', 'Mine_Tasks', + 'MissedUpdate', ], /** * This api has endpoints injected in adjacent files, diff --git a/src/app/services/standup.ts b/src/app/services/standup.ts index f05d8013b..c443c67a6 100644 --- a/src/app/services/standup.ts +++ b/src/app/services/standup.ts @@ -1,15 +1,21 @@ -import { standupUpdateType } from '@/interfaces/standup.type'; +import { standupUpdateType, userDetails } from '@/interfaces/standup.type'; import { api } from './api'; export const standupApi = api.injectEndpoints({ endpoints: (build) => ({ addStandup: build.mutation({ query: (standupUpdate) => ({ - url: '/progress', + url: '/progresses', method: 'POST', body: standupUpdate, }), invalidatesTags: ['Standup'], }), + userStandupDetails: build.query({ + query: (id): string => `/progresses?userId=${id}`, + providesTags: ['MissedUpdate'], + }), }), }); + +export const { useAddStandupMutation, useUserStandupDetailsQuery } = standupApi; diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index 88261b100..9c16c2f0f 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -1,10 +1,17 @@ import { FC, useState, useEffect } from 'react'; +import styles from '@/components/standup/standupContainer.module.scss'; + +import { + useAddStandupMutation, + useUserStandupDetailsQuery, +} from '@/app/services/standup'; +import { useGetUserQuery } from '@/app/services/userApi'; + import FormInputComponent from './FormInputComponent'; import { standupUpdateType } from '@/interfaces/standup.type'; import { getYesterdayDate } from '@/utils/getYesterdayDate'; - -import styles from '@/components/standup/standupContainer.module.scss'; +import { getTotalMissedUpdate } from '@/utils/getTotalMissedUpdate'; const StandUpContainer: FC = () => { const [standupUpdate, setStandupUpdate] = useState({ @@ -15,6 +22,11 @@ const StandUpContainer: FC = () => { }); const [buttonDisable, setButtonDisable] = useState(true); + const [addStandup] = useAddStandupMutation(); + const { data: user } = useGetUserQuery(); + const { data: userStandupdata } = useUserStandupDetailsQuery(user?.id); + const standupDates = userStandupdata?.data?.map((element) => element.date); + const totalMissedUpdate = getTotalMissedUpdate(standupDates || []); const yesterdayDate = getYesterdayDate(); @@ -40,7 +52,9 @@ const StandUpContainer: FC = () => { setButtonDisable(!isValid); }, [standupUpdate.completed, standupUpdate.planned]); - const handleFormSubmission = (event: React.FormEvent) => { + const handleFormSubmission = async ( + event: React.FormEvent + ) => { event.preventDefault(); setStandupUpdate({ type: 'user', @@ -48,6 +62,7 @@ const StandUpContainer: FC = () => { planned: '', blockers: '', }); + await addStandup(standupUpdate); }; return ( @@ -57,7 +72,9 @@ const StandUpContainer: FC = () => {

You have - 2 missed + + {totalMissedUpdate} missed + Standup updates this week

Let's try to avoid having zero days

diff --git a/src/interfaces/standup.type.ts b/src/interfaces/standup.type.ts index d588d6a2d..44892585d 100644 --- a/src/interfaces/standup.type.ts +++ b/src/interfaces/standup.type.ts @@ -12,3 +12,20 @@ export type InputProps = { dataTestId: string; handleChange: (e: React.ChangeEvent) => void; }; + +export type userDetails = { + data: [ + { + blockers: string; + completed: string; + createdAt: number; + date: number; + id: string; + planned: string; + type: string; + userId: string; + } + ]; + message: string; + count: number; +}; diff --git a/src/utils/getTotalMissedUpdate.ts b/src/utils/getTotalMissedUpdate.ts new file mode 100644 index 000000000..ffbbb22ba --- /dev/null +++ b/src/utils/getTotalMissedUpdate.ts @@ -0,0 +1,11 @@ +export function getTotalMissedUpdate(date: Array): number { + const currentStandupDate = new Date().setUTCHours(0, 0, 0, 0); + let lastStanupDate = 0; + for (let i = 0; i < date.length; i++) { + if (date[i] > lastStanupDate) { + lastStanupDate = date[i]; + } + } + const totalMissedUpdate = currentStandupDate - lastStanupDate; + return totalMissedUpdate; +} From 00045818b62bfb47cdbe49f5e7d853a13e8504d9 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Mon, 29 May 2023 22:25:44 +0530 Subject: [PATCH 27/79] changes done as per comments --- .../Unit/Components/standup/standup.test.tsx | 95 ++++++++++++++++++- src/app/services/api.ts | 2 +- src/app/services/standup.ts | 4 +- src/components/standup/FormInputComponent.tsx | 35 ++++--- src/components/standup/index.tsx | 52 +++++----- .../standup/standupContainer.module.scss | 84 ++++++++-------- src/pages/standup/index.tsx | 19 +++- src/{interfaces => types}/standup.type.ts | 3 + src/utils/getYesterdayDate.ts | 29 ------ 9 files changed, 203 insertions(+), 120 deletions(-) rename src/{interfaces => types}/standup.type.ts (90%) delete mode 100644 src/utils/getYesterdayDate.ts diff --git a/__tests__/Unit/Components/standup/standup.test.tsx b/__tests__/Unit/Components/standup/standup.test.tsx index 9b761138e..a27a7afc4 100644 --- a/__tests__/Unit/Components/standup/standup.test.tsx +++ b/__tests__/Unit/Components/standup/standup.test.tsx @@ -1,7 +1,7 @@ import { store } from '@/app/store'; import { Provider } from 'react-redux'; import StandUpContainer from '@/components/standup'; -import { screen } from '@testing-library/react'; +import { fireEvent, screen } from '@testing-library/react'; import { renderWithRouter } from '@/test_utils/createMockRouter'; describe('Standup', () => { @@ -13,7 +13,7 @@ describe('Standup', () => { ); expect(screen.getByTestId('missed-updates')).toBeInTheDocument(); }); - test('renders the yesterday Update Input', () => { + test('renders the completed inputField', () => { renderWithRouter( @@ -23,7 +23,33 @@ describe('Standup', () => { screen.queryByTestId('yesterday-input-update') ).toBeInTheDocument(); }); - test('renders the Today Update Input', () => { + test('on intial render completed inputField have empty value', () => { + renderWithRouter( + + + + ); + const input = screen.getByTestId('yesterday-input-update'); + expect(input).toHaveValue(''); + }); + + test('on render completed inputField have value', () => { + renderWithRouter( + + + + ); + const input = screen.getByTestId( + 'yesterday-input-update' + ) as HTMLInputElement; + fireEvent.change(input, { + target: { value: 'Working on a backend Go project' }, + }); + const inputValue = input.value; + expect(inputValue).toBe('Working on a backend Go project'); + }); + + test('renders the Today inputField', () => { renderWithRouter( @@ -31,7 +57,33 @@ describe('Standup', () => { ); expect(screen.queryByTestId('today-input-update')).toBeInTheDocument(); }); - test('renders the blocker Input', () => { + test('on intial render Today inputField have empty value', () => { + renderWithRouter( + + + + ); + const input = screen.getByTestId('today-input-update'); + expect(input).toHaveValue(''); + }); + + test('on render Today inputField have value', () => { + renderWithRouter( + + + + ); + const input = screen.getByTestId( + 'today-input-update' + ) as HTMLInputElement; + fireEvent.change(input, { + target: { value: 'Implement error handling for API endpoints' }, + }); + const inputValue = input.value; + expect(inputValue).toBe('Implement error handling for API endpoints'); + }); + + test('renders the blocker inputField', () => { renderWithRouter( @@ -41,4 +93,39 @@ describe('Standup', () => { screen.queryByTestId('blocker-input-update') ).toBeInTheDocument(); }); + + test('on intial render Blocker inputField have empty value', () => { + renderWithRouter( + + + + ); + const input = screen.getByTestId('blocker-input-update'); + expect(input).toHaveValue(''); + }); + + test('on render Blocker inputField have value', () => { + renderWithRouter( + + + + ); + const input = screen.getByTestId( + 'blocker-input-update' + ) as HTMLInputElement; + fireEvent.change(input, { + target: { value: 'Waiting for database access credentials' }, + }); + const inputValue = input.value; + expect(inputValue).toBe('Waiting for database access credentials'); + }); + + test('render if button is enabled', () => { + renderWithRouter( + + + + ); + expect(screen.getByText(/Submit/i).closest('button')).toBeEnabled(); + }); }); diff --git a/src/app/services/api.ts b/src/app/services/api.ts index 56d353634..6fd983886 100644 --- a/src/app/services/api.ts +++ b/src/app/services/api.ts @@ -22,7 +22,7 @@ export const api = createApi({ 'Levels', 'Standup', 'Mine_Tasks', - 'MissedUpdate', + 'User_Standup', ], /** * This api has endpoints injected in adjacent files, diff --git a/src/app/services/standup.ts b/src/app/services/standup.ts index c443c67a6..0ed5d98e9 100644 --- a/src/app/services/standup.ts +++ b/src/app/services/standup.ts @@ -1,4 +1,4 @@ -import { standupUpdateType, userDetails } from '@/interfaces/standup.type'; +import { standupUpdateType, userDetails } from '@/types/standup.type'; import { api } from './api'; export const standupApi = api.injectEndpoints({ @@ -13,7 +13,7 @@ export const standupApi = api.injectEndpoints({ }), userStandupDetails: build.query({ query: (id): string => `/progresses?userId=${id}`, - providesTags: ['MissedUpdate'], + providesTags: ['User_Standup'], }), }), }); diff --git a/src/components/standup/FormInputComponent.tsx b/src/components/standup/FormInputComponent.tsx index 4da5cfaa3..84074932d 100644 --- a/src/components/standup/FormInputComponent.tsx +++ b/src/components/standup/FormInputComponent.tsx @@ -1,28 +1,37 @@ import { FC } from 'react'; import styles from '@/components/standup/standupContainer.module.scss'; -import { InputProps } from '@/interfaces/standup.type'; +import { InputProps } from '@/types/standup.type'; const FormInputComponent: FC = ({ placeholder, name, value, dataTestId, + labelValue, + htmlFor, + inputId, handleChange, }) => { return ( - ) => - handleChange(e) - } - /> + <> + + ) => + handleChange(e) + } + /> + ); }; diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index 9c16c2f0f..22a2998c0 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -1,5 +1,5 @@ import { FC, useState, useEffect } from 'react'; - +import moment from 'moment'; import styles from '@/components/standup/standupContainer.module.scss'; import { @@ -9,9 +9,9 @@ import { import { useGetUserQuery } from '@/app/services/userApi'; import FormInputComponent from './FormInputComponent'; -import { standupUpdateType } from '@/interfaces/standup.type'; -import { getYesterdayDate } from '@/utils/getYesterdayDate'; +import { standupUpdateType } from '@/types/standup.type'; import { getTotalMissedUpdate } from '@/utils/getTotalMissedUpdate'; +import { toast, ToastTypes } from '@/helperFunctions/toast'; const StandUpContainer: FC = () => { const [standupUpdate, setStandupUpdate] = useState({ @@ -25,10 +25,11 @@ const StandUpContainer: FC = () => { const [addStandup] = useAddStandupMutation(); const { data: user } = useGetUserQuery(); const { data: userStandupdata } = useUserStandupDetailsQuery(user?.id); + + const { SUCCESS, ERROR } = ToastTypes; const standupDates = userStandupdata?.data?.map((element) => element.date); const totalMissedUpdate = getTotalMissedUpdate(standupDates || []); - - const yesterdayDate = getYesterdayDate(); + const yesterdayDate = moment().subtract(1, 'days').format('MMMM DD, YYYY'); const buttonStyleClass = buttonDisable ? `${styles.nonActiveButton}` @@ -56,13 +57,18 @@ const StandUpContainer: FC = () => { event: React.FormEvent ) => { event.preventDefault(); - setStandupUpdate({ - type: 'user', - completed: '', - planned: '', - blockers: '', - }); - await addStandup(standupUpdate); + try { + await addStandup(standupUpdate); + toast(SUCCESS, 'Standup submitted successfully'); + setStandupUpdate({ + type: 'user', + completed: '', + planned: '', + blockers: '', + }); + } catch (error) { + toast(ERROR, 'Something went wrong!'); + } }; return ( @@ -86,38 +92,34 @@ const StandUpContainer: FC = () => { onSubmit={handleFormSubmission} >
- - - -
diff --git a/src/components/standup/standupContainer.module.scss b/src/components/standup/standupContainer.module.scss index bbb680b8a..8fcbeaad0 100644 --- a/src/components/standup/standupContainer.module.scss +++ b/src/components/standup/standupContainer.module.scss @@ -1,58 +1,58 @@ -$theme-CornFlowerBlue: #1c64f2; -$theme-Biscay: #1c325e; -$theme-white: #ffffff; -$theme-FrenchRose: #f1416c; -$theme-FunBlue: #1e429f; +$theme-focusHighlight: #1c64f2; +$theme-primaryBackground: #1c325e; +$theme-whiteColor: #ffffff; +$theme-bannerFontColor: #f1416c; +$theme-secondaryBackground: #1e429f; $theme-CeriseRed: #d61f69; -$theme-PaleSky: #6b7280; -$theme-Mischka: #d1d5db; -$theme-AthensGray: #e5e7eb; +$theme-headingColor: #6b7280; +$theme-inputFieldBorder: #d1d5db; +$theme-nonActiveButtonBackground: #e5e7eb; $radius: 0.5rem; .standupContainer { display: flex; flex-direction: column; - margin-top: 1.875rem; + margin-top: 1.88rem; width: 100%; align-items: center; justify-content: center; } .standupBanner { - background-color: $theme-Biscay; - width: 83.7%; + background-color: $theme-primaryBackground; + width: 84%; height: 12%; - color: $theme-white; - padding: 1.5rem 0 1.5rem 3.0625rem; + color: $theme-whiteColor; + padding: 2rem; border-radius: $radius; } .standupBanner p { font-family: 'Poppins', sans-serif; - font-size: 1.25rem; + font-size: 1.24rem; font-weight: 600; } .standupBanner p span { - color: $theme-FrenchRose; + color: $theme-bannerFontColor; text-decoration: underline; - margin: 0 0.25rem; + margin: 0 0.24rem; } .standupUpdateContainer { - width: 50.7%; - margin-top: 3.125rem; + width: 50.8%; + margin-top: 4rem; } .standupForm { - margin-top: 2.1875rem; + margin-top: 2.2rem; } .standupUpdateContainer h1 { - color: $theme-FunBlue; + color: $theme-secondaryBackground; font-family: 'Inter', sans-serif; font-size: 2.2rem; - padding-left: 1rem; + padding-left: 0.8rem; } .formFields { @@ -61,69 +61,69 @@ $radius: 0.5rem; } .updateHeading { - color: $theme-PaleSky; + color: $theme-headingColor; font-size: 1.4rem; font-family: 'Inter', sans-serif; } .inputField { - height: 58px; + height: 4rem; width: 100%; border-radius: $radius; - border: 1px solid $theme-Mischka; - background: $theme-white; + border: 1px solid $theme-inputFieldBorder; + background: $theme-whiteColor; padding: 1rem; font-weight: 400; - font-size: 0.875rem; + font-size: 0.88rem; line-height: 150%; font-family: 'Inter', sans-serif; margin-top: 0.8rem; - margin-bottom: 2.5rem; + margin-bottom: 2.4rem; } .inputField:focus { - border: 1px solid $theme-CornFlowerBlue; + border: 1px solid $theme-focusHighlight; outline: none; } .submitButton { - width: 13.0625rem; - height: 3.25rem; + width: 14rem; + height: 4rem; border-radius: $radius; font-weight: 400; - font-size: 0.875rem; + font-size: 0.88rem; line-height: 150%; font-family: 'Inter', sans-serif; border: none; cursor: pointer; - letter-spacing: 0.9px; + letter-spacing: 0.8px; margin-left: 1rem; } .submitButton:active { - background: $theme-FunBlue; - color: $theme-white; + background: $theme-secondaryBackground; + color: $theme-whiteColor; } .activeButton { - background: $theme-FunBlue; - color: $theme-white; + background: $theme-secondaryBackground; + color: $theme-whiteColor; } .nonActiveButton { - background: $theme-AthensGray; + background: $theme-nonActiveButtonBackground; } @media (max-width: 946px) { .standupUpdateContainer { - width: 76.7%; + width: 76%; } } @media (max-width: 600px) { .standupBanner { width: 100%; - padding: 1rem 0 0.5rem 0.25rem; + padding: 2rem; text-align: center; } @@ -134,7 +134,7 @@ $radius: 0.5rem; .standupUpdateContainer { width: 100%; - margin-top: 0.25rem; + margin-top: 0.24rem; } .standupUpdateContainer h1 { @@ -146,7 +146,7 @@ $radius: 0.5rem; } .submitButton { - width: 9.375rem; - height: 2.5rem; + width: 10rem; + height: 2.6rem; } } diff --git a/src/pages/standup/index.tsx b/src/pages/standup/index.tsx index 80e71b4f5..d2d26a6df 100644 --- a/src/pages/standup/index.tsx +++ b/src/pages/standup/index.tsx @@ -1,17 +1,22 @@ import { FC, memo } from 'react'; import Head from '@/components/head'; import Layout from '@/components/Layout'; +import { useRouter } from 'next/router'; import { LOGIN_URL } from '@/constants/url'; import useAuthenticated from '@/hooks/useAuthenticated'; import StandUpContainer from '@/components/standup'; import { useGetUserQuery } from '@/app/services/userApi'; import { skipToken } from '@reduxjs/toolkit/dist/query'; +import PageNotFound from '../404'; const StandUp: FC = memo(function StandUp() { const { isLoggedIn, isLoading } = useAuthenticated(); const { isLoading: isAuthenticating } = useGetUserQuery(skipToken); + const router = useRouter(); + + const { dev } = router.query; const handleConditionalRendering = () => { if (!isAuthenticating && isLoggedIn) { @@ -31,10 +36,16 @@ const StandUp: FC = memo(function StandUp() { }; return ( - - - {handleConditionalRendering()} - + <> + {dev === 'true' ? ( + + + {handleConditionalRendering()} + + ) : ( + + )} + ); }); diff --git a/src/interfaces/standup.type.ts b/src/types/standup.type.ts similarity index 90% rename from src/interfaces/standup.type.ts rename to src/types/standup.type.ts index 44892585d..838dc17bf 100644 --- a/src/interfaces/standup.type.ts +++ b/src/types/standup.type.ts @@ -10,6 +10,9 @@ export type InputProps = { name: string; value: string; dataTestId: string; + labelValue: string; + htmlFor: string; + inputId: string; handleChange: (e: React.ChangeEvent) => void; }; diff --git a/src/utils/getYesterdayDate.ts b/src/utils/getYesterdayDate.ts deleted file mode 100644 index 2e0e3c5e4..000000000 --- a/src/utils/getYesterdayDate.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { month } from '@/constants/ProgressUpdates'; - -export function getYesterdayDate(): string { - const date = new Date(); - const currentDay = date.getDate(); - const currentMonth = month[Number(date.getMonth())]; - const currentYear = date.getFullYear(); - - let yesterdayDay = currentDay - 1; - let yesterdayMonth = currentMonth; - let yesterdayYear = currentYear; - - if (yesterdayDay === 0) { - const lastDayOfPreviousMonth = new Date( - currentYear, - date.getMonth(), - 0 - ).getDate(); - yesterdayMonth = month[Number(date.getMonth()) - 1]; - yesterdayDay = lastDayOfPreviousMonth; - } - - if (yesterdayDay === 31 && yesterdayMonth === 'December') { - yesterdayYear = currentYear - 1; - } - const yesterdayDate = `${yesterdayMonth} ${yesterdayDay}, ${yesterdayYear}`; - - return yesterdayDate; -} From 9a8b62395704a2ef46d664ebeb14dfdbf9365ee1 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Tue, 30 May 2023 16:47:02 +0530 Subject: [PATCH 28/79] fixed class name as per review --- src/components/standup/index.tsx | 13 +++++++++---- src/components/standup/standupContainer.module.scss | 8 ++++---- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index 22a2998c0..02fe4249d 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -76,17 +76,22 @@ const StandUpContainer: FC = () => {
-

+

You have - + {totalMissedUpdate} missed Standup updates this week

-

Let's try to avoid having zero days

+

+ Let's try to avoid having zero days{' '} +

-

Standup Update

+

Standup Update

Date: Wed, 31 May 2023 09:58:31 +0530 Subject: [PATCH 29/79] fixed the total missed update count --- src/components/standup/standupContainer.module.scss | 2 +- src/utils/getTotalMissedUpdate.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/standup/standupContainer.module.scss b/src/components/standup/standupContainer.module.scss index 5e86a462b..6a4ce0a24 100644 --- a/src/components/standup/standupContainer.module.scss +++ b/src/components/standup/standupContainer.module.scss @@ -36,7 +36,7 @@ $radius: 0.5rem; .standupBanner .bannerPara .totalMissedUpdate { color: $theme-bannerFontColor; text-decoration: underline; - margin: 0 0.24rem; + margin: 0 0.4rem; } .standupUpdateContainer { diff --git a/src/utils/getTotalMissedUpdate.ts b/src/utils/getTotalMissedUpdate.ts index ffbbb22ba..7565da2fa 100644 --- a/src/utils/getTotalMissedUpdate.ts +++ b/src/utils/getTotalMissedUpdate.ts @@ -6,6 +6,7 @@ export function getTotalMissedUpdate(date: Array): number { lastStanupDate = date[i]; } } - const totalMissedUpdate = currentStandupDate - lastStanupDate; + const totalMissedUpdate = + (currentStandupDate - lastStanupDate) / (24 * 60 * 60 * 1000); return totalMissedUpdate; } From 93b5631c71a6f0c86c9be3f328072fce23f36834 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 31 May 2023 11:34:04 +0530 Subject: [PATCH 30/79] put my feature behind the feature flag --- src/components/Layout/index.tsx | 10 ++++++++++ src/constants/navbar-Content.ts | 6 ------ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 7586d9dd8..eea83afe2 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -44,6 +44,16 @@ const Layout: FC = ({ children }) => { {element.pipeSymbol} ))} + {dev && ( + <> + | + {navBarContent( + 'Standup', + '/standup/?dev=true', + router.pathname === '/standup' + )} + + )} {dev && ( <> | diff --git a/src/constants/navbar-Content.ts b/src/constants/navbar-Content.ts index 445de857d..d3309d1ee 100644 --- a/src/constants/navbar-Content.ts +++ b/src/constants/navbar-Content.ts @@ -17,12 +17,6 @@ const navBarContentMock = [ pathName: '/mine', pipeSymbol: '|', }, - { - title: 'Standup', - refURL: '/standup', - pathName: '/standup', - pipeSymbol: '|', - }, { title: 'Open PRs', refURL: '/openPRs', From 7712e936f681d867b96856a8aeb82874a138a6ae Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 31 May 2023 14:23:59 +0530 Subject: [PATCH 31/79] fixed className in css --- src/components/standup/standupContainer.module.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/standup/standupContainer.module.scss b/src/components/standup/standupContainer.module.scss index 6a4ce0a24..3ce3b5459 100644 --- a/src/components/standup/standupContainer.module.scss +++ b/src/components/standup/standupContainer.module.scss @@ -33,7 +33,7 @@ $radius: 0.5rem; font-weight: 600; } -.standupBanner .bannerPara .totalMissedUpdate { +.totalMissedUpdate { color: $theme-bannerFontColor; text-decoration: underline; margin: 0 0.4rem; @@ -48,7 +48,7 @@ $radius: 0.5rem; margin-top: 2.2rem; } -.standupUpdateContainer .standupTitle { +.standupTitle { color: $theme-secondaryBackground; font-family: 'Inter', sans-serif; font-size: 2.2rem; @@ -127,7 +127,7 @@ $radius: 0.5rem; text-align: center; } - .standupBanner .bannerPara { + .bannerPara { font-size: 1rem; word-wrap: break-word; } @@ -137,7 +137,7 @@ $radius: 0.5rem; margin-top: 0.24rem; } - .standupUpdateContainer h1 { + .standupTitle { font-size: 1.6rem; } From a9f35418985703802d41e64c37da5559b1c70d20 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 31 May 2023 16:15:30 +0530 Subject: [PATCH 32/79] fixed edge case of total missed update --- src/utils/getTotalMissedUpdate.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/utils/getTotalMissedUpdate.ts b/src/utils/getTotalMissedUpdate.ts index 7565da2fa..4835a6708 100644 --- a/src/utils/getTotalMissedUpdate.ts +++ b/src/utils/getTotalMissedUpdate.ts @@ -1,12 +1,19 @@ export function getTotalMissedUpdate(date: Array): number { const currentStandupDate = new Date().setUTCHours(0, 0, 0, 0); let lastStanupDate = 0; + let totalMissedUpdate = 0; + if (date.length === 0) { + return totalMissedUpdate; + } for (let i = 0; i < date.length; i++) { if (date[i] > lastStanupDate) { lastStanupDate = date[i]; } } - const totalMissedUpdate = + console.log(currentStandupDate); + totalMissedUpdate = (currentStandupDate - lastStanupDate) / (24 * 60 * 60 * 1000); + console.log(totalMissedUpdate); return totalMissedUpdate; } +//86,400,000 From 2eec52a7df73dba05433baaefa4c8b2f5de644a9 Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 31 May 2023 16:50:00 +0530 Subject: [PATCH 33/79] code bug fixed --- src/components/standup/index.tsx | 9 +++++++-- src/utils/getTotalMissedUpdate.ts | 2 -- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index 02fe4249d..16d0b9f1a 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -50,8 +50,13 @@ const StandUpContainer: FC = () => { }; useEffect(() => { const isValid = isValidate(); + console.log(isValid); setButtonDisable(!isValid); - }, [standupUpdate.completed, standupUpdate.planned]); + }, [ + standupUpdate.completed, + standupUpdate.planned, + standupUpdate.blockers, + ]); const handleFormSubmission = async ( event: React.FormEvent @@ -130,7 +135,7 @@ const StandUpContainer: FC = () => { + + ); +}; + +const headerLinks: HeaderItem[] = [ + { + title: 'Tasks', + link: '/', + }, + { + title: 'Issues', + link: '/issues', + }, + { + title: 'Mine', + link: '/mine', + }, + { + title: 'Open PRs', + link: '/openPRs', + }, + { + title: 'Stale PRs', + link: '/stale-pr', + }, + { + title: 'Idle Users', + link: '/idle-users', + }, +]; + +export const Header = () => { + const router = useRouter(); + + // Dev feature toggle + const { query } = router; + const dev = !!query.dev; + + return ( +
+ {headerLinks.map(({ title, link }, index) => ( + + ))} + + {dev && ( + + )} +
+ ); +}; diff --git a/src/components/Layout/Layout.module.scss b/src/components/Layout/Layout.module.scss index 2374e854b..a97f88a9c 100644 --- a/src/components/Layout/Layout.module.scss +++ b/src/components/Layout/Layout.module.scss @@ -6,32 +6,10 @@ min-height: 100%; } -.header { - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; - padding-top: 10px; -} - .wrapper { margin: 0 2em; } -.link { - padding: 10px; - text-decoration: none; - font-weight: bold; - color: #041484; - cursor: pointer; - background: none; - border: none; -} - -.active { - color: #e30464; -} - @media (max-width: 970px) { .navbar { display: flex; diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 141f70342..13efc45a6 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -1,92 +1,25 @@ import { FC, ReactNode } 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 { useGetUserQuery } from '@/app/services/userApi'; import { Loader } from '../tasks/card/Loader'; +import { Header } from '@/components/Header'; interface Props { children?: ReactNode; - hideHeader?: boolean; // Hides header when set to true + hideHeader?: boolean; } -const navBarContent = (title: string, refUrl: string, isActive = false) => { - const linkClasses = `${styles.link} ${isActive ? styles.active : ''}`; - - return ( - - - - ); -}; - const Layout: FC = ({ hideHeader, children }) => { - const router = useRouter(); const { isLoading } = useGetUserQuery(); - // Dev feature toggle - const { query } = router; - const dev = !!query.dev; - return (
{isLoading && }
- {!hideHeader ? ( -
- {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 && ( - <> - | - {navBarContent( - 'Availability Panel', - '/availability-panel' - )} - - )} -
- ) : null} + {!hideHeader ?
: null} {children}