Merge pull request #82 from oslabs-beta/dev

Merge from oslabs-beta

Author: sflam2013

README.md

@@ -22,7 +22,7 @@
 
 ### Key Features
 
-1. **Database Connection:** Connect to a PostgreSQL database
+1. **Database Connection:** Connect to a SQL database
 
 2. **Database File Upload:** Upload a database's SQL file
 
@@ -38,6 +38,17 @@
 
 8. **Time Travel:** Provides a history of edits for easier backtracking
 
+9. **Exporting Queries:** Allows updated changes of queries to be saved as a SQL file for client imports to their database
+
+10. **Log Modeling:** Provides a tool for admins to pull, view, modify, and export log settings from an existing database
+
+11. **Compatible SQL Database:** Current dbSpy is compatible with PostgreSQL and MySQL database
+
+12. **Dark Mode** Additional visual setting to provide a more comfortable viewing experience in low-light environements
+
+13. **Database Integrity Assurance** Database Logic Check is performed as the client edits the database to ensure the integrity of the database
+
+14. **Visualizing Individual Table Connections** Relationships of individual tables are now easily identified when clicking on a table. 
 ---
 
 ### Use Cases
@@ -52,6 +63,21 @@ Renders an ER diagram of the existing database and provides an interface for use
 Renders an ER diagram for the provided SQL file (db dump) and provides an interface for a user to both modify existing tables and create new tables. Changes are converted into the corresponding queries, which the user can view and execute on their own database outside of dbSpy.
 </ul>
 </details>
+<details><summary>Exporting executable SQL query with every modification to your schema</summary>
+<ul>
+After modifying/editing the database schemas, users are now able to generate executable queries isolated from their database which decreases security concerns. Users are able to append all the query changes at the end of the new file and save this in their local machines.
+</ul>
+</details>
+<details><summary>Logging modeling</summary>
+<ul>
+After connnection to the database is made the user can view, modify and save the current log settings. This will assist database administrators in keeping efficient log setup in mind during the early stages of DB modeling
+</ul>
+</details>
+<details><summary>Seamlessly visualize relational database</summary>
+<ul>
+After connecting database tables with one another, users are able to render the relationship connections of individual tables by clicking on the tables.
+</ul>
+</details>
 <details><summary>Starting an ER diagram from scratch</summary>
 <ul>
 Provides a canvas for users to create a database by using ER diagrams, thus creating a blueprint for engineering database structures.
@@ -97,10 +123,19 @@ Starting an ER diagram from scratch
 
 Below is a list of features and improvements to which you can contribute. If you have any additional ideas, please raise the issue or implement them as well!
 
