Skip to content

Commit 9cfd30c

Browse files
subinasrAdityaKhatri
subinasr
authored and
AdityaKhatri
committed
feat(auth): add nagbar for login expiry
- Fix conductors styling - Create a separate component for Standup conductors
1 parent 44816b4 commit 9cfd30c

File tree

15 files changed

+232
-172
lines changed

15 files changed

+232
-172
lines changed

‎backend‎

‎src/App/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const ME_QUERY = gql`
5757
id
5858
lastName
5959
isStaff
60+
loginExpire
6061
}
6162
}
6263
}

‎src/components/Clock/index.tsx‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎src/components/StandupConductors/index.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import {
2+
_cs,
3+
encodeDate,
4+
} from '@togglecorp/fujs';
5+
import {
6+
gql,
7+
useQuery,
8+
} from 'urql';
9+
10+
import DisplayPicture from '#components/DisplayPicture';
11+
import TextOutput from '#components/TextOutput';
12+
import {
13+
type StandupConductorsQuery,
14+
type StandupConductorsQueryVariables,
15+
} from '#generated/types/graphql';
16+
17+
import styles from './styles.module.css';
18+
19+
const STANDUP_CONDUCTORS = gql`
20+
query StandupConductors($date: Date!){
21+
private {
22+
dailyStandup(date: $date) {
23+
conductor {
24+
id
25+
displayName
26+
displayPicture
27+
}
28+
fallbackConductor {
29+
id
30+
displayName
31+
displayPicture
32+
}
33+
}
34+
}
35+
}
36+
`;
37+
38+
const todayDate = encodeDate(new Date());
39+
40+
function StandupConductors() {
41+
const [conductorsResponse] = useQuery<StandupConductorsQuery, StandupConductorsQueryVariables>({
42+
query: STANDUP_CONDUCTORS,
43+
variables: { date: todayDate },
44+
requestPolicy: 'cache-and-network',
45+
});
46+
47+
const standupConductors = conductorsResponse.data?.private.dailyStandup;
48+
49+
return (
50+
<div className={styles.conductors}>
51+
<TextOutput
52+
className={_cs(
53+
styles.conductorItem,
54+
!standupConductors && styles.hidden,
55+
)}
56+
label="Standup Lead"
57+
valueContainerClassName={styles.conductorValue}
58+
value={(
59+
<>
60+
<DisplayPicture
61+
imageUrl={standupConductors?.conductor?.displayPicture}
62+
displayName={standupConductors?.conductor?.displayName ?? 'Anonymous'}
63+
/>
64+
<span>
65+
{standupConductors?.conductor?.displayName
66+
?? 'Anonymous'}
67+
</span>
68+
</>
69+
)}
70+
block
71+
hideLabelColon
72+
/>
73+
<TextOutput
74+
className={_cs(
75+
styles.conductorItem,
76+
!standupConductors && styles.hidden,
77+
)}
78+
label="Acting Lead"
79+
valueContainerClassName={styles.conductorValue}
80+
value={(
81+
<>
82+
<DisplayPicture
83+
imageUrl={standupConductors
84+
?.fallbackConductor?.displayPicture}
85+
displayName={standupConductors?.fallbackConductor?.displayName ?? 'Anonymous'}
86+
/>
87+
<span>
88+
{standupConductors?.fallbackConductor?.displayName
89+
?? 'Anonymous'}
90+
</span>
91+
</>
92+
)}
93+
block
94+
hideLabelColon
95+
/>
96+
</div>
97+
);
98+
}
99+
100+
export default StandupConductors;

‎src/components/StandupConductors/styles.module.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.conductors {
2+
display: flex;
3+
flex-direction: column;
4+
gap: var(--spacing-md);
5+
6+
.conductor-item {
7+
display: flex;
8+
justify-content: center;
9+
gap: var(--spacing-xs);
10+
11+
&.hidden {
12+
visibility: hidden;
13+
}
14+
15+
.conductor-value {
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
font-size: var(--font-size-lg);
20+
font-weight: var(--font-weight-normal);
21+
gap: var(--spacing-xs);
22+
}
23+
}
24+
}

‎src/components/TextOutput/styles.module.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
--spacing: var(--spacing-md);
33
display: flex;
44
align-items: baseline;
5-
font-size: var(--font-size-sm);
6-
gap: var(--spacing);
5+
font-size: var(--font-size-md);
6+
gap: var(--spacing-sm);
77

88
&.blok {
99
align-items: initial;
@@ -25,7 +25,6 @@
2525

2626
>.description {
2727
color: var(--color-text-light);
28-
font-size: var(--font-size-sm);
2928
}
3029

3130
&.with-label-colon {

‎src/contexts/user.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { UserMeType } from '#generated/types/graphql';
44

55
export type UserAuth = Pick<
66
UserMeType,
7-
'displayName' | 'displayPicture' | 'email' | 'firstName' | 'id' | 'lastName' | 'isStaff'
7+
'displayName' | 'displayPicture' | 'email' | 'firstName' | 'id' | 'lastName' | 'isStaff' | 'loginExpire'
88
>;
99

1010
export interface UserContextProps {

‎src/hooks/useCurrentDate.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {
2+
useEffect,
3+
useState,
4+
} from 'react';
5+
6+
function useCurrentDate() {
7+
const [dateStr, setDateStr] = useState(() => {
8+
const date = new Date();
9+
return date;
10+
});
11+
12+
useEffect(
13+
() => {
14+
const timeout = window.setInterval(
15+
() => {
16+
const date = new Date();
17+
setDateStr(date);
18+
},
19+
5000,
20+
);
21+
return () => {
22+
window.clearInterval(timeout);
23+
};
24+
},
25+
[],
26+
);
27+
return dateStr;
28+
}
29+
30+
export default useCurrentDate;

‎src/utils/common.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,3 +395,21 @@ export function putUndefined<T extends object>(value: T) {
395395

396396
return copy as PutUndefined<T>;
397397
}
398+
399+
const dateTimeFormatter = new Intl.DateTimeFormat(
400+
[],
401+
{
402+
year: 'numeric',
403+
month: 'short',
404+
day: 'numeric',
405+
weekday: 'short',
406+
hour: 'numeric',
407+
minute: 'numeric',
408+
// second: 'numeric',
409+
hour12: true,
410+
},
411+
);
412+
413+
export function formatDateTime(date: Date) {
414+
return dateTimeFormatter.format(date);
415+
}

‎src/views/DailyStandup/DeadlineSection/index.tsx‎

Lines changed: 7 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,22 @@ import {
99
FcNightLandscape,
1010
FcSportsMode,
1111
} from 'react-icons/fc';
12-
import {
13-
_cs,
14-
compareNumber,
15-
encodeDate,
16-
} from '@togglecorp/fujs';
12+
import { compareNumber } from '@togglecorp/fujs';
1713
import {
1814
gql,
1915
useQuery,
2016
} from 'urql';
2117

22-
import Clock from '#components/Clock';
23-
import TextOutput from '#components/TextOutput';
18+
import StandupConductors from '#components/StandupConductors';
2419
import {
2520
type DeadlinesAndEventsQuery,
2621
type DeadlinesAndEventsQueryVariables,
27-
type StandupConductorsQuery,
28-
type StandupConductorsQueryVariables,
2922
} from '#generated/types/graphql';
23+
import useCurrentDate from '#hooks/useCurrentDate';
24+
import { formatDateTime } from '#utils/common';
3025
import { type GeneralEvent } from '#utils/types';
3126

3227
import Slide from '../Slide';
33-
import { STANDUP_CONDUCTORS } from '../StartSection';
3428
import GeneralEventOutput from './GeneralEvent';
3529

3630
import styles from './styles.module.css';
@@ -59,8 +53,6 @@ const DEADLINES_AND_EVENTS = gql`
5953
}
6054
`;
6155

62-
const todayDate = encodeDate(new Date());
63-
6456
function DeadlineSection() {
6557
const [deadlinesAndEvents] = useQuery<
6658
DeadlinesAndEventsQuery,
@@ -70,14 +62,6 @@ function DeadlineSection() {
7062
requestPolicy: 'cache-and-network',
7163
});
7264

73-
const [conductorsResponse] = useQuery<StandupConductorsQuery, StandupConductorsQueryVariables>({
74-
query: STANDUP_CONDUCTORS,
75-
variables: { date: todayDate },
76-
requestPolicy: 'cache-and-network',
77-
});
78-
79-
const standupConductors = conductorsResponse.data?.private.dailyStandup;
80-
8165
const projects = deadlinesAndEvents.data?.private.allProjects;
8266
const events = deadlinesAndEvents.data?.private.relativeEvents;
8367

@@ -115,6 +99,7 @@ function DeadlineSection() {
11599
})) ?? []),
116100
].sort((a, b) => compareNumber(a.remainingDays, b.remainingDays));
117101
}, [events, projects]);
102+
const todayDate = useCurrentDate();
118103

119104
return (
120105
<Slide
@@ -123,23 +108,8 @@ function DeadlineSection() {
123108
primaryHeading="Daily Standup"
124109
primaryDescription={(
125110
<div className={styles.primarySection}>
126-
<Clock />
127-
<TextOutput
128-
className={_cs(
129-
styles.conductor,
130-
!standupConductors && styles.hidden,
131-
)}
132-
label="Standup Lead"
133-
value={standupConductors?.conductor?.displayName ?? 'Anon'}
134-
/>
135-
<TextOutput
136-
className={_cs(
137-
styles.conductor,
138-
!standupConductors && styles.hidden,
139-
)}
140-
label="Acting Lead"
141-
value={standupConductors?.fallbackConductor?.displayName ?? 'Anon'}
142-
/>
111+
<div>{formatDateTime(todayDate)}</div>
112+
<StandupConductors />
143113
</div>
144114
)}
145115
secondaryHeading="Upcoming Events"

0 commit comments

Comments
 (0)