feat: add climate page and location page

.env.development

@@ -0,0 +1 @@
+NEXT_PUBLIC_READING_BASE_URI=https://www.oyvindis.com

.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_READING_BASE_URI=https://www.oyvindis.com

components/container/index.tsx

@@ -0,0 +1,11 @@
+import React, { memo, FC, PropsWithChildren } from 'react';
+
+import SC from './styled';
+
+interface Props {}
+
+const Container: FC<PropsWithChildren<Props>> = ({ children }) => (
+  <SC.Container>{children}</SC.Container>
+);
+
+export default memo(Container);

components/container/styled.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const onDesktopView = '@media (min-width: 900px)';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  padding: 0 calc(12px + (32 - 12) * ((100vw - 320px) / (900 - 320)));
+  width: 1200px;
+  z-index: 10;
+
+  ${onDesktopView} {
+    & {
+      padding: 0;
+    }
+  }
+`;
+
+export default { Container };

components/pages/climate/index.tsx

@@ -0,0 +1,27 @@
+import React, { memo, FC } from 'react';
+import Link from 'next/link';
+
+import Container from '../../container';
+import SC from './styled';
+import { Location } from '../../../types';
+
+interface Props {
+  locations: Location[];
+}
+
+const ClimatePageWrapper: FC<Props> = ({ locations }) => (
+  <Container>
+    <SC.ClimatePage>
+      <ul>
+        {locations?.length > 0 &&
+          locations.map(({ id, name }) => (
+            <li key={id}>
+              <Link href={`/climate/location/${id}`}>{name}</Link>
+            </li>
+          ))}
+      </ul>
+    </SC.ClimatePage>
+  </Container>
+);
+
+export default memo(ClimatePageWrapper);

components/pages/climate/styled.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const ClimatePage = styled.div`
+  display: flex;
+`;
+
+export default { ClimatePage };

env.ts

@@ -0,0 +1,11 @@
+import { validateEnv } from './utils/common';
+
+const NAMESPACE =  process.env.NAMESPACE! ?? 'dev';
+const READING_BASE_URI = process.env.NEXT_PUBLIC_READING_BASE_URI! ?? 'https://www.oyvindis.com'
+
+const env = {
+  NAMESPACE,
+  READING_BASE_URI
+}
+
+export default validateEnv(env);

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint --fix"
   },
   "dependencies": {
+    "axios": "^0.26.1",
     "next": "12.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

pages/climate/index.tsx

@@ -0,0 +1,23 @@
+import type { NextPage, GetServerSidePropsResult } from 'next';
+
+import { getLocations } from '../../services/api/climate/locations';
+
+import ClimatePageWrapper from '../../components/pages/climate';
+import { Location } from '../../types';
+
+interface Props {
+  locations: Location[];
+}
+
+const Climate: NextPage<Props> = ({ locations }) => {
+  return <ClimatePageWrapper locations={locations} />;
+};
+
+export async function getServerSideProps(): Promise<
+  GetServerSidePropsResult<Props>
+> {
+  const locations = await getLocations();
+  return { props: { locations } };
+}
+
+export default Climate;

pages/climate/location/[id]/index.tsx

@@ -0,0 +1,38 @@
+import type { NextPage } from 'next';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+import { Reading } from '../../../../types';
+import { getReadings } from '../../../../services/api/climate/readings';
+
+interface Props {}
+
+const Location: NextPage<Props> = () => {
+  const [readings, setReadings] = useState<Reading[]>([]);
+
+  const router = useRouter();
+  const { id } = router.query;
+
+  useEffect(() => {
+    getReadings(Array.isArray(id) ? id[0] : id).then(readings =>
+      setReadings(readings)
+    );
+  }, [id]);
+
+  return (
+    <div>
+      <ul>
+        {readings?.length > 0 &&
+          readings.map(({ id, humidity, temp, localDateTime  }) => (
+            <li key={id}>
+              <div>
+                {temp} - {humidity} - {localDateTime}
+              </div>
+            </li>
+          ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Location;

services/api/climate/host.ts

@@ -0,0 +1,27 @@
+import axios from 'axios';
+import env from '../../../env';
+
+interface Props {
+  path: string;
+  method: any;
+  data?: any;
+  params?: URLSearchParams;
+}
+
+const { READING_BASE_URI } = env;
+
+export const climateReading = ({ path, method, data, params }: Props) =>
+  axios({
+    url: `${READING_BASE_URI}${path}`,
+    method,
+    data,
+    params
+  })
+    .then(response => response.data)
+    .catch(() => null);
+
+export const climateReadingPost = (path: string, body: any) =>
+  climateReading({ path, method: 'POST', data: body });
+
+export const climateReadingGet = (path: string, params?: URLSearchParams) =>
+  climateReading({ path, method: 'GET', params });

services/api/climate/locations.ts

@@ -0,0 +1,4 @@
+import { climateReadingGet } from './host';
+
+export const getLocations = () =>
+  climateReadingGet('/climate-api/location')

services/api/climate/readings.ts

@@ -0,0 +1,4 @@
+import { climateReadingGet } from './host';
+
+export const getReadings = (location: string) =>
+  climateReadingGet(`/climate-api/reading/${location}`)

types/common.d.ts

@@ -0,0 +1,3 @@
+export type Actions<T extends { [key: string]: (...args: any) => any }> = {
+  [K in keyof T]: ReturnType<T[K]>;
+}[keyof T];

types/domain.d.ts

@@ -0,0 +1,19 @@
+export interface Location {
+  id: string;
+  name: string;
+}
+
+export interface Reading {
+  id: string;
+  location: string;
+  localDateTime: string;
+  battery: string;
+  co2: string;
+  humidity: string;
+  pm1: string;
+  pm25: string;
+  pressure: string;
+  temp: string;
+  time: string;
+  voc: string;
+}

types/enums.ts

@@ -0,0 +1,3 @@
+export enum Namespace {
+  DEVELOPMENT = 'dev'
+}

types/env.d.ts

@@ -0,0 +1,4 @@
+export interface EnvironmentVariables {
+  NAMESPACE: string;
+  READING_BASE_URI: string;
+}

types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './env';
+export * from './common';
+export * from './domain';

utils/common/index.ts

@@ -0,0 +1,17 @@
+import type { EnvironmentVariables } from '../../types';
+
+function assertIsDefined<T>(
+  key: string,
+  value: T
+): asserts value is NonNullable<T> {
+  if (value === undefined || value === null) {
+    throw new Error(`Expected ${key} to be defined, but received ${value}`);
+  }
+}
+
+export const validateEnv = (
+  env: EnvironmentVariables
+): EnvironmentVariables => {
+  Object.entries(env).forEach(([key, value]) => assertIsDefined(key, value));
+  return env;
+};