From a4b8ff1f65e03cdcef9dffbfdabb2bd528f8ff47 Mon Sep 17 00:00:00 2001
From: "Jihun (James) Doh" <dohj0109@sas.upenn.edu>
Date: Tue, 19 Nov 2024 17:19:10 -0500
Subject: [PATCH] frontend bug fixes + colored dot next to course items in map
 view

---
 .../plan/components/map/MapCourseItem.tsx     | 20 ++++--
 frontend/plan/components/map/MapTab.tsx       | 61 ++++++++++---------
 frontend/plan/components/schedule/Block.tsx   | 40 ++++++------
 3 files changed, 68 insertions(+), 53 deletions(-)

diff --git a/frontend/plan/components/map/MapCourseItem.tsx b/frontend/plan/components/map/MapCourseItem.tsx
index f74a3d62c..46adfaa35 100644
--- a/frontend/plan/components/map/MapCourseItem.tsx
+++ b/frontend/plan/components/map/MapCourseItem.tsx
@@ -6,8 +6,8 @@ const CourseCartItem = styled.div<{ $isMobile: boolean }>`
     transition: 250ms ease background;
     cursor: pointer;
     user-select: none;
-
-    flex-direction: row;
+    display: flex;
+    align-items: center;
     padding: 0.8rem;
     border-bottom: 1px solid #e5e8eb;
     grid-template-columns: 20% 50% 15% 15%;
@@ -28,6 +28,15 @@ const CourseCartItem = styled.div<{ $isMobile: boolean }>`
 
 const CourseDetailsContainer = styled.div``;
 
+const Dot = styled.span<{ $color: string }>`
+    height: 5px;
+    width: 5px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 10px;
+    background-color: ${({ $color }) => $color};
+`;
+
 interface CourseDetailsProps {
     id: string;
     start: number;
@@ -91,8 +100,7 @@ const CourseDetails = ({
 
 interface CartSectionProps {
     id: string;
-    lat?: number;
-    lng?: number;
+    color: string;
     start: number;
     end: number;
     room: string;
@@ -102,8 +110,7 @@ interface CartSectionProps {
 
 function MapCourseItem({
     id,
-    lat,
-    lng,
+    color,
     start,
     end,
     room,
@@ -121,6 +128,7 @@ function MapCourseItem({
                 focusSection(`${split[0]}-${split[1]}`);
             }}
         >
+            <Dot $color={color} />
             <CourseDetails
                 id={id}
                 start={start}
diff --git a/frontend/plan/components/map/MapTab.tsx b/frontend/plan/components/map/MapTab.tsx
index 4118e0047..b95d5f17d 100644
--- a/frontend/plan/components/map/MapTab.tsx
+++ b/frontend/plan/components/map/MapTab.tsx
@@ -55,6 +55,11 @@ const MapContainer = styled.div`
     margin-top: 5px;
 `;
 
+const MapCourseItemcontainer = styled.div`
+    height: 60%;
+    overflow-y: auto;
+`;
+
 interface MabTapProps {
     meetingsByDay: Record<Day, Meeting[]>;
     focusSection: (id: string) => void;
@@ -120,34 +125,34 @@ function MapTab({ meetingsByDay, focusSection }: MabTapProps) {
                             zoom={15}
                         />
                     </MapContainer>
-                    {meeetingsForDay.map(
-                        (
-                            {
-                                id,
-                                latitude,
-                                longitude,
-                                start,
-                                end,
-                                room,
-                                overlap,
-                            }: Meeting,
-                            i: number
-                        ) => {
-                            return (
-                                <MapCourseItem
-                                    key={id + i} // handle same class more than once/day (e.g. PHYS)
-                                    id={id}
-                                    lat={latitude}
-                                    lng={longitude}
-                                    start={start}
-                                    end={end}
-                                    room={room}
-                                    overlap={overlap!}
-                                    focusSection={focusSection}
-                                />
-                            );
-                        }
-                    )}
+                    <MapCourseItemcontainer>
+                        {meeetingsForDay.map(
+                            (
+                                {
+                                    id,
+                                    color,
+                                    start,
+                                    end,
+                                    room,
+                                    overlap,
+                                }: Meeting,
+                                i: number
+                            ) => {
+                                return (
+                                    <MapCourseItem
+                                        key={id + i} // handle same class more than once/day (e.g. PHYS)
+                                        id={id}
+                                        color={color}
+                                        start={start}
+                                        end={end}
+                                        room={room}
+                                        overlap={overlap!}
+                                        focusSection={focusSection}
+                                    />
+                                );
+                            }
+                        )}
+                    </MapCourseItemcontainer>
                 </>
             )}
         </Box>
diff --git a/frontend/plan/components/schedule/Block.tsx b/frontend/plan/components/schedule/Block.tsx
index d928659cf..8f423c3d4 100644
--- a/frontend/plan/components/schedule/Block.tsx
+++ b/frontend/plan/components/schedule/Block.tsx
@@ -120,26 +120,28 @@ export default function Block(props: BlockProps) {
     };
     return (
         <GridBlock style={{ ...pos }}>
-            <VisibleBlock
-                color={color}
-                role="button"
-                style={style}
-                onClick={focusSection}
-            >
-                <InnerBlock>
-                    {!isMobile && !readOnly && (
-                        <RemoveButton
-                            onClick={(e) => {
-                                remove();
-                                e.stopPropagation();
-                            }}
-                        />
-                    )}
-                    {false && !coreqFulfilled && <CoreqWarning />}
+            {color && (
+                <VisibleBlock
+                    color={color}
+                    role="button"
+                    style={style}
+                    onClick={focusSection}
+                >
+                    <InnerBlock>
+                        {!isMobile && !readOnly && (
+                            <RemoveButton
+                                onClick={(e) => {
+                                    remove();
+                                    e.stopPropagation();
+                                }}
+                            />
+                        )}
+                        {false && !coreqFulfilled && <CoreqWarning />}
 
-                    <span>{id.replace(/-/g, " ")}</span>
-                </InnerBlock>
-            </VisibleBlock>
+                        <span>{id.replace(/-/g, " ")}</span>
+                    </InnerBlock>
+                </VisibleBlock>
+            )}
         </GridBlock>
     );
 }