Merge pull request #2 from slhoehn/router

create dashboard to test graphQL's communication with database

Author: Anthonytorrero

app/electron/main.js

@@ -1,6 +1,9 @@
+
+const electron = require('electron');
+
 /*
 @description: main.js is what controls the lifecycle of the electron application from initialization to termination.
-@actions: codes for Github Oauth has been commented out because of lack of functionality. 
+@actions: codes for Github Oauth has been commented out because of lack of functionality.
 */
 require('dotenv').config();
 const path = require('path');
@@ -13,14 +16,16 @@ const {
   ipcMain,
 } = require('electron');
 
+
+
 // The splash screen is what appears while the app is loading
 const { initSplashScreen, OfficeTemplate } = require('electron-splashscreen');
 const { resolve } = require('app-root-path');
 
 // to install react dev tool extension
 const {
   default: installExtension,
-  REACT_DEVELOPER_TOOLS
+  REACT_DEVELOPER_TOOLS,
 } = require('electron-devtools-installer');
 const debug = require('electron-debug');
 
@@ -30,8 +35,7 @@ const Protocol = require('./protocol');
 const MenuBuilder = require('./menu');
 
 // mode that the app is running in
-const isDev =
-  process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
+const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 const port = 8080;
 const selfHost = `http://localhost:${port}`;
 
@@ -56,11 +60,13 @@ async function createWindow() {
   // Create the browser window.
   win = new BrowserWindow({
     // full screen
-    width: 1920,
-    height: 1080,
+    // width: 1920,
+    // height: 1080,
+    width: 1024,
+    height: 576,
     minWidth: 980,
     // window title
-    title: `ReacType`,
+    title: 'ReacType',
     // the browser window will not display initially as it's loading
     // once the browser window renders, a function is called below  that hides the splash screen and displays the browser window
     show: false,
@@ -83,8 +89,8 @@ async function createWindow() {
       enableRemoteModule: false,
       // path of preload script. preload is how the renderer page will have access to electron functionality
       preload: path.join(__dirname, 'preload.js'),
-      nativeWindowOpen: true
-    }
+      nativeWindowOpen: true,
+    },
   });
 
   // Splash screen that appears while loading
@@ -99,7 +105,7 @@ async function createWindow() {
     logo: resolve('app/src/public/icons/png/64x64.png'),
     color: '#3BBCAF',
     website: 'www.reactype.io',
-    text: 'Initializing ...'
+    text: 'Initializing ...',
   });
 
   // Load app
@@ -122,7 +128,7 @@ async function createWindow() {
   if (isDev) {
     win.webContents.once('dom-ready', () => {
       debug();
-      //win.webContents.openDevTools();
+      win.webContents.openDevTools();
     });
   }
 
@@ -147,13 +153,13 @@ async function createWindow() {
   ses
     .fromPartition(partition)
     .setPermissionRequestHandler((webContents, permission, callback) => {
-      let allowedPermissions = []; // Full list here: https://developer.chrome.com/extensions/declare_permissions#manifest
+      const allowedPermissions = []; // Full list here: https://developer.chrome.com/extensions/declare_permissions#manifest
 
       if (allowedPermissions.includes(permission)) {
         callback(true); // Approve permission request
       } else {
         console.error(
-          `The application tried to request permission for '${permission}'. This permission was not whitelisted and has been blocked.`
+          `The application tried to request permission for '${permission}'. This permission was not whitelisted and has been blocked.`,
         );
 
         callback(false); // Deny
@@ -165,10 +171,10 @@ async function createWindow() {
   // we could use this over _all_ urls
   ses
     .fromPartition(partition)
-    .webRequest.onBeforeRequest({ urls: ['http://localhost./*'] }, listener => {
+    .webRequest.onBeforeRequest({ urls: ['http://localhost./*'] }, (listener) => {
       if (listener.url.indexOf('http://') >= 0) {
         listener.callback({
-          cancel: true
+          cancel: true,
         });
       }
     });
@@ -185,16 +191,27 @@ protocol.registerSchemesAsPrivileged([
       standard: true,
       secure: true,
       allowServiceWorkers: true,
-      supportFetchAPI: true
-    }
-  }
+      supportFetchAPI: true,
+    },
+  },
 ]);
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', createWindow);
 
+// TRYING ELECTRON-WINDOW-MANAGER When the application is ready
+
+// app.on('ready', () => {
+//   windowManager.setDefaultSetup({'width': 800, 'height': 450, 'position': 'right'});
+//   // Open Dashboard window
+//   const dashboard = windowManager.open('home', 'Welcome ...', 'http://localhost:5000/home.html');
+//   dashboard.toggleDevTools(false);
+//   // Load ReacType window
+//   createWindow();
+// });
+
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
   app.quit();
@@ -223,16 +240,15 @@ app.on('web-contents-created', (event, contents) => {
       'https://www.facebook.com',
       'https://developer.mozilla.org',
       'https://www.smashingmagazine.com',
-      'https://www.html5rocks.com'
+      'https://www.html5rocks.com',
     ];
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
     if (!validOrigins.includes(parsedUrl.origin)) {
       console.error(
-        `The application tried to navigate to the following address: '${parsedUrl}'. This origin is not whitelisted attempt to navigate was blocked.`
+        `The application tried to navigate to the following address: '${parsedUrl}'. This origin is not whitelisted attempt to navigate was blocked.`,
       );
       // if the requested URL is not in the whitelisted array, then don't navigate there
       event.preventDefault();
-      return;
     }
   });
 
@@ -247,20 +263,19 @@ app.on('web-contents-created', (event, contents) => {
       'https://developer.mozilla.org',
       'https://www.facebook.com',
       'https://www.smashingmagazine.com',
-      'https://www.html5rocks.com'
+      'https://www.html5rocks.com',
     ];
 
     // Log and prevent the app from redirecting to a new page
     if (
-      !validOrigins.includes(parsedUrl.origin) &&
-      !validOrigins.includes(parsedUrl.href)
+      !validOrigins.includes(parsedUrl.origin)
+      && !validOrigins.includes(parsedUrl.href)
     ) {
       console.error(
-        `The application tried to redirect to the following address: '${navigationUrl}'. This attempt was blocked.`
+        `The application tried to redirect to the following address: '${navigationUrl}'. This attempt was blocked.`,
       );
 
       event.preventDefault();
-      return;
     }
   });
 
@@ -290,16 +305,15 @@ app.on('web-contents-created', (event, contents) => {
       'https://github.com',
       'https://www.facebook.com',
       'https://www.smashingmagazine.com',
-      'https://www.html5rocks.com'
+      'https://www.html5rocks.com',
     ];
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
     if (!validOrigins.includes(parsedUrl.origin)) {
       console.error(
-        `The application tried to open a new window at the following address: '${navigationUrl}'. This attempt was blocked.`
+        `The application tried to open a new window at the following address: '${navigationUrl}'. This attempt was blocked.`,
       );
       // if the requested URL is not in the whitelisted array, then don't navigate there
       event.preventDefault();
-      return;
     }
   });
 });
