feat: frontend repository structure + example api requests not using …

…context

.env

@@ -1 +1 @@
-SERVER_ENDPOINT=https://api.hungermapdata.org/v2
+API_URL=https://api.hungermapdata.org/v2

.env_template

@@ -1 +1 @@
-SERVER_ENDPOINT=https://api.hungermapdata.org/v2
+API_URL=https://api.hungermapdata.org/v2

src/app/elements/page.tsx

@@ -1,19 +1,12 @@
-import { Suspense } from 'react';
+import { Chart } from '@/components/Charts/Chart';
+import container from '@/container';
+import CountryRepository from '@/domain/repositories/CountryRepository';
 
-import { ClientChart } from '@/components/Charts/ClientChart';
-
-import Providers from './providers';
 /**
  * You can use this page to try and show off your components.
  * It's not accessible from the UI, but you can reach it by manually navigating to /elements
  */
-
-export default function Elements() {
-  return (
-    <Suspense fallback={<div className="w-full h-full flex justify-center items-center">Loading...</div>}>
-      <Providers>
-        <ClientChart />
-      </Providers>
-    </Suspense>
-  );
+export default async function Elements() {
+  const countryData = await container.resolve<CountryRepository>('CountryRepository').getCountryData(50);
+  return <Chart data={countryData.fcsGraph} />;
 }