first commit

src/App.js

@@ -1,25 +1,151 @@
-import logo from './logo.svg';
-import './App.css';
+import React, {useEffect, useState} from 'react';
+import { useQuery, gql } from '@apollo/client';
+import {useNavigate, Route, Routes, useParams} from "react-router-dom";
+import {Mutation} from "@apollo/client/react/components";
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+const GET_BNDS = gql`
+  query getUsers {
+    users {
+      users
+    }
+  }
+`;
+
+
+const GET_QUEUE = gql`
+  query getQueue {
+    queue {
+      users
+    }
+  }
+`;
+
+function DisplayBnds() {
+    const { loading, error, data } = useQuery(GET_BNDS);
+
+    if (loading) return <p>Loading...</p>;
+    if (error) {
+        return <p>Error :(</p>;
+    }
+    const res = data.users.users.map((x) => {
+        const user = JSON.parse(x);
+        return <div key={user.id}>
+            <p>{user.id} &ndash; {user.bndname} &ndash; {user.username} &ndash;
+                <input type={"checkbox"} disabled={true} checked={user.newbnd}/> новый БнД &ndash;
+                <input type={"checkbox"} disabled={true} checked={user.active}/> активный &ndash;
+                <input type={"checkbox"} disabled={true} checked={user.upstream}/> вышестоящий &ndash;
+                &nbsp;<a href={"/delbnd/" + user.id}>X</a>
+            </p>
+        </div>;
+    }
+    );
+    return <div>
+        <h4>Таблица банков данных</h4>
+        {res}
+        <div>
+            <a href={"/newbnd"}>Новый банк данных</a><br/>
+            <a href={"/queue"}>Очередь</a><br/>
+        </div>
+    </div>;
 }
 
-export default App;
+function DisplayQueue() {
+    const { loading, error, data } = useQuery(GET_QUEUE);
+
+    if (loading) return <p>Loading...</p>;
+    if (error) {
+        return <p>Error :(</p>;
+    }
+    const res = data.queue.users.map((x) => {
+        const queue = JSON.parse(x);
+        return <div key={queue.id}>
+            <p>{queue.id} &ndash; {queue.bnd} &ndash; {queue.commit_id} &ndash; {queue.schema}
+            </p>
+        </div>;
+    }
+    );
+    return <div>
+        <h4>Таблица очереди</h4>
+        {res}
+        <div>
+            <a href={"/"}>Домой</a><br/>
+        </div>
+    </div>;
+
+}
+
+function BndForm() {
+    return <Mutation
+        mutation={gql`
+      mutation createUser($passwd: String!, $username: String!){
+        createUser(passwd: $passwd, username: $username) 
+      }
+    `}
+    >
+        {(createUser, { loading, error, data }) => {
+            if (loading) return <p>Loading...</p>;
+            if (error) return <p>Error :(</p>;
+            let username, passwd
+
+            return (
+                <form  onSubmit={e => {
+                    e.preventDefault();
+                    createUser({ variables: {
+                            username: username.value ,
+                            passwd: passwd.value ,
+                        }});
+                }}>
+                    username <input
+                        type='text'
+                        ref={ node =>  username = node }
+                    /><br/>
+                    password <input
+                        type='password'
+                        ref={ node =>  passwd = node }
+                    /><br/>
+                    <button type='submit'>Создать</button>
+                </form>
+            );
+        }}
+    </Mutation>;
+}
+
+function DeleteBnd() {
+    const {id} = useParams();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        console.log(id);
+        navigate("/");
+    }, []);
+    return <h3>Del BND</h3>;
+}
+
+
+function BndEdit() {
+    const {id} = useParams();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        console.log(id);
+        navigate("/");
+    }, []);
+    return <h3>Del BND</h3>;
+}
+
+
+
+
+export default function App() {
+    return (
+        <div>
+            <Routes>
+                <Route path={"/"} element={<DisplayBnds/>}/>
+                <Route path={"/queue"} element={<DisplayQueue/>}/>
+                <Route path={"/newbnd"} element={<BndForm/>}/>
+                <Route path={"/delbnd/:id"} element={<DeleteBnd/>}/>
+                <Route path={"/bnd/:id"} element={<BndEdit/>}/>
+            </Routes>
+        </div>
+    );
+}

src/index.js

@@ -3,12 +3,21 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import {ApolloClient, ApolloProvider, InMemoryCache} from "@apollo/client";
+import {BrowserRouter} from "react-router-dom";
+
+const client = new ApolloClient({
+    uri: 'http://127.0.0.1:9000/graphql',
+    cache: new InMemoryCache(),
+});
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <BrowserRouter>
+        <ApolloProvider client={client}>
+            <App />
+        </ApolloProvider>
+    </BrowserRouter>
 );
 
 // If you want to start measuring performance in your app, pass a function