fix frontend issues

package.json

@@ -5,9 +5,12 @@
  "dependencies": {
  "@emotion/react": "^11.11.3",
  "@emotion/styled": "^11.11.0",
+ "@fontsource/plus-jakarta-sans": "^5.0.20",
  "@ionic/react": "^7.8.1",
  "@mui/icons-material": "^5.15.6",
  "@mui/material": "^5.15.6",
+ "@react-pdf/renderer": "^3.4.4",
+ "@reduxjs/toolkit": "^2.2.5",
  "@testing-library/jest-dom": "^5.17.0",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
@@ -20,8 +23,12 @@
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-inlinesvg": "^4.1.1",
+ "react-loader-spinner": "^6.1.6",
+ "react-redux": "^9.1.2",
  "react-router-dom": "^6.21.3",
- "recharts": "^2.12.3"
+ "recharts": "^2.12.3",
+ "redux": "^5.0.1",
+ "redux-persist": "^6.0.0"
  },
  "scripts": {
  "start": "webpack serve --mode development",
@@ -68,4 +75,4 @@
  "webpack-cli": "^5.1.4",
  "webpack-dev-server": "^4.15.1"
  }
-}
+}

src/App.jsx

@@ -4,17 +4,24 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { FormDataProvider } from './context/FormDataContext';
 import MainRoutes from './routes/routes';
 import theme from './context/theme';
+import { Provider } from 'react-redux';
+import {store , persistor} from './store';
+import { PersistGate } from 'redux-persist/integration/react';
 
 const App = () => {
  return (
  <ThemeProvider theme={theme}>
- <FormDataProvider>
+ <Provider store={store}>
+ <PersistGate loading={null} persistor={persistor}>
  <Router>
  <MainRoutes />
  </Router>
- </FormDataProvider>
+ </PersistGate>
+ </Provider>
  </ThemeProvider>
  );
 };
 
+
+
 export default App;

src/actions/actions.js

@@ -0,0 +1,13 @@
+
+export const UPDATE = 'UPDATE';
+
+
+const update = payload => {
+ return{
+ type: UPDATE,
+ payload,
+ };
+
+}
+
+export {update};

src/components/Counter.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { increment, decrement } from '../actions/actions';
+
+const Counter = ({ count, increment, decrement }) => {
+ return (
+ <div>
+ <h2>Count: {count}</h2>
+ <button onClick={increment}>Increment</button>
+ <button onClick={decrement}>Decrement</button>
+ </div>
+ );
+};
+
+// Map state to props
+const mapStateToProps = state => ({
+ count: state.counter.count
+});
+
+// Map dispatch to props
+const mapDispatchToProps = {
+ increment,
+ decrement
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Counter);

src/components/CounterItem/counteritem.jsx

@@ -29,7 +29,7 @@ const CounterItem = ({ label, count, incrementValue, decrementValue, setCount })
  }}
  style={{
  margin: '0 10px',
- width: '100px'
+ width: '122px'
  }}
  />
  <IconButton color="secondary" onClick={handleIncrement}>

src/components/CounterQuestion/counterquestion.jsx

