Added Description Component

JonFromNYC · Jul 24, 2020 · 46aa184 · 46aa184
1 parent b133a05
commit 46aa184
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 241 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,42 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>AG-Grid Demo</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.js b/src/App.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import './App.scss';
 import { AgGridReact } from 'ag-grid-react';
 import 'ag-grid-enterprise';
+import Description from './Components/Description.component';
 
 
 class App extends Component {
@@ -50,13 +51,7 @@ class App extends Component {
           autoGroupColumnDef={this.state.autoGroupColumnDef}
           rowData={this.state.rowData}>
         </AgGridReact>
-        <div>
-          <p>This is a React Component using AG-Grid to make an interactive pivot table.</p>
-          You can select multiple rows. Group/Ungroup the list of cars. 
-          <p>Sort or Filter the grid will display a small column menu icon when you hover the header.
-          Pressing it will display a popup with a filtering UI which lets you choose the kind of filter and the text that you want to filter by.</p>
-          Right Clicking brings the options to export to .csv, .xml, or .xlsx.
-        </div>
+        <Description />
       </div>
     );
   }

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/Components/Description.component.jsx b/src/Components/Description.component.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+const Description = () => {
+    return (
+        <div>
+            <p>This is a React Component using AG-Grid to make an interactive pivot table.</p>
+          You can 
+          <ul>
+                <li>Select multiple rows</li>
+                <li>Group/Ungroup the list of cars</li>
+                <li>Sort or Filter the grid when you hover over the column names the filter appears
+                </li>
+                <li>Right Click to export to .csv, .xml, or .xlsx.</li>
+                <li>Save selections you've checked off and save them to a database.
+                    Click a few boxes and then click "Get Selected Rows"
+                </li>
+          </ul>
+          Try this
+            <ol>
+                <li>Click the <span style={{ border: '1px solid lightGrey', padding: '0px 3px 0px 3px'}}>›</span> button to the left of Ford.</li>
+                <li>Click the checkbox to select one of the rows from the list that dropped down</li>
+                <li>Now click the <span style={{ border: '1px solid lightGrey', padding: '0px 3px 0px 3px' }}>›</span> button to the left of Porsche.</li>
+                <li>Click the first checkbox in this drop down</li>
+                <li>Click the <span style={{ border: '1px solid lightGrey', padding: '0px 3px 0px 3px' }}>Get Selected rows</span> button to save what you selected</li>
+                <li>Next, test the exporting functions. Right click the last row you selected. Mouse over to Export and choose the export option of your choice.</li>
+                <li>Last, hover the cursor over any column name. A menu button will appear. Click the menu button and try some of the extra features.</li>
+            </ol>
+        </div>
+    );
+};
+
+export default Description;
diff --git a/src/index.js b/src/index.js
@@ -2,16 +2,5 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+ReactDOM.render(<App />,document.getElementById('root'));
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
diff --git a/src/setupTests.js b/src/setupTests.js