-- Screenshot feature - The screenshot feature does presently does not capture the tables with the arrows. It would be best if the features captures everything as it is rendered on the canvas.
-- SQL File Export feature (for new databases) - After a user creates a database from scratch on dbSpy, this feature would create a SQL file with a list of executable queries for them to create that new database on their own.
-- SQL File Export feature (for existing databases) - After a user makes changes to their database's schema, this feature would create a SQL file with a list of executable queries for them to execute those changes on their existing database.
+- Screenshot feature - The screenshot feature does presently capture the tables but the arrows do not align correctly in the screenshot. It would be best if the features captures everything as it is rendered on the canvas.
+- Front-End Optimization - Sprite sheet does not render in browser. 
+- Connecting to elephant SQL database - When connecting to elephant SQL to grab the data from the database, it takes a really long time to load (approximately 2 minutes), optimize the backend so pulling and parsing data doesn't take as long.
+- Logging needs a default settings list and direct reimport into live database. The SQL code to import has been placed into the DB_Schemas folder along with SQL Schema dumps. Also, log setting functionality is currently limited to Postgres databases and the code needs to be expanded to query and display log setting info from MySQL databases
+- Security setting models need to be put in place for database tables as well as log files.
+- Db-schemas - the schemas are saved under db_schemas and is saved in the server. Have a way to delete the schemas on the server from the front end. It would also be convenient to add these schemas to a list of existing schemas and be able to pull these schemas to display for the user to avoid having to make a new connection to the same database multiple times.
+- MySQL database connection - the connection feature currently is not compatible with MySQL database. During development phase, a MySQL database stored at the Google Cloud is used for testing. An authorization issue with Google is met when performing data dump. Suggests to try other MySQL server for development testing.  
+- Expand compatibility with other SQL database such as Oracle SQL, Microsoft SQL, IBM Db2, etc
+-Scrollable Canvas - Able to edit tables and scroll on the right side of the canvas, scrolling does not work on the left side of the canvas. If tables are populated or pushed outside of the canvas on the left side, that table disappears, need to enable scrolling on left side. 
+- Testing - The current result of the supertest could vary based on which mode it is tested on, development or production. When tested in development mode (commented out line 83-84 in server.js), the supertest result would pass with the expected content-type "text, html" returned from the server. However, when the supertest is tested in the production mode, it would fail with 404 Error. 
+    - The current unit test will fail due to ES module error. Have tried to reconfigure webpack by declaring "module: type", rebuild jest configure file...
 - Refactoring - We need help refactoring the codebase according to the Airbnb style guide.
+- Refactoring typescript - Right now, there are an abundance of any's in the types. 
 
 ---
 
@@ -148,6 +183,10 @@ $ npm run dev
 - John Paul Adigwu • [LinkedIn](https://www.linkedin.com/in/johnpaul-adigwu/) • [Github](https://github.com/engineerous)
 - Kevin Park-Lee • [LinkedIn](https://www.linkedin.com/in/kevin38424/) • [Github](https://github.com/kevin38424)
 - Tarik Mokhtech • [LinkedIn](http://linkedin.com/in/tarik-mokhtech) • [Github](https://github.com/MockTech)
+- Brett Guidry • [LinkedIn](https://www.linkedin.com/in/brett-guidry-6b6085107/) • [Github](https://github.com/Lurkbot9000)
+- Emil Mebasser• [LinkedIn](https://www.linkedin.com/in/emil-mebasser-a1a2a815/) • [Github](https://github.com/ejmebasser)
+- Mimi Le • [LinkedIn](https://www.linkedin.com/in/my-le-a94575226/) • [Github](https://github.com/kawaiiyummy14)
+- Samson Lam • [LinkedIn](https://www.linkedin.com/in/samson-lam-455846219/) • [Github](https://github.com/sflam2013)
 
 ---
 

client/App.tsx

@@ -4,6 +4,9 @@ import Home from "./pages/Home";
 import DBDisplay from "./pages/DBDisplay";
 import Login from "./pages/Login";
 import Signup from "./pages/Signup";
+import  "./styles.css"
+
+
 
 export default function App() {
   /*

client/Store.tsx

@@ -1,3 +1,5 @@
+import { query } from "express";
+
 /* Global State: Store - class object*/
 class Store {
   store: Map<{}, {}>;
@@ -7,7 +9,7 @@ class Store {
   userDBInfo: object;
   queryInd: number;
   queries: Map<{}, {}[]>;
-  queryList: {}[];
+  queryList: any;
   counter: number;
 
   /* Description for each global state:
@@ -59,7 +61,6 @@ class Store {
     this.loadedFile = false;
     this.connectedToDB = false;
     this.userDBInfo = {};
-
     this.counter = 0;
   }
 
@@ -128,8 +129,17 @@ class Store {
   getCounter() {
     return this.counter;
   }
-}
 
+  disconnect1() {
+    this.connectedToDB = false;
+  }
+
+  exportData() {
+    const exportData = this.queryList.map((element: any) => element['query'])
+     return (exportData)
+  }
+
+}
 //instance of Store object and assign it to "DataStore"
 const DataStore = new Store();
 export default DataStore;