TritonSE · SamvritSrinath · Jan 17, 2023 · Jan 24, 2023 · Jan 24, 2023 · Jan 24, 2023
@@ -21,7 +21,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^6.7.0",
+    "react-router-dom": "^6.8.2",
     "react-scripts": "5.0.1",
     "redux-saga": "^1.2.2",
     "web-vitals": "^2.1.4"

@@ -27,6 +27,8 @@
     <title>React Redux App</title>
   </head>
   <body>
+    <script type = "text/javascript" src = "https:public.tableau.com/javascripts/api/tableau-2.min.js"></script>
+
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

@@ -19,39 +19,3 @@
 .opensans {
   font-family: "Open Sans", sans-serif;
 }
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
@@ -1,13 +1,26 @@
 import "./App.css";
 import { Routes } from "./components/Routes";
+import TableauEmbed from "./components/TableauEmbed";
+import { Education } from "./pages/Education";
+import { LandingPage } from "./pages/LandingPage";
 
+declare global{
+	interface Window{
+		tableau: any
+	}
+}
 const App: React.FC = () => {
   return (
     <>
       <Routes />
-      <div className="App"></div>
+	  {/* <LandingPage /> */}
+      {/* <div className="App">
+		<Education />
+	  </div> */}
     </>
   );
 };
 
 export default App;
