Add UI to render calculation history, and button to refresh history

src/components/calculation-history/CalculationHistory.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { CalculationData } from "../../data/calculations/ICalculationsRepository";
+type CountryDropdownType = {
+    refreshCalculationHistory: () => void;
+    calculationHistory: CalculationData[];
+};
+export const CalculationHistory = ({
+    refreshCalculationHistory,
+    calculationHistory,
+}: CountryDropdownType) => {
+    return (
+        <div>
+            <button onClick={refreshCalculationHistory}>Refresh History</button>
+            <ul>
+                {calculationHistory.map((calculation, index) => (
+                    <li key={index}>
+                        <p>Bytes: {calculation.bytes}</p>
+                        <p>Emissions: {calculation.emissions}</p>
+                        <p>
+                            Specific Emissions: {calculation.specificEmissions}
+                        </p>
+                        {/* Render the selected countries */}
+                        <ul>
+                            {Array.from(calculation.selectedCountries).map(
+                                ([countryName, percentage]) => (
+                                    <li key={countryName}>
+                                        {countryName}: {percentage}
+                                    </li>
+                                )
+                            )}
+                        </ul>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};

src/popup.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import { CountryDropdown } from "./components/CountryDropdown";
 import { usePopup } from "./usePopup";
 import { SelectedCountries } from "./components/selected-countries/SelectedCountries";
+import { CalculationHistory } from "./components/calculation-history/CalculationHistory";
 
 export const Popup = () => {
     const {
@@ -15,6 +16,8 @@ export const Popup = () => {
         averageSpecificEmissions,
         refreshAndGetSize,
         stopRecording,
+        refreshCalculationHistory,
+        calculationHistory,
         error,
     } = usePopup();
 
@@ -45,6 +48,10 @@ export const Popup = () => {
                 setCountryPercentage={setCountryPercentage}
             />
             <CountryDropdown addSelectedCountry={addSelectedCountry} />
+            <CalculationHistory
+                calculationHistory={calculationHistory}
+                refreshCalculationHistory={refreshCalculationHistory}
+            />
             {error && <p>{error}</p>}
         </div>
     );

src/usePopup.ts

@@ -4,7 +4,10 @@ import { calculateAverageSpecificEmissionsHelper } from "./helpers/calculateAver
 import { calculateCarbon } from "./helpers/calculateCarbon";
 import { ISelectedCountriesRepository } from "./data/selected_countries/ISelectedCountriesRepository";
 import { useMountEffect } from "./helpers/useOnceAfterFirstMount";
-import { ICalculationsRepository } from "./data/calculations/ICalculationsRepository";
+import {
+    CalculationData,
+    ICalculationsRepository,
+} from "./data/calculations/ICalculationsRepository";
 import { IBytesRepository } from "./data/bytes/IBytesRepository";
 
 export const usePopup = () => {
@@ -21,6 +24,15 @@ export const usePopup = () => {
     >(new Map<CountryName, number>());
     const [averageSpecificEmissions, setAverageSpecificEmissions] = useState(0);
     const [error, setError] = useState<string>();
+    const [calculationHistory, setCalculationHistory] = useState<
+        CalculationData[]
+    >([]);
+
+    const refreshCalculationHistory = async () => {
+        const calculationsData =
+            await calculationsRepository.getAllCalculations();
+        setCalculationHistory(calculationsData);
+    };
 
     const setCountryPercentage = async (
         country: CountryName,
@@ -197,6 +209,8 @@ export const usePopup = () => {
         averageSpecificEmissions,
         refreshAndGetSize,
         stopRecording,
+        calculationHistory,
+        refreshCalculationHistory,
         error,
     };
 };