@@ -331,15 +345,15 @@ app.on('remote-get-current-web-contents', (event, webContents) => {
 // When a user selects "Export project", a function (chooseAppDir loaded via preload.js)
 // is triggered that sends a "choose_app_dir" message to the main process
 // when the "choose_app_dir" message is received it triggers this event listener
-ipcMain.on('choose_app_dir', event => {
+ipcMain.on('choose_app_dir', (event) => {
   // dialog displays the native system's dialogue for selecting files
   // once a directory is chosen send a message back to the renderer with the path of the directory
   dialog
     .showOpenDialog(win, {
       properties: ['openDirectory'],
-      buttonLabel: 'Export'
+      buttonLabel: 'Export',
     })
-    .then(directory => {
+    .then((directory) => {
       if (!directory) return;
       event.sender.send('app_dir_selected', directory.filePaths[0]);
     })

app/electron/render.js

@@ -0,0 +1,10 @@
+<script>
+    var remote = require('remote');
+    var windowManager = remote.require('electron-window-manager');
+
+    // Create a new window
+    var win2 = windowManager.createNew('win2', 'Windows #2');
+    win2.setURL('/win2.html');
+    win2.onReady( ... );
+    win2.open();
+</script>

app/src/Dashboard/Form.jsx

@@ -0,0 +1,13 @@
+
+import React from 'react';
+
+
+const Form = (props) => {
+  return (
+  <div className = 'form'>
+    <h2>{ props.description }</h2>
+    <button id={ props.id }>heart</button>
+  </div>);
+};
+
+export default Form;

app/src/Dashboard/FormsContainer.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { gql, useQuery } from '@apollo/client';
+import Form from './Form.jsx';
+
+// Implement Apollo Client useQuery hook to retrieve data from the server through graphQL. This includes 2 steps:
+// 1) Impliment Apollo Provider in the top component in ./src/index.js, this allows children components access to the queried data
+// 2) useQuery hook will update the data stored in Apollo Client's cache and automatically trigger child components rendering
+
+const FormsContainer = () => {
+  // define the graphQL query string
+  const GET_TESTS = gql`query {readAllTests { description id }}`;
+  // useQuery hook abstracts fetch request
+  const { loading, error, data } = useQuery(GET_TESTS);
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error :{error}</p>;
+  // based on resolver(readAllTests) for this query, the data is stored in the data object with the key 'readAllTests'
+  const myTests = data.readAllTests;
+  // generate an array of Form components based on data
+  const forms = myTests.map((test, index) => <Form key={index} id={test.id} description={test.description} />);
+
+  return (
+      <div>
+        <Link to="/">
+          <button type="button">Go Back</button>
+        </Link>
+        {forms}
+      </div>
+  );
+};
+
+export default FormsContainer;

app/src/Dashboard/styles.css

@@ -0,0 +1,25 @@
+/* @import url('https://fonts.googleapis.com/css2?family=Cabin&family=Oswald&display=swap');
+
+
+$primary-black: #22292f;
+$secondary-black: #606f7b;
+$teriary-grey: #f0f0f0;
+$light-grey: #bfcbd4;
+$light-blue: #759cc9;
+$button-blue: #24BCFF; */
+
+.form {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  border: 1px solid  #f0f0f0;
+  box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  margin: 5px;
+  border-radius: 5px;
+  color: #606f7b;
+  align-items: center;
+  height: 300px;
+  justify-content: min;
+  width: 250px;
+}
+

app/src/components/top/NavBar.tsx

@@ -28,6 +28,14 @@ import createModal from '../right/createModal';
 import StateContext from '../../context/context';
 import logo from '../../public/icons/win/logo.png';
 
+
+
+// ROUTING TO DASHBOARD 
+import { Link } from "react-router-dom";
+
+
+
+
 // NavBar text and button styling
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -158,6 +166,21 @@ export default function NavBar(props) {
           <Typography variant="h6" style={{marginLeft: '1rem'}} className={classes.title}>
             ReacType
           </Typography>
+
+          {/* ==================================Dashboard Button================================================== */}
+          <Link to='/dashboard'>
+            <Button
+              variant="contained"
+              color="primary"
+              style={{minWidth: '137.69px'}}
+              className="navbarButton" 
+              id="navbarButton1"
+            >
+              Dashboard
+            </Button>
+          </Link>
+          {/* ==================================Dashboard Button================================================== */}
+
           <Button 
             variant="contained"
             color="primary"