Skip to content

Commit e7946d5

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 e7946d5

File tree

16 files changed

+234
-173
lines changed

16 files changed

+234
-173
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/Navbar/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ function Navbar(props: Props) {
102102
{isNotDefined(userAuth) && (
103103
<Link
104104
external
105-
href={`${import.meta.env.APP_GRAPHQL_DOMAIN}/dev/sign_in/?redirect_to=${window.location.href}`}
105+
href={`${import.meta.env.APP_GRAPHQL_DOMAIN}/?redirect_to=${window.location.href}`}
106106
>
107107
Login
108108
</Link>

‎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+
}

0 commit comments

Comments
 (0)