From 6e2fc1de6c902eaa1528a7e5424fcff3761c59cb Mon Sep 17 00:00:00 2001
From: Pavel Gnedov <pavel@gnedov.info>
Date: Fri, 6 Oct 2023 08:19:39 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=BE=D1=81=D0=BD=D0=BE=D0=B2=D0=B0=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D0=BF=D1=80=D0=B5=D0=B4=D1=81=D1=82=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B4=D0=B0=D1=88=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=80=D0=B4=D0=BE=D0=B2=20=D0=BD=D0=B0=20=D1=84=D1=80=D0=BE?=
 =?UTF-8?q?=D0=BD=D1=82=D0=B5=D0=BD=D0=B4=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/dashboard/dashboard-page.tsx  | 11 ++++-
 frontend/src/dashboard/dashboard-store.tsx | 49 ++++++++++++++++++++++
 frontend/src/dashboard/dashboard.tsx       | 13 ++++++
 frontend/src/dashboard/dashboards-list.tsx | 23 ++++++++++
 frontend/src/dashboard/dashboards-page.tsx |  8 +++-
 frontend/src/dashboard/dashboards-store.ts | 32 ++++++++++++++
 6 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/dashboard/dashboard-store.tsx
 create mode 100644 frontend/src/dashboard/dashboard.tsx
 create mode 100644 frontend/src/dashboard/dashboards-list.tsx
 create mode 100644 frontend/src/dashboard/dashboards-store.ts

diff --git a/frontend/src/dashboard/dashboard-page.tsx b/frontend/src/dashboard/dashboard-page.tsx
index fe362e1..a256449 100644
--- a/frontend/src/dashboard/dashboard-page.tsx
+++ b/frontend/src/dashboard/dashboard-page.tsx
@@ -1,8 +1,17 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import * as Store from './dashboard-store';
+import { Dashboard } from './dashboard';
 
 export const DashboardPage = (): JSX.Element => {
   const params = useParams();
   const id = params.id as string;
-  return <p>Dashboard</p>;
+
+  const store = Store.Dashboard.create({
+    id: id,
+    loaded: false,
+  });
+  Store.DashboardLoadData(store);
+
+  return <Dashboard store={store} />;
 };
diff --git a/frontend/src/dashboard/dashboard-store.tsx b/frontend/src/dashboard/dashboard-store.tsx
new file mode 100644
index 0000000..fd18fa4
--- /dev/null
+++ b/frontend/src/dashboard/dashboard-store.tsx
@@ -0,0 +1,49 @@
+import axios from 'axios';
+import { Instance, types } from 'mobx-state-tree';
+
+type _WidgetParams = {
+  collapsed?: boolean;
+} & Record<string, any>;
+
+export const WidgetParams = types.frozen<_WidgetParams>();
+
+type _DataLoaderParams = Record<string, any> | null;
+
+export const DataLoaderParams = types.frozen<_DataLoaderParams>();
+
+export const Widget = types.model({
+  type: types.string,
+  id: types.string,
+  title: types.string,
+  widgetParams: types.maybe(WidgetParams),
+  dataLoaderParams: types.maybe(DataLoaderParams),
+});
+
+export const Data = types.model({
+  widgets: types.array(Widget),
+  title: types.maybe(types.string),
+});
+
+export const Dashboard = types
+  .model({
+    loaded: types.boolean,
+    id: types.string,
+    data: types.maybe(Data),
+  })
+  .actions((self) => {
+    return {
+      setData: (data: any) => {
+        self.data = data;
+        self.loaded = true;
+      },
+    };
+  });
+
+export type IDashboard = Instance<typeof Dashboard>;
+
+export async function DashboardLoadData(store: IDashboard): Promise<void> {
+  const url = `${process.env.REACT_APP_BACKEND}api/dashboard/${store.id}`;
+  const resp = await axios.get(url);
+  if (!resp.data) return;
+  store.setData(resp.data);
+}
diff --git a/frontend/src/dashboard/dashboard.tsx b/frontend/src/dashboard/dashboard.tsx
new file mode 100644
index 0000000..7dfd4e2
--- /dev/null
+++ b/frontend/src/dashboard/dashboard.tsx
@@ -0,0 +1,13 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import * as Store from './dashboard-store';
+
+export type Props = { store: Store.IDashboard };
+
+export const Dashboard = observer((props: Props): JSX.Element => {
+  if (!props.store.loaded) {
+    return <pre>Loading... {JSON.stringify(props.store)}</pre>;
+  }
+
+  return <pre>{JSON.stringify(props.store, null, '  ')}</pre>;
+});
diff --git a/frontend/src/dashboard/dashboards-list.tsx b/frontend/src/dashboard/dashboards-list.tsx
new file mode 100644
index 0000000..8a2bd0b
--- /dev/null
+++ b/frontend/src/dashboard/dashboards-list.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import * as Store from './dashboards-store';
+import { observer } from 'mobx-react-lite';
+
+export type Props = { store: Store.IList };
+
+export const DashboardsList = observer((props: Props): JSX.Element => {
+  if (!props.store.loaded) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <ul>
+      {props.store.list.map((item) => {
+        return (
+          <li key={item.id}>
+            <a href={`/dashboard/${item.id}`}>{item.title}</a>
+          </li>
+        );
+      })}
+    </ul>
+  );
+});
diff --git a/frontend/src/dashboard/dashboards-page.tsx b/frontend/src/dashboard/dashboards-page.tsx
index 49b0110..d251890 100644
--- a/frontend/src/dashboard/dashboards-page.tsx
+++ b/frontend/src/dashboard/dashboards-page.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
+import { DashboardsList } from './dashboards-list';
+import * as Store from './dashboards-store';
 
 export const DashboardsPage = (): JSX.Element => {
-  // TODO: code for DashboardsPage
-  return <p>Dashboards</p>;
+  const store = Store.List.create({ loaded: false, list: [] });
+  Store.ListStoreLoadData(store);
+
+  return <DashboardsList store={store} />;
 };
diff --git a/frontend/src/dashboard/dashboards-store.ts b/frontend/src/dashboard/dashboards-store.ts
new file mode 100644
index 0000000..6c980da
--- /dev/null
+++ b/frontend/src/dashboard/dashboards-store.ts
@@ -0,0 +1,32 @@
+import axios from 'axios';
+import { Instance, types } from 'mobx-state-tree';
+
+export const Item = types.model({
+  id: types.string,
+  title: types.string,
+});
+
+export type IItem = Instance<typeof Item>;
+
+export const List = types
+  .model({
+    list: types.array(Item),
+    loaded: types.boolean,
+  })
+  .actions((self) => {
+    return {
+      setList: (data: any) => {
+        self.list = data;
+        self.loaded = true;
+      },
+    };
+  });
+
+export type IList = Instance<typeof List>;
+
+export async function ListStoreLoadData(store: IList): Promise<void> {
+  const url = `${process.env.REACT_APP_BACKEND}api/dashboards`;
+  const resp = await axios.get(url);
+  if (!resp?.data) return;
+  store.setList(resp.data);
+}