Added load into form from database

Backend/Normalization.Maps/Normalization.Maps.csproj

@@ -118,7 +118,7 @@
  <Reference Include="System.Xml" />
  </ItemGroup>
  <ItemGroup>
- <Compile Include="DependencyMap.cs" />
+ <Compile Include="Algorithm\Algorithm.cs" />
  <Compile Include="Factory\ModelFactory.cs" />
  <Compile Include="Factory\RepositoryFactory.cs" />
  <Compile Include="Interfaces\IMaps.cs" />

Frontend/src/App.js

@@ -5,6 +5,7 @@ import "./App.css";
 import "./Loading.css";
 import MainScreen from "./components/MainScreen";
 import Form from "./components/form/Form";
+import FormLoad from "./components/form/FormLoad";
 import Decomposition from "./components/display/Decomposition";
 import Algorithm from "./components/Algorithm";
 
@@ -19,15 +20,21 @@ function App() {
  path="/create"
  render={() => (
  <Form
+ tableName=""
  attributes=""
  keys={[[]]}
  dependenciesFrom={[[]]}
  dependenciesTo={[[]]}
  />
  )}
  />
- <Route exact path="/load" render={() => <Decomposition/>} />
- <Route exact path="/algorithm" render={() => <Algorithm/>} />
+ <Route
+ exact
+ path="/update/:id"
+ render={props => <FormLoad {...props} />}
+ />
+ <Route exact path="/load" render={() => <Decomposition />} />
+ <Route exact path="/algorithm" render={() => <Algorithm />} />
  <Redirect to="/" />
  </Switch>
  </BrowserRouter>

Frontend/src/components/display/Decomposition.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import Navbar from "../Navbar";
 import Table from "./Table";
 import LoadingScreen from "../LoadingScreen";
-//import { fetchStoredTables } from "../../services/normalization";
+import { fetchStoredTables } from "../../services/normalization";
 
 class Decomposition extends Component {
  constructor(props) {
@@ -12,11 +12,11 @@ class Decomposition extends Component {
  };
  }
 
- // componentDidMount(){
- //  fetchStoredTables().then(response => {
- //  this.setState({decomposition: response});
- // })
- // }
+ componentDidMount() {
+ fetchStoredTables().then(response => {
+ this.setState({ decomposition: response });
+  });
+ }
 
  render() {
  if (!this.state.decomposition)
@@ -30,13 +30,9 @@ class Decomposition extends Component {
  <>
  <Navbar />
  <div className="Tables">
- {this.state.decomposition.map((table, index) => (
- <Table
- title={table.name}
- attributes={table.attributes}
- key={index}
- />
- ))}
+ {this.state.decomposition.map((table, index) => {
+ return <Table table={table} isExample={true} key={index}/>;
+ })}
  </div>
  </>
  );

Frontend/src/components/display/Table.js

@@ -1,13 +1,14 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 const Table = props => {
  return (
  <div className="Table">
  <div className="TableContent">
- {props.title !== undefined ? <h2>props.title</h2> : null}
+ {props.isExample === true ? <h2>{props.table.name}</h2> : null}
  <h2>Attributes</h2>
  <div className="TableAttributes">
- {props.attributes.map((attribute, index) => {
+ {props.table.attributes.map((attribute, index) => {
  return (
  <div className="TableAttribute" key={index}>
  {attribute}
@@ -16,28 +17,29 @@ const Table = props => {
  })}
  </div>
 
- {props.dependencies !== undefined ? (
+ {props.isExample !== true ? (
  <>
  <h2>Dependencies</h2>
  <div className="TableDependencies">
- {props.dependencies.map((dependency, index) => {
- dependency = dependency.split("-");
+ {props.table.dependencies.map((dependency, index) => {
  return (
  <div key={index} className="TableDependency">
- <div>{dependency[0]}</div>
+ <div>{dependency.from}</div>
 
  <div> -> </div>
 
- <div>{dependency[1]}</div>
+ <div>{dependency.to}</div>
  </div>
  );
  })}
  </div>
  </>
  ) : null}
  </div>
- {props.title !== undefined ? (
- <button className="ButtonRun ButtonTable">Load table</button>
+ {props.isExample === true ? (
+ <Link to={`update/${props.table.primaryId}`}>
+ <button className="ButtonRun ButtonTable">Load table</button>
+ </Link>
  ) : null}
  </div>
  );

Frontend/src/components/form/Form.js

@@ -221,9 +221,7 @@ class Form extends Component {
  Keys: keys,
  PrimaryId: -1
  };
- console.log(endpointCorrect);
  postTable(endpointCorrect).then(response => console.log(response));
- console.log(dependenciesFrom);
  };
 
  render() {

Frontend/src/components/form/FormLoad.js

@@ -0,0 +1,51 @@
+import React, { Component } from "react";
+import { fetchTableById } from "../../services/normalization";
+import Form from "./Form";
+import Navbar from "../Navbar";
+import LoadingScreen from "../LoadingScreen";
+
+class FormLoad extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ table: null,
+ dependenciesFrom: null,
+ dependenciesTo: null
+ };
+ }
+
+ componentDidMount() {
+ const id = this.props.match.params.id;
+ fetchTableById(id).then(response => {
+ this.setState(() => {
+ console.log(response.dependencies.map(element => element.to))
+ return {
+ table: response,
+ dependenciesFrom: response.dependencies.map(element => element.from),
+ dependenciesTo: response.dependencies.map(element => [element.to])
+ };
+ });
+ });
+ }
+
+ render() {
+ if (!this.state.table)
+ return (
+ <>
+ <Navbar />
+ <LoadingScreen />
+ </>
+ );
+ return (
+ <Form
+ tableName={this.state.table.name}
+ attributes={this.state.table.attributes.join(", ")}
+ keys={this.state.table.keys}
+ dependenciesFrom={this.state.dependenciesFrom}
+ dependenciesTo={this.state.dependenciesTo}
+ />
+ );
+ }
+}
+
+export default FormLoad;

Frontend/src/services/normalization.js

@@ -11,4 +11,14 @@ export const postTable = payload => {
  }).then(response => response.json());
 };
 
-export const fetchStoredTables = () => {};
+export const fetchStoredTables = () => {
+ return fetch("http:https://localhost:58183/api/schema/get").then(response =>
+ response.json()
+ );
+};
+
+export const fetchTableById = id => {
+ return fetch(`http:https://localhost:58183/api/schema/get/${id}`).then(
+ response => response.json()
+ );
+};