Nirmal MVP Finalization

SDCTA/package.json

@@ -19,7 +19,6 @@
     "firebase": "^9.16.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.0",
-    "react-country-dropdown": "^1.1.0",
     "react-country-region-selector": "^3.6.1",
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",

SDCTA/src/api/auth.ts

@@ -1,4 +1,5 @@
 import type { UserCredential } from "firebase/auth";
+import { type User } from "./data";
 import {
   signInWithEmailAndPassword,
   setPersistence,
@@ -114,7 +115,7 @@ const loginUser = async (
   }
 };
 
-const getUser = async (email: any): Promise<any> => {
+const getUser = async (email: string): Promise<User | null> => {
   const requestOptions = {
     method: "GET",
     headers: { "Content-Type": "application/json" },
@@ -125,7 +126,7 @@ const getUser = async (email: any): Promise<any> => {
   if (response.status === 404) {
     return null;
   }
-  return await response.json();
+  return (await response.json()) as User;
 };
 
 const provider = new GoogleAuthProvider();

SDCTA/src/api/consumer.ts

@@ -1,20 +1,20 @@
-import { type VisualizationObject } from "./data";
-import { useDispatch } from "react-redux";
-
-export const API_URL = process.env.REACT_APP_API_URL;
-export const GET_VIS = `${API_URL ?? "http://localhost:3001"}/visualization`;
+import { type Visualization, type Category, type UserDetails } from "./data";
+export const API_URL = process.env.REACT_APP_API_URL ?? "";
+export const GET_VIS = `${API_URL}/visualization`;
+export const CATEGORY_PREFIX = `${API_URL}/category`;
+export const USER_PREFIX = `${API_URL}/user`;
 
 export const getVisByTitle = async (
   title: string
-): Promise<VisualizationObject | null> => {
+): Promise<Visualization | null> => {
   try {
     const url = `${GET_VIS}/${encodeURIComponent(title)}`;
     const response = await fetch(url);
     if (!response.ok) {
       throw new Error(`${response.status} Failed Fetch `);
     }
     let data = await response.json();
-    data = data as VisualizationObject;
+    data = data as Visualization;
     return data;
   } catch (err) {
     console.error("Exception", err);
@@ -42,39 +42,40 @@ export const getCsvByTitle = async (title: string): Promise<void> => {
   }
 };
 
-interface userDetails {
-  phone?: string;
-  address?: string;
-  city?: string;
-  state?: string;
-  zipCode?: string;
-  country?: string;
-}
-
 const updateUserDetails = async (
   emailIn: string,
-  userDetails: userDetails
+  userDetails: UserDetails
 ): Promise<Response> => {
   const updateRequestOptions = {
     method: "PATCH",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(userDetails),
   };
-
-  const requestLink = "http://localhost:3001/user/";
-
   const response = await fetch(
-    requestLink.concat(emailIn),
+    `${USER_PREFIX}/${emailIn}`,
     updateRequestOptions
   );
-  const dispatch = useDispatch();
+  // const dispatch = useDispatch();
 
-  dispatch({
-    type: "STORE_USER",
-    payload: emailIn,
-  });
+  // dispatch({
+  //   type: "STORE_USER",
+  //   payload: emailIn,
+  // });
 
   return response;
 };
 
+export const getCategoryByName = async (
+  categoryName: string
+): Promise<Category | null> => {
+  try {
+    const url = `${CATEGORY_PREFIX}/${categoryName}`;
+    const response = await fetch(url);
+    const data = await response.json();
+    return data as Category;
+  } catch {
+    return null;
+  }
+};
+
 export { updateUserDetails };

SDCTA/src/api/data.ts

@@ -1,6 +1,34 @@
-export interface VisualizationObject {
+export interface Visualization {
   title: string;
   analysis: string;
   link: string;
   hasCSV: boolean;
 }
+
+export interface Category {
+  _id: string;
+  name: string;
+  visualizations: Visualization[];
+}
+
+export interface User {
+  firstName?: string;
+  lastName?: string;
+  email: string;
+  compName?: string;
+  phone?: string;
+  address?: string;
+  city?: string;
+  state?: string;
+  zipCode?: string;
+  country?: string;
+}
+
+export interface UserDetails {
+  phone?: string;
+  address?: string;
+  city?: string;
+  state?: string;
+  zipCode?: string;
+  country?: string;
+}

SDCTA/src/app/store.ts

@@ -6,6 +6,8 @@ import {
 import loginReducer from "../slices/loginSlice";
 import subscribeReducer from "../slices/subscribeSlice";
 import createSagaMiddleware from "redux-saga";
+import categoryReducer from "../slices/categorySlice";
+import rootSaga from "../sagas/rootSaga";
 import registerSaga from "../sagas/authSaga";
 
 // Create the saga middleware
@@ -16,14 +18,15 @@ export const store = configureStore({
   reducer: {
     login: loginReducer,
     subscribe: subscribeReducer,
+    category: categoryReducer,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(middleware),
 });
 
 // Then run the saga
 // uncomment when root saga is made
-sagaMiddleware.run(registerSaga);
+sagaMiddleware.run(rootSaga);
 
 export type AppDispatch = typeof store.dispatch;
 export type RootState = ReturnType<typeof store.getState>;

SDCTA/src/components/ErrorBoundary.jsx

@@ -1,9 +1,3 @@
-{
-  /* This file is .jsx instead of .tsx because of the use of class. This is used only when
-  TableauEmbed gets an invalid URL and crashes but should likely not happen because 
-  URLs that we use and get are from our backend which would be already verified.  */
-}
-
 import React from "react";
 import { Error404 } from "../components/404";
 

SDCTA/src/components/Landing_Page/Body.tsx

@@ -1,21 +1,26 @@
 import "./body.css";
+import { useNavigate } from "react-router-dom";
 
 const landscape = "./Images/Landing_Image.jpg";
 const EducationVis = "./Images/Education_Standin.png";
 const HomelessnessVis = "./Images/Homelessness_Standin.png";
 const MunicipalVis = "./Images/Municipal_Standin.png";
 
 export const Body: React.FC = () => {
+  const navigate = useNavigate();
   return (
     <>
       <div>
         <div className="heading">SDTEF Data Museum</div>
         <div className="description">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, sed do eiusmod tempor
-          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+          Welcome to the San Diego Taxpayers Educational Foundation data museum!
+          This is SDTEF&apos;s repository for data on all things local public
+          administration. Here you&apos;ll find a comprehensive quantitative
+          picture of funding for important local public goods, such as
+          homelessness services and education! Each data exhibit includes
+          details on the appropriate uses and limitations of the data. If you
+          have any questions about our data, you can contact us at
+          [email protected].
         </div>
         <div className="imgbox">
           <img className="center-fit" src={landscape} alt="sd landscape" />
@@ -26,7 +31,14 @@ export const Body: React.FC = () => {
           <div className="img">
             <img src={EducationVis} alt="Education Visualization"></img>
           </div>
-          <div className="image_line-heading">Education</div>
+          <div
+            onClick={() => {
+              navigate("/Education");
+            }}
+            className="image_line-heading"
+          >
+            Education
+          </div>
           <div className="image_line-description">
             Lorem ipsum dolor sit amet, sed do consectetur adipiscing elit, sed
             do eiusmod tempor incididunt ut labore et
@@ -36,7 +48,14 @@ export const Body: React.FC = () => {
           <div className="img">
             <img src={HomelessnessVis} alt="Homelessness Visualization"></img>
           </div>
-          <div className="image_line-heading">Homelessness</div>
+          <div
+            onClick={() => {
+              navigate("/Homelessness");
+            }}
+            className="image_line-heading"
+          >
+            Homelessness
+          </div>
           <div className="image_line-description">
             Lorem ipsum dolor sit amet, sed do consectetur adipiscing elit, sed
             do eiusmod tempor incididunt ut labore et
@@ -46,7 +65,14 @@ export const Body: React.FC = () => {
           <div className="img">
             <img src={MunicipalVis} alt="Municipal Visualization"></img>
           </div>
-          <div className="image_line-heading">Municipal</div>
+          <div
+            onClick={() => {
+              navigate("/Municipal");
+            }}
+            className="image_line-heading"
+          >
+            Municipal
+          </div>
           <div className="image_line-description">
             Lorem ipsum dolor sit amet, sed do consectetur adipiscing elit, sed
             do eiusmod tempor incididunt ut labore et

SDCTA/src/components/Landing_Page/body.css

@@ -78,6 +78,7 @@ body {
   align-items: center;
   padding-top: 24px;
   padding-bottom: 16px;
+  cursor: pointer;
 }
 
 .image_line-description {

SDCTA/src/components/Membership.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+const membershipPic = "/Images/membership-status.png";
+
+export const Membership: React.FC = () => {
+  const [readMore, setReadMore] = useState(false);
+  const navigate = useNavigate();
+
+  const extraContent = (
+    <text>
+      <li>
+        Participate in the <b>Issues Sub-Committee</b>
+      </li>
+      <li>
+        Receive major <b>event ticket discounts</b>, invitations to{" "}
+        <b>VIP events</b>, and invitations to <b>friendraisers</b> at Board
+        Members’ houses
+      </li>
+      <li>
+        <b>Chair events</b> and membership committees
+      </li>
+      <li>
+        Eligibility to be nominated to serve on the <b>Board of Directors</b>{" "}
+        and the <b>Executive or Rules Committee</b>
+      </li>
+    </text>
+  );
+
+  const linkName = readMore ? "See less benefits" : "See more benefits";
+
+  const handleMembership = (event: any): void => {
+    event.preventDefault();
+    navigate("/Subscribe");
+  };
+
+  // const [isDisabled, setIsDisabled] = useState(false);
+
+  return (
+    <div className="membership">
+      <h1>
+        <b>Membership Information</b>
+      </h1>
+      <p>
+        Membership Level: <span style={{ color: "#7F1922" }}>Free</span> <br />{" "}
+        Organization Type: N/A
+      </p>
+      <img
+        src={membershipPic}
+        alt="membership-graph"
+        width="814.8px"
+        height="120px"
+      />
+      <h2>
+        <b>Why should I upgrade my membership?</b>
+      </h2>
+      <ul>
+        <li>
+          Access to <b>exclusive data visualizations</b>
+        </li>
+        <li>
+          Serve on the <b>Oversight Committee</b>
+        </li>
+        <li>
+          Access to <b>Watchdog Alerts</b>
+        </li>
+        <li>
+          Eligibility to be featured in the <b>members-only newsletter</b>
+        </li>
+
+        {readMore && extraContent}
+      </ul>
+      <a
+        className="read-more-link"
+        onClick={() => {
+          setReadMore(!readMore);
+        }}
+      >
+        <u style={{ color: "#C3272E", cursor: "pointer" }}>{linkName}</u>
+        <br />
+      </a>
+
+      <button className="change-membership" onClick={handleMembership}>
+        Change Membership
+      </button>
+    </div>
+  );
+};