Ben Doggett Redux Eval

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.env
+
 # dependencies
 /node_modules
 /.pnp

README.md

@@ -4,3 +4,10 @@ This project has been created by a student at Parsity, an online software engine
 
 If you have any questions about this project or the program in general, visit [parsity.io](https://parsity.io/) or email hello@parsity.io.
 
+---
+
+This app uses React, NextJS and Redux Toolkit to enable a user to search for name of any location by city or country (if searching by city and state, be sure that the country is included as well) and receive a five-day summary chart for temperature, pressure, and humidity.
+
+Sparklines-react is used to render charts.
+
+Weather data for additional cities are rendered successively as the user continues to search for additioanl locations.

app/components/chart.tsx

@@ -0,0 +1,32 @@
+"use client";
+import {
+  Sparklines,
+  SparklinesLine,
+  SparklinesLineProps,
+  SparklinesReferenceLine,
+} from "react-sparklines";
+
+type ChartProps = {
+  data: number[];
+  color: string;
+};
+
+const Chart: React.FC<ChartProps> = (props) => {
+  return (
+    <div className="max-w-md m-5">
+      <Sparklines data={props.data}>
+        <SparklinesLine
+          color={props.color}
+          limit={15}
+          width={80}
+          height={20}
+          margin={3}
+        />
+        <SparklinesReferenceLine type="mean" />
+      </Sparklines>
+      <p className="text-center font-medium">{props.avg}</p>
+    </div>
+  );
+};
+
+export default Chart;

app/components/chartGroup.tsx

@@ -0,0 +1,45 @@
+"use client";
+import Chart from "./chart";
+import { CityProcessedData } from "../types/CityProcessedData";
+
+type WeatherPropsType = {
+  data: number[];
+  avg: string;
+  color: string;
+};
+
+const ChartGroup = ({ city }) => {
+  const weatherCharts = (city: CityProcessedData): WeatherPropsType[] => {
+    return [
+      {
+        data: city.allTemps,
+        avg: city.avgTemp,
+        color: "orange",
+      },
+      {
+        data: city.allPressures,
+        avg: city.avgPressure,
+        color: "purple",
+      },
+      {
+        data: city.allHumidities,
+        avg: city.avgHumidity,
+        color: "green",
+      },
+    ];
+  };
+
+  return (
+    <div
+      className="grid grid-cols-4 gap-2 text-center hover:bg-slate-100"
+      key={city.cityId}
+    >
+      <div className="font-medium text-sm my-auto">{city.city}</div>
+      {weatherCharts(city).map((props) => (
+        <Chart {...props} key={props.avg} />
+      ))}
+    </div>
+  );
+};
+
+export default ChartGroup;

app/globals.css

@@ -1,107 +1,3 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/layout.tsx

@@ -0,0 +1,17 @@
+"use client";
+// import "bootstrap/dist/css/bootstrap.min.css";
+import "./globals.css";
+import { Inter } from "next/font/google";
+import { Provider } from "react-redux";
+import store from "./store/store";
+const inter = Inter({ subsets: ["latin"] });
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Provider store={store}>{children}</Provider>
+      </body>
+    </html>
+  );
+}