Use remainingDaysToStart for upcoming events

toggle-corp · Sep 6, 2024 · 6b825e9 · 6b825e9
1 parent e882d5b
commit 6b825e9
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 77 deletions.
diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -52,7 +52,6 @@ export interface GeneralEvent {
     typeDisplay: string;
     icon: React.ReactNode;
     name: string;
-    date: string;
     remainingDays: number;
 }
 

diff --git a/src/views/DailyJournal/DayView/styles.module.css b/src/views/DailyJournal/DayView/styles.module.css
@@ -75,7 +75,7 @@
         .joined-heading {
             display: flex;
             align-items: center;
-            gap: var(--spacing-md);
+            gap: var(--spacing-sm);
             color: var(--color-text-light);
             font-weight: var(--font-weight-semibold);
 

diff --git a/src/views/DailyJournal/index.tsx b/src/views/DailyJournal/index.tsx
@@ -660,6 +660,22 @@ export function Component() {
                     >
                         <IoCalendarOutline />
                     </CalendarInput>
+                    {entriesWithoutTask > 0 && (
+                        <div className={styles.warningBadge}>
+                            <FcHighPriority />
+                            <span>
+                                {`${entriesWithoutTask} uncategorized`}
+                            </span>
+                        </div>
+                    )}
+                    {entriesWithoutHours > 0 && (
+                        <div className={styles.warningBadge}>
+                            <FcHighPriority />
+                            <span>
+                                {`${entriesWithoutHours} untracked`}
+                            </span>
+                        </div>
+                    )}
                     <div className={styles.spacer} />
                     <Button
                         name={undefined}
@@ -708,26 +724,6 @@ export function Component() {
                     selectedDate={selectedDate}
                 />
             </FocusContext.Provider>
-            {entriesWithoutTask + entriesWithoutHours > 0 && (
-                <div className={styles.warning}>
-                    {entriesWithoutTask > 0 && (
-                        <div className={styles.warningBadge}>
-                            <FcHighPriority />
-                            <span>
-                                {`${entriesWithoutTask} uncategorized entries`}
-                            </span>
-                        </div>
-                    )}
-                    {entriesWithoutHours > 0 && (
-                        <div className={styles.warningBadge}>
-                            <FcHighPriority />
-                            <span>
-                                {`${entriesWithoutHours} untracked entries`}
-                            </span>
-                        </div>
-                    )}
-                </div>
-            )}
             <div className={styles.bottomActions}>
                 <Button
                     name={undefined}

diff --git a/src/views/DailyJournal/styles.module.css b/src/views/DailyJournal/styles.module.css
@@ -28,21 +28,6 @@
         }
     }
 
-    .warning {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--spacing-sm);
-
-        .warning-badge {
-            display: flex;
-            flex-shrink: 0;
-            border: 1px solid var(--color-separator);
-            border-radius: var(--border-radius-lg);
-            padding: var(--spacing-xs) var(--spacing-sm);
-            gap: var(--spacing-xs);
-        }
-    }
-
     .bottom-actions {
         display: flex;
         gap: var(--spacing-sm);
@@ -60,6 +45,15 @@
     width: 100%;
     gap: var(--spacing-xs);
 
+    .warning-badge {
+        display: flex;
+        flex-shrink: 0;
+        border: 1px solid var(--color-separator);
+        border-radius: var(--border-radius-lg);
+        padding: var(--spacing-2xs) var(--spacing-sm);
+        gap: var(--spacing-xs);
+    }
+
     .spacer {
         flex-grow: 1;
     }

diff --git a/...views/DailyStandup/GeneralEvent/index.tsx → ...up/DeadlineSection/GeneralEvent/index.tsx b/...views/DailyStandup/GeneralEvent/index.tsx → ...up/DeadlineSection/GeneralEvent/index.tsx
diff --git a/...ilyStandup/GeneralEvent/styles.module.css → ...ineSection/GeneralEvent/styles.module.css b/...ilyStandup/GeneralEvent/styles.module.css → ...ineSection/GeneralEvent/styles.module.css
diff --git a/src/views/DailyStandup/DeadlineSection/index.tsx b/src/views/DailyStandup/DeadlineSection/index.tsx
@@ -9,10 +9,7 @@ import {
     FcNightLandscape,
     FcSportsMode,
 } from 'react-icons/fc';
-import {
-    compareDate,
-    getDifferenceInDays,
-} from '@togglecorp/fujs';
+import { compareNumber } from '@togglecorp/fujs';
 import {
     gql,
     useQuery,
@@ -24,8 +21,8 @@ import {
 } from '#generated/types/graphql';
 import { type GeneralEvent } from '#utils/types';
 
-import GeneralEventOutput from '../GeneralEvent';
 import Slide from '../Slide';
+import GeneralEventOutput from './GeneralEvent';
 
 import styles from './styles.module.css';
 
@@ -50,19 +47,13 @@ const DEADLINES_AND_EVENTS = gql`
                     id
                     name
                     remainingDays
-                    endDate
-                    totalDays
-                    usedDays
-                    projectId
                 }
             }
             relativeEvents {
                 id
                 name
-                startDate
+                remainingDaysToStart
                 typeDisplay
-                dates
-                endDate
                 type
             }
         }
@@ -112,7 +103,6 @@ function DeadlineSection(props: Props) {
                 typeDisplay: 'Deadline',
                 icon: iconsMap.DEADLINE,
                 name: deadline.name,
-                date: deadline.endDate,
                 remainingDays: deadline.remainingDays,
             })) ?? []),
             ...(events?.map((otherEvent) => ({
@@ -121,14 +111,10 @@ function DeadlineSection(props: Props) {
                 icon: iconsMap[otherEvent.type],
                 typeDisplay: otherEvent.typeDisplay,
                 name: otherEvent.name,
-                date: otherEvent.startDate,
-                remainingDays: getDifferenceInDays(
-                    otherEvent.startDate,
-                    date,
-                ),
+                remainingDays: otherEvent.remainingDaysToStart,
             })) ?? []),
-        ].sort((a, b) => compareDate(a.date, b.date));
-    }, [events, projects, date]);
+        ].sort((a, b) => compareNumber(a.remainingDays, b.remainingDays));
+    }, [events, projects]);
 
     return (
         <Slide

diff --git a/...ews/DailyStandup/ProjectStandup/index.tsx → ...ews/DailyStandup/ProjectSection/index.tsx b/...ews/DailyStandup/ProjectStandup/index.tsx → ...ews/DailyStandup/ProjectSection/index.tsx
@@ -48,15 +48,6 @@ const DAILY_STANDUP_QUERY = gql`
                     project {
                         id
                         name
-                        description
-                        deadlines {
-                            id
-                            name
-                            startDate
-                            totalDays
-                            usedDays
-                            remainingDays
-                        }
                         logoHd {
                             url
                         }
@@ -73,17 +64,12 @@ const DAILY_STANDUP_QUERY = gql`
                         }
                     }
                 }
-                quote {
-                    id
-                    text
-                    author
-                }
             }
         }
     }
 `;
 
-function ProjectStandup(props: Props) {
+function ProjectSection(props: Props) {
     const {
         projectId,
         date,
@@ -110,7 +96,7 @@ function ProjectStandup(props: Props) {
     return (
         <Slide
             variant="split"
-            className={_cs(styles.projectStandup, className)}
+            className={_cs(styles.projectSection, className)}
             primaryPreText={isDefined(stats?.project.logoHd) && (
                 <img
                     className={styles.projectIcon}
@@ -145,4 +131,4 @@ function ProjectStandup(props: Props) {
     );
 }
 
-export default ProjectStandup;
+export default ProjectSection;
diff --git a/...yStandup/ProjectStandup/styles.module.css → ...yStandup/ProjectSection/styles.module.css b/...yStandup/ProjectStandup/styles.module.css → ...yStandup/ProjectSection/styles.module.css
@@ -1,4 +1,4 @@
-.project-standup {
+.project-section {
     .project-icon {
         width: 10rem;
         height: 10rem;

diff --git a/src/views/DailyStandup/index.tsx b/src/views/DailyStandup/index.tsx
@@ -37,7 +37,7 @@ import useUrlQueryState from '#hooks/useUrlQueryState';
 
 import DeadlineSection from './DeadlineSection';
 import EndSection from './EndSection';
-import ProjectStandup from './ProjectStandup';
+import ProjectSection from './ProjectSection';
 import StartSection from './StartSection';
 
 import styles from './styles.module.css';
@@ -281,7 +281,7 @@ export function Component() {
                     />
                 )}
                 {mapId !== 'start' && mapId !== 'end' && mapId !== 'deadlines' && (
-                    <ProjectStandup
+                    <ProjectSection
                         date={selectedDate}
                         projectId={mapId}
                     />