Compare commits

...

1 Commits

Author SHA1 Message Date
d1d811145a wip: world view
All checks were successful
continuous-integration/drone/push Build is passing
2022-07-24 22:08:16 +01:00
8 changed files with 137 additions and 1 deletions

1
.env Normal file
View File

@ -0,0 +1 @@
REACT_APP_API_BASE=/_api/

45
package-lock.json generated
View File

@ -15,6 +15,8 @@
"@types/node": "^16.11.45", "@types/node": "^16.11.45",
"@types/react": "^18.0.15", "@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6", "@types/react-dom": "^18.0.6",
"axios": "^0.27.2",
"http-proxy-middleware": "^2.0.6",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",
@ -4651,6 +4653,28 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/axios": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
"dependencies": {
"follow-redirects": "^1.14.9",
"form-data": "^4.0.0"
}
},
"node_modules/axios/node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/axobject-query": { "node_modules/axobject-query": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@ -19833,6 +19857,27 @@
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz", "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
"integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==" "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
}, },
"axios": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
"requires": {
"follow-redirects": "^1.14.9",
"form-data": "^4.0.0"
},
"dependencies": {
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
}
}
},
"axobject-query": { "axobject-query": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",

View File

@ -10,6 +10,8 @@
"@types/node": "^16.11.45", "@types/node": "^16.11.45",
"@types/react": "^18.0.15", "@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6", "@types/react-dom": "^18.0.6",
"axios": "^0.27.2",
"http-proxy-middleware": "^2.0.6",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",

View File

@ -1,5 +1,8 @@
import React from 'react';
import './App.css'; import './App.css';
import { World } from './pages/world';
import { Api } from './api/api';
import { useState } from 'react';
import { import {
BrowserRouter as Router, BrowserRouter as Router,
Routes, Routes,
@ -8,6 +11,8 @@ import {
} from "react-router-dom"; } from "react-router-dom";
function App() { function App() {
let [api] = useState(() => new Api());
return ( return (
<Router> <Router>
<div> <div>
@ -19,6 +24,9 @@ function App() {
<li> <li>
<Link to="/about">About</Link> <Link to="/about">About</Link>
</li> </li>
<li>
<Link to="/world">World</Link>
</li>
</ul> </ul>
</nav> </nav>
</div> </div>
@ -26,6 +34,7 @@ function App() {
<Routes> <Routes>
<Route path="/" element={<Home />} /> <Route path="/" element={<Home />} />
<Route path="/about" element={<About />} /> <Route path="/about" element={<About />} />
<Route path="/world" element={<World api={api} />} />
</Routes> </Routes>
</Router> </Router>
); );

21
src/api/api.ts Normal file
View File

@ -0,0 +1,21 @@
import { Containers } from './containers';
import axios, { AxiosInstance } from 'axios';
export interface InstanceProvider {
instance: AxiosInstance;
baseURL: string;
};
export class Api {
instance: AxiosInstance;
baseURL = '/';
constructor() {
this.instance = axios.create({
baseURL: '_api/',
});
}
containers(): Containers { return new Containers(this); }
};

25
src/api/containers.ts Normal file
View File

@ -0,0 +1,25 @@
import { AxiosInstance } from 'axios';
import { InstanceProvider } from './api';
export type Container = {
id: string,
parent?: string,
name: string,
};
export class Containers {
instance: AxiosInstance;
baseURL: string;
constructor(parent: InstanceProvider) {
this.instance = parent.instance;
this.baseURL = parent.baseURL + 'containers/';
}
async index(): Promise<[Container]> {
let resp = await this.instance.get(this.baseURL);
console.log(resp);
return resp.data.content;
}
}

22
src/pages/world.tsx Normal file
View File

@ -0,0 +1,22 @@
import { Api } from '../api/api';
import { Container } from '../api/containers';
import { useState, useEffect } from 'react';
const World = ({ api }: { api: Api }) => {
let [content, setContent] = useState<[Container]>();
useEffect(() => {
api.containers().index().then(setContent);
}, [api]);
let list = content ? content.map((container) => <div key={container.id}>{container.name}</div>) : <div>Loading content...</div>;
return (
<>
<h2>Welcome to the world view!</h2>
{list}
</>
);
};
export { World };

11
src/setupProxy.js Normal file
View File

@ -0,0 +1,11 @@
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/_api/',
createProxyMiddleware({
target: process.env.REACT_APP_API_BASE,
changeOrigin: true,
})
);
};