+
+
@@ -0,0 +1,32 @@
+import {call , put, takeEvery, takeLatest} from 'redux-saga/effects';
+import { PayloadAction } from '@reduxjs/toolkit';
+import {changeCategory, loadCategory, CategoryType} from '../slices/CategorySlice';
+import { Category, Visualization} from '../api/data';
+
+
+
+
+
+
+function* watchChangeCategory(action: PayloadAction<Category>){
+	try{
+		const visualizations: Array<Visualization> = yield call(fetch, "http://localhost:3001/category/" + action.payload);
+		console.log(action.payload);
+		console.log("http://localhost:3001/category/"+ action.payload);
+		const newCategory: Category = {...action.payload, visualizations};
+
+		yield put(loadCategory(newCategory));
+	}catch(e){
+		console.log(e);
+		console.log(action.payload._id);
+	}
+}
+
+function* watchLoadCategory(){
+	yield takeLatest(changeCategory.type, watchChangeCategory);
+}
+
+export default function* categorySaga(){
+	yield watchLoadCategory();
+}
+
@@ -0,0 +1,15 @@
+import {Category} from './data'
+export const CategoryPrefix = `http://localhost:3001/category`;
+export const getCategoryByName = async(categoryName: string) : Promise<Category | null> => {
+	try {
+		const url = `${CategoryPrefix}/${categoryName}`;
+		const response = await fetch(url);
+		let data = await response.json();
+		console.log((data as Category))
+
+		return (data as Category);
+
+	}catch {
+		return null;
+	}
+}
@@ -0,0 +1,17 @@
+export interface Category {
+	_id: string;	
+	name: string;
+	visualizations: Array<Visualization>;
+}
+
+export interface Visualization{
+	_id: string;
+	title: string;
+	analysis: string;
+	link: string;
+}
+
+export interface changeCategoryPayload {
+	oldCategory: Category;
+	newCategory: Category;
+}
@@ -6,6 +6,8 @@ import {
 import loginReducer from "../slices/loginSlice";
 import subscribeReducer from "../slices/subscribeSlice";
 import createSagaMiddleware from "redux-saga";
+import tableauReducer from "../slices/CategorySlice"
+import categorySaga from "../Sagas/CategorySagas";
 
 // Create the saga middleware
 const sagaMiddleware = createSagaMiddleware();
@@ -15,14 +17,16 @@ export const store = configureStore({
   reducer: {
     login: loginReducer,
     subscribe: subscribeReducer,
+	changeCategory: tableauReducer,
+
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(middleware),
 });
 
 // Then run the saga
 // uncomment when root saga is made
-// sagaMiddleware.run(rootSaga)
+sagaMiddleware.run(categorySaga);
 
 export type AppDispatch = typeof store.dispatch;
 export type RootState = ReturnType<typeof store.getState>;

@@ -0,0 +1,60 @@
+import landscape from '../Images/unsplash_dsV4yvL5UJk.jpg';
+//import EdVis from '../Images/Graph.jpg';
+import './body.css'
+import EducationVis from '../Images/Education_Standin.png';
+import HomelessnessVis from '../Images/Homelessness_Standin.png';
+import MunicipalVis from '../Images/Municipal_Standin.png'
+
+
+export const Body = () => {
+	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,
+			</div>
+            <div className="imgbox">
+                <img className="center-fit" src={landscape} alt="sd landscape" />
+            </div>
+		</div>
+			<div className="box" >
+				<div className="one">
+					<div className='img' >
+						<a href="../pages/Education.tsx">
+							<img src={EducationVis} alt="Education Visualization" ></img>
+						</a>	
+					</div>
+					<div className="box-heading" >
+						Education
+					</div>
+					<div className="box-description" >
+						Lorem ipsum dolor sit amet, sed do consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+					</div>
+				</div>
+				<div className="two">
+					<div className='img' >
+						<img src={HomelessnessVis} alt="Homelessness Visualization" ></img>
+						</div>
+					<div className="box-heading" >
+						Homelessness
+					</div>
+					<div className="box-description" >
+						Lorem ipsum dolor sit amet, sed do consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+					</div>
+				</div>
+				<div className="three">
+				<div className='img' >
+						<img src={MunicipalVis} alt="Municipal Visualization" ></img>
+						</div>
+					<div className="box-heading" >
+						Municipal
+					</div>
+					<div className="box-description" >
+						Lorem ipsum dolor sit amet, sed do consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+					</div>
+				</div>
+			</div> </>
+	)
+};
@@ -0,0 +1,67 @@
+/* Footer Styling */
+.footer {
+	display: flex;
+	justify-content: space-between;
+	/* align-items: flex-end; */
+	padding: 40px;
+
+	/* padding-bottom: 50px; */
+
+	background-color: #7F1922;
+	font-size: 18px;
+}
+
+.footer-left {
+	width: 55%;
+
+}
+
+.footer-left h3 {
+	margin: 0;
+	color: white;
+	font-weight: 700;
+	padding-bottom: 10px;
+	font-weight: bold;
+}
+
+.footer-left p {
+	margin: 10px 0 0 0;
+	font-weight: 400;
+	color: white;
+
+}
+
+.footer-right {
+	width: 20%;
+	text-align: right;
+}
+
+.address {
+	margin-bottom: 20px;
+}
+
+.address p {
+	margin: 0;
+	text-indent: 10px;
+	line-height: 27px;
+	text-align: left;
+	color: white;
+}
+
+.social-icons {
+	margin-top: -5px;
+	display: flex;
+	align-items: flex-start;
+}
+
+.social-icons a {
+	margin-left: 12px;
+	color: #7F1922;
+	text-decoration: none;
+
+}
+
+.social-icons .icon {
+	font-size: 20px;
+	color: white;
+}
@@ -0,0 +1,36 @@
+import { FaFacebookF, FaTwitter, FaInstagram, FaYoutube } from 'react-icons/fa';
+import './Footer.css';
+
+export const Footer = () => {
+	return (
+		<footer className="footer">
+			<div className="footer-left">
+				<h3>San Diego Taxpayers Association</h3>
+				<p>The San Diego Taxpayers Educational Foundation conducts independent research studies on various issue areas to educate San Diegans and inform the advocacy efforts of the Association.</p>
+			</div>
+			<div className="footer-right">
+				<div className="address">
+					<p>2508 Historic Decatur Rd. #220</p>
+					<p>San Diego, CA 92106</p>
+
+					<p>Contact: [email protected]</p>
+				</div>
+				<div className="social-icons">
+					<a href="https://www.facebook.com/sdcta">
+						<FaFacebookF className="icon" />
+					</a>
+					<a href="https://twitter.com/sdcta">
+						<FaTwitter className="icon" />
+					</a>
+					<a href="https://www.instagram.com/sdcta">
+						<FaInstagram className="icon" />
+					</a>
+					<a href="https://www.linkedin.com/company/sdcta">
+						<FaYoutube className="icon" />
+					</a>
+				</div>
+			</div>
+		</footer>
+	);
+
+}