Pages/aa fuel page (#76)

* feat: adding images

* feat: uploading more images

* style: adding CSS variables and global font

* feat: adding placeholders as footer and navbar

* fuel page - initial version w/ no form validation

* updating navbar and footer

* feat: "adding Navbar"

* config: fixing setup errors

* feat: fuel front page with no form, renaming imgs

* feat: selecting fuel name

* feat: form validation

* feat: fuelData in one object

* feat: Fuel form

* fix: format code + style: changed button colors

* fix: changed favicon + page title

* fix: minor optimizations

* style: reset & submit buttons alignment

* style: sizing containers

* styling

src/components/Footer.tsx

@@ -61,4 +61,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export default Footer;

src/components/Fuel/FuelForm.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { Button, Label, Select, TextInput } from 'flowbite-react';
+import {
+  FuelSourceUnit,
+  FuelSourceType,
+  UnregisteredFuelRequest,
+} from '../../schema/fuel.schema';
+
+interface FuelFormProps {
+  handleSubmit: (fuelData: UnregisteredFuelRequest) => void;
+}
+
+export default function FuelForm({ handleSubmit }: FuelFormProps) {
+  /* Initializing state */
+  const [fuelData, setfuelData] = useState({
+    fuel_source_type: '' as FuelSourceType,
+    fuel_source_unit: '' as FuelSourceUnit,
+    fuel_source_value: 0 as number,
+  });
+
+  function submitForm(event: React.FormEvent) {
+    event.preventDefault();
+
+    handleSubmit(fuelData);
+  }
+
+  /* Function that updates the state */
+  function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
+    /* Destructuring the event.target object */
+    const { name, value } = event?.target;
+    setfuelData((prevFuelData) => {
+      return {
+        ...prevFuelData,
+        [name]: name == 'fuel_source_value' ? parseFloat(value) : value,
+      };
+    });
+  }
+
+  /* Renders the units conditionally */
+  const unitOptions =
+    fuelData.fuel_source_type === 'ng'
+      ? ['thousand_cubic_feet', 'btu']
+      : ['gallon', 'btu'];
+
+  function resetForm() {
+    setfuelData({
+      fuel_source_type: '',
+      fuel_source_unit: '',
+      fuel_source_value: 0,
+    });
+  }
+
+  return (
+    <div className='container'>
+      <Label htmlFor="fuel_source_type">Which fuel do you use?</Label>
+      <Select
+        id="fuel_source_type"
+        value={fuelData.fuel_source_type}
+        onChange={(event) => handleChange(event)}
+        name="fuel_source_type"
+      >
+        <option value="">--- Choose</option>
+        <option value="ng">Natural Gas</option>
+        <option value="dfo">Home Heating and Diesel Fuel</option>
+        <option value="pg">Propane Gas</option>
+        <option value="ker">Kerosene</option>
+      </Select>
+
+      <br />
+
+      <Label htmlFor="unit">Which measuring unit do you use?</Label>
+      <Select
+        id="fuel_source_unit"
+        value={fuelData.fuel_source_unit}
+        onChange={(event) => handleChange(event)}
+        name="fuel_source_unit"
+      >
+        <option value="">-- Choose</option>
+        <option value={unitOptions[0]}>{unitOptions[0]}</option>
+        <option value={unitOptions[1]}>{unitOptions[1]}</option>
+      </Select>
+
+      <br />
+
+      <Label htmlFor="value">
+        What is the quantity of fuel you consumed? (based on the unit
+        you&apos;ve chosen above)
+      </Label>
+      <TextInput
+        id="fuel_source_value"
+        type="number"
+        value={fuelData.fuel_source_value}
+        onChange={(event) => handleChange(event)}
+        name="fuel_source_value"
+      />
+
+      <div className='flex flex-row justify-left gap-4'>
+        <Button color="info" onClick={resetForm}>
+          Reset
+        </Button>
+
+        <Button
+          type="submit"
+          disabled={
+            !fuelData.fuel_source_type ||
+            !fuelData.fuel_source_unit ||
+            fuelData.fuel_source_value < 1
+          }
+          color="success"
+          onClick={submitForm}
+        >
+          Go!
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/Fuel/FuelResponse.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Card, Button } from 'flowbite-react';
+import Link from 'next/link';
+import { FuelResponse } from '../../schema/fuel.schema';
+
+interface FuelResponseProps {
+  data: FuelResponse;
+}
+const FuelResponse = ({ data }: FuelResponseProps) => {
+  return (
+    <div className="mx-auto max-w-lg m-5">
+      <Card>
+        <p>
+          This Fuel calculation resulted in your carbon emissions
+          contribution of:{' '}
+        </p>
+        <p className="flex justify-center mb-3">
+          <strong>{data.carbon_kg} kg</strong>
+        </p>
+        <hr></hr>
+        <p className=" text-center">
+          Thanks for using the Fuel carbon emissions calculator, please
+          sign up to save and track your carbon footprint!
+        </p>
+        <div className="flex justify-center">
+          <Button>
+            <Link href="register">Register</Link>
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default FuelResponse;

src/components/Nav.tsx

@@ -83,4 +83,4 @@ const Nav = () => {
   );
 };
 
-export default Nav;
+export default Nav;

src/pages/fuel.tsx

@@ -1,17 +1,45 @@
 import Link from 'next/link'
 import Head from 'next/head'
+import Image from 'next/image'
+import plantingTreesImage from '../assets/images/planting-trees-1.png'
+import FuelForm from '../components/Fuel/FuelForm'
+import FuelResponse  from '../components/Fuel/FuelResponse'
+import { trpc } from '../utils/trpc'
+import { Spinner } from 'flowbite-react';
+import { UnregisteredFuelRequest } from '../schema/fuel.schema'
+
+
+export default function FuelPage() {
+  const { mutate, data, isLoading } = trpc.useMutation([
+    'fuel.unregistered-request-fuel',
+  ]);
+  const handleSubmit = (fuelData: UnregisteredFuelRequest) => {
+    mutate({ ...fuelData });
+  };
 
-export default function FuelConsumption() {
   return (
-    <div>
+    <div className='p-8 max-w-3xl mx-auto'>
       <Head>
         <title>Fuel Consumption</title>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
-      <nav className="flex justify-center gap-4">
-        <Link href='/'>Home</Link>
-      </nav>
-      <h2>Fuel Consumption Page</h2>
+
+      <div className='flex justify-center'>
+        <Image src={plantingTreesImage} alt="Four people planting trees"/>
+      </div>
+
+      <h2 className='text-4xl flex justify-center gap-4 font-bold'>How much carbon your fuel intake has emitted so far?</h2>
+
+
+        {isLoading && (
+        <div className="flex justify-center mx-auto my-5">
+          <Spinner aria-label="Electricity response loading" />
+        </div>
+      )}
+
+      {!data && !isLoading && <FuelForm handleSubmit={handleSubmit} />}
+      {data && !isLoading && <FuelResponse data={data} />} 
+
     </div>
   )
 }

src/pages/index.tsx

@@ -17,9 +17,9 @@ const Home: NextPage = () => {
   return (
     <>
       <Head>
-        <title>Create T3 App</title>
+        <title>CarbonCalc - Calculate your carbon emissions</title>
         <meta name="description" content="Generated by create-t3-app" />
-        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href="/favicon.png" />
       </Head>
 
       <nav className="flex justify-center gap-4">

src/schema/flight.schema.ts

@@ -36,6 +36,8 @@ const flightResponseUnqiue = z.object({
   estimated_at: z.string(),
 });
 
+
 const flightResponseSchema = flightRequestSchema.merge(flightResponseUnqiue);
 
+
 export type FlightResponse = z.TypeOf<typeof flightResponseSchema>;

src/schema/fuel.schema.ts

@@ -7,8 +7,8 @@ import z from 'zod';
 > Kerosene ~ type_api_name: ker, units: gallon, btu
 */
 
-const fuelSourceUnitSchema = z.enum(['gallon', 'btu', 'thousand_cubic_feet']);
-const fuelSourceTypeSchema = z.enum(['dfo', 'ng', 'pg', 'ker']);
+const fuelSourceUnitSchema = z.enum(['','gallon', 'btu', 'thousand_cubic_feet']);
+const fuelSourceTypeSchema = z.enum(['','dfo', 'ng', 'pg', 'ker']);
 
 export const unregisteredFuelRequestSchema = z.object({
   fuel_source_type: fuelSourceTypeSchema,

src/styles/globals.css

@@ -2,7 +2,28 @@
 @tailwind components;
 @tailwind utilities;
 
-.card {
-  border-radius: 43px;
-  box-shadow: 5px 5px 0px #102016, -5px -5px 0px #00ed5f;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+
+:root {
+    --lime-green: #00ed5f;
+    --dark-grey: #1e1e1e;
+    --dark-green: #284f37;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
 }
+
+button {
+    background-color: var(--lime-green);
+    color: var(--dark-grey);
+    width: 170px;
+    height: 50px;
+    border-radius: 10px;
+    font-size: 12px;
+}
+
+.card {
+    border-radius: 43px;
+    box-shadow: 5px 5px 0px #102016, -5px -5px 0px #00ed5f;
+  }

src/tests/electricity.tests.ts

@@ -0,0 +1 @@
+export {}