hashes, type safety, alignments

pennlabs · Apr 12, 2024 · 67a8de4 · 67a8de4
1 parent b6f2c1c
commit 67a8de4
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 50 deletions.
diff --git a/frontend/plan/actions/index.js b/frontend/plan/actions/index.js
@@ -850,7 +850,6 @@ export const deleteAlertItem = (sectionId, alertId) => (dispatch) => {
             dispatch(deleteAlertFrontend(sectionId));
         }
     });
-    //     // .catch((error) => console.log(error));
 };
 
 export const fetchAlerts = () => (dispatch) => {
@@ -929,7 +928,6 @@ export const updateContactInfo = (contactInfo) => (dispatch) => {
         if (!res.ok) {
             throw new Error(JSON.stringify(res));
         } else {
-            // update on front end
             dispatch(updateContactInfoFrontend(profile));
         }
     });

diff --git a/frontend/plan/components/CartSection.tsx b/frontend/plan/components/CartSection.tsx
@@ -15,7 +15,6 @@ const CourseDetailsContainer = styled.div`
     flex-grow: 0;
     display: flex;
     flex-direction: column;
-    max-width: 70%;
     text-align: left;
     align-items: left;
 `;
@@ -133,14 +132,11 @@ const CourseCartItem = styled.div<{ lastAdded: boolean; isMobile: boolean }>`
     cursor: pointer;
     user-select: none;
 
-    display: ${(props) => (props.isMobile ? "grid" : "flex")};
+    display: grid;
     flex-direction: row;
-    justify-content: space-around;
     padding: 0.8rem;
     border-bottom: 1px solid #e5e8eb;
-    grid-template-columns: ${(props) =>
-        props.isMobile ? "20% 50% 15% 15%" : ""};
-
+    grid-template-columns: 20% 50% 15% 15%;
     * {
         user-select: none;
     }

diff --git a/frontend/plan/components/alert/AlertButton.tsx b/frontend/plan/components/alert/AlertButton.tsx
@@ -8,7 +8,7 @@ interface AlertButtonProps {
     inAlerts: boolean;
 }
 
-const Bell = styled.button`
+const Button = styled.button`
     color: gray;
     padding: 0;
     border: none;
@@ -21,7 +21,7 @@ const Bell = styled.button`
 
 const AlertButton: React.FC<AlertButtonProps> = ({ alerts, inAlerts }) => {
     return(
-        <Bell
+        <Button
             role="button"
             onClick={(event) => {
                 event.stopPropagation();
@@ -36,7 +36,7 @@ const AlertButton: React.FC<AlertButtonProps> = ({ alerts, inAlerts }) => {
                 style={{ fontSize: "1rem" }}
                 className={inAlerts ? "fas fa-bell": "far fa-bell"}
             />
-        </Bell>
+        </Button>
     )
 }
 

diff --git a/frontend/plan/components/alert/AlertSection.tsx b/frontend/plan/components/alert/AlertSection.tsx
@@ -13,7 +13,6 @@ const CourseDetailsContainer = styled.div`
     flex-grow: 0;
     display: flex;
     flex-direction: column;
-    max-width: 70%;
     text-align: left;
     align-items: left;
 `;
@@ -108,14 +107,10 @@ const AlertItem = styled.div<{ isMobile: boolean }>`
     transition: 250ms ease background;
     user-select: none;
 
-    display: ${(props) => (props.isMobile ? "grid" : "flex")};
-    flex-direction: row;
-    justify-content: space-around;
+    display: grid;
     padding: 0.8rem;
     border-bottom: 1px solid #e5e8eb;
-    grid-template-columns: ${(props) =>
-        props.isMobile ? "20% 50% 15% 15%" : ""};
-
+    grid-template-columns: 20% 50% 15% 15%;
     * {
         user-select: none;
     }
@@ -142,15 +137,10 @@ const AlertSection: React.FC<AlertSectionProps> = ({
             aria-checked="false"
             isMobile={isMobile}
         >
-            <div style={{
-                alignItems: "center",
-                display: "flex",
-            }}>
                 <AlertButton
                     alerts={alerts}
                     inAlerts={inAlerts}
                 />
-            </div>
             <CourseDetails alert={alert} />
             <CourseInfoButton courseInfo={courseInfo} />
             <CourseTrashCan remove={(event) => {

diff --git a/frontend/plan/pages/index.tsx b/frontend/plan/pages/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import Head from "next/head";
 import { Provider } from "react-redux";
-import { applyMiddleware, createStore } from "redux";
+import { applyMiddleware, compose, createStore } from "redux";
 import thunkMiddleware from "redux-thunk";
 import SwipeableViews from "react-swipeable-views";
 import Tabs from "@material-ui/core/Tabs";
@@ -95,7 +95,7 @@ const Toast = styled(ToastContainer)`
     }
 `;
 
-const CartTab = styled.h3<{ active: boolean }>`
+const CartTab = styled.a<{ active: boolean }>`
     display: inline-flex;
     font-weight: bold;
     margin-bottom: 0.5rem;
@@ -123,6 +123,15 @@ export function showToast(text: string, error: boolean) {
     }
 }
 
+enum TabItem {
+    Cart = "cart-tab",
+    Alerts = "alerts-tab"
+}
+
+const tabItems = [
+    { item: TabItem.Cart, name: "Cart", component: Cart},
+    { item: TabItem.Alerts, name: "Alerts", component: Alerts},]
+
 function Index() {
     const router = useRouter();
 
@@ -146,12 +155,11 @@ function Index() {
     const scrollTop = () => window.scrollTo(0, 0);
     const isExpanded = view === 1;
 
-    // cart vs alerts
-    const [showAlerts, setShowAlerts] = useState(false);
+    const [selectedTab, setSelectedTab] = useState<TabItem>(TabItem.Cart);
     useEffect(() => {
-        const hash = router.asPath.split("#")[1];
-        setShowAlerts(hash === "alerts");
-    }, [setShowAlerts]);
+        setSelectedTab(router.asPath.split("#")[1] === TabItem.Alerts ? TabItem.Alerts : TabItem.Cart);
+    }, []);
+
 
     const [showLoginModal, setShowLoginModal] = useState(true);
 
@@ -203,6 +211,8 @@ function Index() {
         }
     }, [store]);
 
+    const TabContent = tabItems.find(({item}) => item === selectedTab)?.component
+
     const headPreamble = (
         <Head>
             <meta charSet="utf-8" />
@@ -420,29 +430,17 @@ function Index() {
                                 }}
                             >
                                 <div>
+                                    {tabItems.map(({item, name}) => (
                                     <CartTab
-                                        active={!showAlerts}
-                                        onClick={() => {
-                                            setShowAlerts(false);
-                                            router.replace("/#cart", undefined, { shallow: true })
-                                        }}
+                                        key={item}
+                                        href={`/#${item}`}
+                                        active={selectedTab === item}
+                                        onClick={() => setSelectedTab(item)}
                                     >
-                                        Cart
-                                    </CartTab>
-                                    <CartTab
-                                        active={showAlerts}
-                                        onClick={() => {
-                                            setShowAlerts(true);
-                                            router.replace("/#alerts", undefined, { shallow: true })
-                                        }}
-                                    >
-                                        Alerts
-                                    </CartTab>
+                                        {name}
+                                        </CartTab>))}
                                 </div>
-                                {showAlerts ? 
-                                    <Alerts mobileView={false} /> :
-                                    <Cart mobileView={false} />
-                                }
+                                {typeof TabContent !== "undefined" && <TabContent mobileView={false} />}
                             </div>
                             <div
                                 style={{