@@ -7,7 +7,7 @@ const CounterQuestion = ({ question, label = null, popup = null, content, state,
  return (
  <div className="component" style={{ width: '70%' }}>
  <div style={{ display: 'flex', alignItems: 'center' }}>
- <Typography variant="h2">{question}</Typography>
+ <Typography variant="h2" >{question}</Typography>
  {popup && <PopupHint content={popup} />}
  </div>
  {label && <Typography variant="h3">{label}</Typography>}

src/components/Heating/HeatComponent/heat.jsx

@@ -235,9 +235,7 @@ const Heat = (props) => {
  { values: 'Wood Fireplace', label: 'Fireplace', icon: Fireplace },
  ]
 
- useEffect(() => {
- setHeat('');
- }, [source]);
+
 
  return (
  <>

src/components/HomeType/OwnerTypeComponent/ownerType.jsx

@@ -12,5 +12,6 @@ const OwnerType = ({ owner, setOwner }) => {
  />
  );
 };
-
+ 
 export default OwnerType;
+

src/components/Navbar/navbar.css

@@ -78,18 +78,22 @@
  user-select: none;
  border-radius: 20px;
  border-width: 2px;
+ color: lightgray;
 }
 
 .list-item-text {
  user-select: none;
+
 }
 
 .list-item.clickable {
  /* Add your styles for clickable list items here */
  cursor: pointer;
+ color: black;
 }
 
 .list-item.clickable:hover {
  border-color: teal;
- border-style: solid; /* Add this line */
+ background-color: lightblue;
+
 }

src/components/Navbar/navbar.jsx

@@ -54,7 +54,7 @@ const Navbar = ({ index, handleClick }) => {
  primary={step.text}
  primaryTypographyProps={{
  style: {
- color: i === index ? 'black' : 'lightgray',
+ color: i === index ? 'black' : 'inherit',
  fontWeight: i === index ? 'bold' : 'normal'
  }
  }}

src/components/PopupHint/popup.jsx

@@ -24,7 +24,7 @@ const PopupHint = ({ content }) => {
  variant="contained"
  color="primary"
  onClick={handleClick}
- style={{ minWidth: 'auto', width: '40px', height: '40px', borderRadius: '50%' }}
+ style={{ minWidth: 'auto', width: '20px', height: '20px', borderRadius: '50%', backgroundColor:'inherit',boxShadow:'none', marginBottom:'30px'}}
  >
  <HelpOutlineIcon />
  </Button>

src/components/Results/EnergyScore/calcbutton.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button, Dialog, DialogTitle, DialogContent, Card, CardContent, Typography, Box, Grid } from '@mui/material';
 import { IonIcon } from '@ionic/react';
 import { star } from 'ionicons/icons';
-
+import './energyScore.css';
 const getScoreColor = (score) => {
  if (score < 50) {
  return 'darkred';
@@ -14,8 +14,8 @@ const getScoreColor = (score) => {
 };
 
 const ScoreBlock = ({ score }) => (
- <Grid container direction="column" justifyContent="center" alignItems="center" style={{ height: '50vh' }}>
- <Typography variant="h4" align="center">Your Home's Clean Energy Score:</Typography>
+ <Grid container direction="column" justifyContent="center" alignItems="center" style={{ height: '30vh' }}>
+ <Typography variant="h4" align="center" className='type_bold'>Your Home's Clean Energy Score:</Typography>
  <Typography variant="h2" align="center" style={{ color: getScoreColor(score) }}>{score} out of 100</Typography>
  <Typography variant="body1" align="center">Your score is based on the estimated CO2 emissions of your home.</Typography>
  <Box mt={3}>
@@ -51,7 +51,7 @@ const ScoreDetailsCard = (props) => {
  return (
  <Card>
  <CardContent>
- <Typography variant="h6" gutterBottom>
+ <Typography variant="h6" gutterBottom className='type_bold'>
  The Science Behind Your Score
  </Typography>
  <Typography paragraph>
@@ -62,19 +62,19 @@ const ScoreDetailsCard = (props) => {
  </Typography>
 
  <Box my={2}>
- <Typography variant="subtitle1">What we estimate:</Typography>
+ <Typography variant="subtitle1" className='type_bold'>What we estimate:</Typography>
 
  <Grid container>
  <Grid item xs={6}>
- <Typography variant="subtitle2">Your Location</Typography>
+ <Typography variant="subtitle2" className='type_bold'>Your Location</Typography>
  <Typography>- Zip Code: {zipCode}</Typography>
  <Typography>- State: {state}</Typography>
  <Typography>- Annual Heating Degree Days: {heatingDegreeDays}</Typography>
  <Typography>- Annual Cooling Degree Days: {coolingDegreeDays}</Typography>
  <Typography>- Average Ground Water Temp: {groundWaterTemp}° F</Typography>
  </Grid>
  <Grid item xs={6}>
- <Typography variant="subtitle2">Your Home</Typography>
+ <Typography variant="subtitle2" className='type_bold'>Your Home</Typography>
  <Typography>- Home Volume: {homeVolume} ft³</Typography>
  <Typography>- Air Changes per Hour (ACH): {airChangesPerHour}</Typography>
  <Typography>- Insulated Wall R Value: {wallRValue}</Typography>
@@ -101,13 +101,20 @@ const CalcButton = (props) => {
  setOpen(false);
  };
 
+ const dialogStyle = {
+ // Add your custom styles here
+ borderRadius: '8px',
+ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.2)',
+ };
+
+
  return (
  <div>
  <Button onClick={handleClickOpen} style={{ width: '100%' }}>
  <IonIcon icon={star} style={{ fontSize: '30px', margin: '10px' }} />
- How We Calculate this
+ How We Calculate This
  </Button>
- <Dialog open={open} onClose={handleClose}>
+ <Dialog open={open} onClose={handleClose} maxWidth='600px' PaperProps={{ style: dialogStyle }}>
  <DialogTitle>Calculation Guide:</DialogTitle>
  <DialogContent>
  <ScoreBlock score={props.score} />

src/components/Results/EnergyScore/comparebutton.jsx

@@ -3,7 +3,9 @@ import { DialogContent, Typography, Button, LinearProgress, Box, Dialog, DialogT
 import { home } from 'ionicons/icons';
 import { IonIcon } from '@ionic/react';
 
-const ProgressBar = ({ label, value }) => (
+const ProgressBar = ({ label, value }) => {
+ const color1 = 'red';
+ return(
  <Box sx={{ width: '100%', padding: '10px' }} display="flex" alignItems="center" justifyContent="space-between">
  <div style={{ width: '40%'}}>
  <Typography variant="h6" sx={{ marginBottom: '5px', fontWeight: 'bold' }}>{label}</Typography>
@@ -13,9 +15,10 @@ const ProgressBar = ({ label, value }) => (
  variant="determinate" 
  value={((value / 16000) * 100)}
  sx={{ width: '60%' }}
+ style={{color:'red', backgroundColor:color1}}
  />
  </Box>
-);
+);}
 
 const CompareButton = (props) => {
  const [open, setOpen] = useState(false);
@@ -39,16 +42,17 @@ const CompareButton = (props) => {
  onClose={handleClose}
  PaperProps={{ 
  sx: { 
- width: '33vw', 
- maxWidth: '33vw', 
+ width: '40vw', 
+ maxWidth: '40vw', 
  overflowX: 'hidden' 
  } 
  }}
  >
- <DialogTitle>
- <IonIcon icon={home} style={{ fontSize: '30px', margin: '10px' }} /> See How You Compare!
+ <DialogTitle style={{display:'flex', margin:'10px'}}>
+ <IonIcon icon={home} style={{ fontSize: '30px', }} /> 
+ <div style={{marginLeft:'20px', fontSize:'25px', fontWeight:'bold'}}>See How You Compare!</div>
  </DialogTitle>
- <DialogContent>
+ <DialogContent style={{overflow : 'hidden'}}>
  <ProgressBar label="Your Home" value={props.yourHomeValue} />
  <br />
  <ProgressBar label="Average Home in Your State" value={props.avgHomeState} />

src/components/Results/EnergyScore/energyScore.css

@@ -0,0 +1,15 @@
+.viewEditBtn{
+ text-decoration: none;
+ font: 18px;
+ font-weight: bold;
+ color: #2d2828;
+}
+.title{
+ font-size: 30px!important;
+ text-align: center;
+ font-weight: bold!important;
+}
+
+.type_bold{
+ font-weight: bold!important;
+}

src/components/Results/EnergyScore/energyscore.jsx

@@ -1,21 +1,29 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Box, Typography, Grid, Card, CardContent } from '@mui/material';
 import CalcButton from './calcbutton';
 import CompareButton from './comparebutton';
 import ViewEditButton from './vieweditbutton';
 import ScoreRing from './scorering';
 
 const EnergyScore = (props) => {
- const score = Math.floor(100 * (props.avgHomeUS / (props.avgHomeUS + props.yourHomeValue)));
-
+ let score = Math.floor(100 * (props.avgHomeUS / (props.avgHomeUS + props.yourHomeValue)));
+ const [scoretext, setScoretext] = useState('');
+ useEffect(() => {
+ if (score<25)setScoretext('Bad');
+ else if (score<50) setScoretext('OK');
+ else if (score<75) setScoretext('Good');
+ else scoretext = setScoretext ('Awesome');
+ }, [score]);
+
+
  return (
  <Card>
  <CardContent>
  <Grid container direction="column" alignItems="flex-start">
- <Typography variant="h4" component="div" sx={{ fontWeight: 'bold' }}>
+ <Typography variant="h4" component="div" sx={{ fontWeight: 'bold', fontSize: "27px"}}>
  Results
  </Typography>
- <Typography variant="h5" component="div" sx={{ fontWeight: 'bold' }}>
+ <Typography variant="h5" component="div" sx={{ fontWeight: 'bold', fontSize: "20px"}}>
  Your Home's <span style={{ color: 'teal' }}>Clean Energy</span> Score:
  </Typography>
  <div
@@ -31,7 +39,7 @@ const EnergyScore = (props) => {
  }}
  >
  <div style={{ width: '100%', height: '100%', marginRight: '20px' }}>
- <ScoreRing value={score} scoreLabel={'Good'} />
+ <ScoreRing value={score} scoreLabel={scoretext} />
  </div>
  <div style={{ width: '60%' }}>
  <h5>Score is based on the estimated CO2 emissions of your home</h5>