Merge pull request #18 from toggle-corp/feature/add-conductor-in-standup

Add standup conductors

Author: AdityaKhatri

backend

@@ -57,6 +57,7 @@ const ME_QUERY = gql`
                 id
                 lastName
                 isStaff
+                loginExpire
             }
         }
     }

src/App/index.tsx

@@ -102,7 +102,7 @@ function Navbar(props: Props) {
                 {isNotDefined(userAuth) && (
                     <Link
                         external
-                        href={`${import.meta.env.APP_GRAPHQL_DOMAIN}/dev/sign_in/?redirect_to=${window.location.href}`}
+                        href={`${import.meta.env.APP_GRAPHQL_DOMAIN}/?redirect_to=${window.location.href}`}
                     >
                         Login
                     </Link>

src/components/Clock/index.tsx

@@ -0,0 +1,100 @@
+import {
+    _cs,
+    encodeDate,
+} from '@togglecorp/fujs';
+import {
+    gql,
+    useQuery,
+} from 'urql';
+
+import DisplayPicture from '#components/DisplayPicture';
+import TextOutput from '#components/TextOutput';
+import {
+    type StandupConductorsQuery,
+    type StandupConductorsQueryVariables,
+} from '#generated/types/graphql';
+
+import styles from './styles.module.css';
+
+const STANDUP_CONDUCTORS = gql`
+    query StandupConductors($date: Date!){
+        private {
+            dailyStandup(date: $date) {
+                conductor {
+                    id
+                    displayName
+                    displayPicture
+                }
+                fallbackConductor {
+                    id
+                    displayName
+                    displayPicture
+                }
+            }
+        }
+    }
+`;
+
+const todayDate = encodeDate(new Date());
+
+function StandupConductors() {
+    const [conductorsResponse] = useQuery<StandupConductorsQuery, StandupConductorsQueryVariables>({
+        query: STANDUP_CONDUCTORS,
+        variables: { date: todayDate },
+        requestPolicy: 'cache-and-network',
+    });
+
+    const standupConductors = conductorsResponse.data?.private.dailyStandup;
+
+    return (
+        <div className={styles.conductors}>
+            <TextOutput
+                className={_cs(
+                    styles.conductorItem,
+                    !standupConductors && styles.hidden,
+                )}
+                label="Standup Lead"
+                valueContainerClassName={styles.conductorValue}
+                value={(
+                    <>
+                        <DisplayPicture
+                            imageUrl={standupConductors?.conductor?.displayPicture}
+                            displayName={standupConductors?.conductor?.displayName ?? 'Anonymous'}
+                        />
+                        <span>
+                            {standupConductors?.conductor?.displayName
+                                ?? 'Anonymous'}
+                        </span>
+                    </>
+                )}
+                block
+                hideLabelColon
+            />
+            <TextOutput
+                className={_cs(
+                    styles.conductorItem,
+                    !standupConductors && styles.hidden,
+                )}
+                label="Acting Lead"
+                valueContainerClassName={styles.conductorValue}
+                value={(
+                    <>
+                        <DisplayPicture
+                            imageUrl={standupConductors
+                                ?.fallbackConductor?.displayPicture}
+                            displayName={standupConductors?.fallbackConductor?.displayName ?? 'Anonymous'}
+                        />
+                        <span>
+                            {standupConductors?.fallbackConductor?.displayName
+                                ?? 'Anonymous'}
+                        </span>
+                    </>
+                )}
+                block
+                hideLabelColon
+            />
+        </div>
+    );
+}
+
+export default StandupConductors;

src/components/Navbar/index.tsx

@@ -0,0 +1,24 @@
+.conductors {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+
+    .conductor-item {
+        display: flex;
+        justify-content: center;
+        gap: var(--spacing-xs);
+
+        &.hidden {
+            visibility: hidden;
+        }
+
+        .conductor-value {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: var(--font-size-lg);
+            font-weight: var(--font-weight-normal);
+            gap: var(--spacing-xs);
+        }
+    }
+}

src/components/StandupConductors/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+interface Props {
+    className?: string;
+    label?: React.ReactNode;
+    labelContainerClassName?: string;
+    description?: React.ReactNode;
+    descriptionContainerClassName?: string;
+    valueContainerClassName?: string;
+    hideLabelColon?: boolean;
+    block?: boolean;
+    value?: React.ReactNode;
+}
+
+function TextOutput(props: Props) {
+    const {
+        className,
+        label,
+        labelContainerClassName,
+        valueContainerClassName,
+        description,
+        descriptionContainerClassName,
+        hideLabelColon,
+        block,
+        value,
+    } = props;
+
+    return (
+        <div
+            className={_cs(
+                styles.textOutput,
+                !hideLabelColon && styles.withLabelColon,
+                // NOTE:
+                // styles.blok is supposed to be styles.block
+                // but we encountered a strange behavior
+                block && styles.blok,
+                className,
+            )}
+        >
+            {label && (
+                <div className={_cs(styles.label, labelContainerClassName)}>
+                    {label}
+                </div>
+            )}
+            <div className={_cs(styles.value, valueContainerClassName)}>
+                {value}
+            </div>
+            {description && (
+                <div className={_cs(styles.description, descriptionContainerClassName)}>
+                    {description}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default TextOutput;

src/components/StandupConductors/styles.module.css

@@ -0,0 +1,37 @@
+.text-output {
+    --spacing: var(--spacing-md);
+    display: flex;
+    align-items: baseline;
+    font-size: var(--font-size-md);
+    gap: var(--spacing-sm);
+
+    &.blok {
+        align-items: initial;
+        flex-direction: column;
+    }
+
+    >.label {
+        color: var(--color-text);
+    }
+
+    >.value {
+        font-weight: var(--font-weight-bold);
+
+        /* Useful for nested text outputs */
+        .text-output {
+            font-weight: var(--font-weight-semibold);
+        }
+    }
+
+    >.description {
+        color: var(--color-text-light);
+    }
+
+    &.with-label-colon {
+        >.label {
+            &:after {
+                content: ':';
+            }
+        }
+    }
+}

src/components/TextOutput/index.tsx

@@ -4,7 +4,7 @@ import { UserMeType } from '#generated/types/graphql';
 
 export type UserAuth = Pick<
     UserMeType,
-    'displayName' | 'displayPicture' | 'email' | 'firstName' | 'id' | 'lastName' | 'isStaff'
+    'displayName' | 'displayPicture' | 'email' | 'firstName' | 'id' | 'lastName' | 'isStaff' | 'loginExpire'
 >;
 
 export interface UserContextProps {

src/components/TextOutput/styles.module.css

@@ -0,0 +1,30 @@
+import {
+    useEffect,
+    useState,
+} from 'react';
+
+function useCurrentDate() {
+    const [dateStr, setDateStr] = useState(() => {
+        const date = new Date();
+        return date;
+    });
+
+    useEffect(
+        () => {
+            const timeout = window.setInterval(
+                () => {
+                    const date = new Date();
+                    setDateStr(date);
+                },
+                5000,
+            );
+            return () => {
+                window.clearInterval(timeout);
+            };
+        },
+        [],
+    );
+    return dateStr;
+}
+
+export default useCurrentDate;