2023/07/06 aa user i can see previously calculated recordings

src/components/calculation-history/CalculationHistory.tsx

@@ -0,0 +1,36 @@
+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>
+                        <ul>
+                            {Array.from(calculation.selectedCountries).map(
+                                ([countryName, percentage]) => (
+                                    <li key={countryName}>
+                                        {countryName}: {percentage}
+                                    </li>
+                                )
+                            )}
+                        </ul>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};

src/data/calculations/CalculationsRepository.ts

@@ -0,0 +1,66 @@
+import { IStorageRepository } from "../storage/IStorageRepository";
+import {
+    CalculationData,
+    ICalculationsRepository,
+} from "./ICalculationsRepository";
+
+export class CalculationsRepository implements ICalculationsRepository {
+    remoteDataSource: IStorageRepository = IStorageRepository.instance;
+
+    async storeCalculation(calculationData: CalculationData): Promise<void> {
+        const oldCalculations = await this.getAllCalculations();
+        const newCalculations = [calculationData, ...oldCalculations];
+        await this.remoteDataSource.set({
+            allCalculations: JSON.stringify(newCalculations),
+        });
+    }
+
+    async cacheOngoingCalculation(
+        calculationData: CalculationData
+    ): Promise<void> {
+        await this.remoteDataSource.set({
+            ongoingCalculation: JSON.stringify(calculationData),
+        });
+    }
+
+    async clearOngoingCalculation(): Promise<void> {
+        await this.remoteDataSource.set({
+            ongoingCalculation: null,
+        });
+    }
+
+    async getAllCalculations(): Promise<CalculationData[]> {
+        const data = await this.remoteDataSource.get({
+            allCalculations: JSON.stringify([]),
+        });
+
+        return JSON.parse(
+            data["allCalculations"] as string
+        ) as CalculationData[];
+    }
+
+    async _getOngoingCalculation(): Promise<CalculationData | null> {
+        const data = await this.remoteDataSource.get({
+            ongoingCalculation: null,
+        });
+
+        if (data["ongoingCalculation"] !== null) {
+            return JSON.parse(
+                data["ongoingCalculation"] as string
+            ) as CalculationData;
+        }
+        return null;
+    }
+
+    async getLastCalculation(): Promise<CalculationData | null> {
+        const ongoingCalculation = await this._getOngoingCalculation();
+        if (ongoingCalculation !== null) {
+            return ongoingCalculation;
+        }
+        const oldCalculations = await this.getAllCalculations();
+        if (oldCalculations.length > 0) {
+            return oldCalculations[0];
+        }
+        return null;
+    }
+}

src/data/calculations/ICalculationsRepository.ts

@@ -0,0 +1,42 @@
+import { CountryName } from "../../constants/Countries";
+import { CalculationsRepository } from "./CalculationsRepository";
+import { TestCalculationsRepository } from "./TestCalculationsRepository";
+
+export abstract class ICalculationsRepository {
+    private static _instance: ICalculationsRepository;
+    static get instance(): ICalculationsRepository {
+        if (!this._instance) {
+            switch (process.env.ENV) {
+                case "development":
+                    this._instance = new CalculationsRepository();
+                    break;
+                case "test":
+                    this._instance = new TestCalculationsRepository();
+                    break;
+                default:
+                    throw new Error(`Unknown environment: ${process.env.ENV}`);
+            }
+        }
+
+        return this._instance;
+    }
+
+    abstract storeCalculation(calculationData: CalculationData): Promise<void>;
+
+    abstract cacheOngoingCalculation(
+        calculationData: CalculationData
+    ): Promise<void>;
+
+    abstract clearOngoingCalculation(): Promise<void>;
+
+    abstract getLastCalculation(): Promise<CalculationData | null>;
+
+    abstract getAllCalculations(): Promise<CalculationData[]>;
+}
+
+export type CalculationData = {
+    bytes: number;
+    emissions: number;
+    specificEmissions: number;
+    selectedCountries: Map<CountryName, number>;
+};

src/data/calculations/TestCalculationsRepository.ts

@@ -0,0 +1,38 @@
+import {
+    CalculationData,
+    ICalculationsRepository,
+} from "./ICalculationsRepository";
+
+export class TestCalculationsRepository implements ICalculationsRepository {
+    private _allCalculations: CalculationData[] = [];
+    private _ongoingCalculation: CalculationData | null = null;
+
+    async storeCalculation(calculationData: CalculationData): Promise<void> {
+        const tempArray = [calculationData, ...this._allCalculations];
+        this._allCalculations = tempArray;
+    }
+
+    async cacheOngoingCalculation(
+        calculationData: CalculationData
+    ): Promise<void> {
+        this._ongoingCalculation = calculationData;
+    }
+
+    async clearOngoingCalculation(): Promise<void> {
+        this._ongoingCalculation = null;
+    }
+
+    async getAllCalculations(): Promise<CalculationData[]> {
+        return this._allCalculations;
+    }
+
+    async getLastCalculation(): Promise<CalculationData | null> {
+        if (this._ongoingCalculation !== null) {
+            return this._ongoingCalculation;
+        }
+        if (this._allCalculations.length > 0) {
+            return this._allCalculations[0];
+        }
+        return null;
+    }
+}

src/data/storage/IStorageRepository.ts

@@ -1,7 +1,7 @@
 import { StorageRepository } from "./StorageRepository";
 import { TestStorageRepository } from "./TestStorageRepository";
 
-export type StorageDataType = string | number;
+export type StorageDataType = string | number | null;
 export abstract class IStorageRepository {
     private static _instance: IStorageRepository;
     static get instance(): IStorageRepository {

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>
     );