Merge pull request #10 from kjs222/loading-state

add loading states to front end

README.md

@@ -2,7 +2,7 @@
 
 It may be easiest to read this README (with images) on Github: https://github.com/kjs222/congressional-app
 
-### Overview
+### Project Overview
 
 This application queries the ProPublica API daily for new senate and house votes. It does analysis on the recent votes and provides a front end application to display that information.
 
@@ -197,6 +197,16 @@ npm run start-local-ddb
 
 I am not exposing the env variables needed to actually run the application however (sorry)
 
+#### Evolution and Considerations
+
+I chose a serverless application and did not use a framework like Serverless or SAM - for the learning experience.
+
+From my perspective, the application is well-tested despite the limitations of testing scenarios where AWS infrastructure is needed. While LocalStack could have been a solution, some of the AWS services used in this application are not available in the free version of Local Stack.
+
+However, outside of the database integration, which is testing using a docker version of DynamoDB, the AWS interactions are very straightforward (things like: publishing a message to SQS, etc). Further, by using Typescript, it is almost difficult to get this wrong, etc.
+
+I've always struggled a bit with using DynamoDB (as compared to SQL), because it doesn't handle relational data well, and the access patterns can be so limited. For now, it suits my needs.
+
 #### Next features to add
 
 I added an MVP frontend, but I would minimally like to add the following:

frontend/src/VoteList.tsx

@@ -1,8 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { VoteCard } from './VoteCard';
+import {CircularProgress, Typography } from '@mui/material';
+
 
 const VoteList: React.FC = () => {
   const [votes, setVotes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -12,13 +16,24 @@ const VoteList: React.FC = () => {
         const data = await response.json();
         setVotes(data.data); 
       } catch (error) {
-        console.error('Error fetching data:', error);
+        console.error('Error fetching data:', error);  
+        setError('Error fetching data. Please try again.');
+      } finally {
+        setLoading(false);
       }
     };
 
     fetchData();
   }, []); 
 
+  if (loading) {
+    return <CircularProgress />; 
+  }
+
+  if (error) {
+    return <Typography variant="body2" color="error">{error}</Typography>; 
+  }
+
   return (
     <div>
       {votes.map((item: any) => (

frontend/src/pages/House/HouseList.tsx

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { VoteCard } from '../../VoteCard';
-import { Typography } from '@mui/material';
+import { Typography, CircularProgress } from '@mui/material';
 
 const HouseList: React.FC = () => {
   const [votes, setVotes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -13,13 +15,24 @@ const HouseList: React.FC = () => {
         const data = await response.json();
         setVotes(data.data); 
       } catch (error) {
-        console.error('Error fetching data:', error);
+        console.error('Error fetching data:', error);  
+        setError('Error fetching data. Please try again.');
+      } finally {
+        setLoading(false);
       }
     };
 
     fetchData();
   }, []); 
 
+  if (loading) {
+    return <CircularProgress />; 
+  }
+
+  if (error) {
+    return <Typography variant="body2" color="error">{error}</Typography>; 
+  }
+
   return (
     <div>
       <Typography variant="h4">Recent House Votes</Typography>

frontend/src/pages/Senate/SenateList.tsx

@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { VoteCard } from '../../VoteCard';
-import { Typography } from '@mui/material';
+import { CircularProgress, Typography } from '@mui/material';
+
 
 const HouseList: React.FC = () => {
   const [votes, setVotes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -13,13 +16,24 @@ const HouseList: React.FC = () => {
         const data = await response.json();
         setVotes(data.data); 
       } catch (error) {
-        console.error('Error fetching data:', error);
+        console.error('Error fetching data:', error);  
+        setError('Error fetching data. Please try again.');
+      } finally {
+        setLoading(false);
       }
     };
 
     fetchData();
   }, []); 
 
+  if (loading) {
+    return <CircularProgress />; 
+  }
+
+  if (error) {
+    return <Typography variant="body2" color="error">{error}</Typography>; 
+  }
+
   return (
     <div>
       <Typography variant="h4">Recent Senate Votes</Typography>

frontend/src/pages/VoteDetail/VoteDetail.tsx

@@ -4,6 +4,7 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardHeader from '@mui/material/CardHeader';
 import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import Accordion from '@mui/material/Accordion';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -15,6 +16,9 @@ const VoteDetail: React.FC<{ item: VoteOverview}> = (item) => {
   const id = item.item.id;
 
   const [summary, setSummary] = useState({} as VoteSummary);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
 
   useEffect(() => {
     const fetchData = async () => {
@@ -26,6 +30,9 @@ const VoteDetail: React.FC<{ item: VoteOverview}> = (item) => {
         setSummary(received); 
       } catch (error) {
         console.error('Error fetching data:', error);
+        setError('Error fetching data. Please try again.');
+      } finally {
+        setLoading(false);
       }
     };
 
@@ -34,6 +41,15 @@ const VoteDetail: React.FC<{ item: VoteOverview}> = (item) => {
 
 
   const header = `${item.item.question}:  ${item.item.result}`
+
+  if (loading) {
+    return <CircularProgress />; 
+  }
+
+  if (error) {
+    return <Typography variant="body2" color="error">{error}</Typography>; 
+  }
+
   return (
 
     <Card variant="outlined">