Initial Commit

snmln · Dec 21, 2020 · 5318d5b · 5318d5b
1 parent 10bb586
commit 5318d5b
Show file tree

Hide file tree

Showing 21 changed files with 119,796 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,8 @@
-# QH-Vendor-Tool
-Front end tool built to take in .csv files and convert them to usable HTML markdown for production team to implement.
+# React Drag n' Drop
+
+In this demo we handle drag n' drop file functionality in React in order to parse CSV files, extracting contact defaults to place into our state.
+
+- Source: https://github.com/leighhalliday/react-drag-drop-csv-file
+- React Dropzone: https://react-dropzone.js.org/
+- JavaScript File: https://developer.mozilla.org/en-US/docs/Web/API/File
+- Learn JavaScript, React & more with Treehouse (affiliate link): https://treehouse.7eer.net/c/1214671/228915/3944
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "droppable",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/react-fontawesome": "^0.1.13",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "eslint": "6.6.0",
+    "git": "^0.1.5",
+    "js-beautify": "^1.13.0",
+    "papaparse": "^5.2.0",
+    "react": "^16.14.0",
+    "react-copy-to-clipboard": "^5.0.2",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.2.1"
+  },
+  "scripts": {
+    "start": "npm run watch:css && react-scripts start",
+    "build": "npm run build:css && react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
+    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.7.6",
+    "postcss-cli": "^7.1.1",
+    "tailwindcss": "^1.4.1"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,4 @@
+const tailwindcss = require("tailwindcss");
+module.exports = {
+  plugins: [tailwindcss("./tailwind.js"), require("autoprefixer")],
+};
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<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" />
+    <link rel="stylesheet" type="text/css" href="style.css"/>
+    <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`.
+    -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom-server.browser.production.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.0/beautify-html.min.js"></script>
+
+
+    <title>React App</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
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,7 @@
+pre {
+    white-space: pre-wrap;       /* css-3 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+   }
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,207 @@
+// Quantum Health December, 2020
+// Sean Malone Front-end Developer
+// contact: sean.malone@quantum-health.com
+
+import React, { useRef, useState } from 'react';
+import { parse } from "papaparse";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
+import './toast.css'
+
+
+export default function App() {
+  const [highlighted, setHighlighted] = React.useState(false);
+  let [contacts, setContacts] = React.useState([]);
+  let newduplicateArray = contacts;
+  const textAreaRef = useRef(null);
+  const toastNotificationRef = useRef(null);
+  const [copySuccess, setCopySuccess] = React.useState(false)
+
+
+//toast closed and setting copy status to false
+  function toastClose(){
+    setTimeout(function(){setCopySuccess(false)}, 1000)
+    console.log(copySuccess)
+  }
+
+//copy code button functionality
+  function copyText(e) {
+    setCopySuccess(true)
+    textAreaRef.current.select()
+    document.execCommand('copy')
+    e.target.focus();
+    setTimeout(function(){setCopySuccess(false)}, 4000)
+  }
+
+
+//Clear text area 
+  function clearText(e){
+    e.preventDefault();
+    textAreaRef.current.value ='';
+    setContacts((existing) => []);
+  };
+
+
+//checks url for appropriate formatting
+  function checkUrl() {
+    for (let i = 0; i < newduplicateArray.length; ++i) {
+      let contact = newduplicateArray[i];
+//if not lead in formatting at all it will be added and returned
+      if (!contact.url.includes("https://") && !contact.url.includes("http://") &&  !contact.url.includes("www.")) {
+        var hypertextTransferWorldWideWeb = "http://www."
+        contact.url = hypertextTransferWorldWideWeb.concat(contact.url)
+//if only contains www. lead in remaining "https://" will be added
+      } else if (!contact.url.includes("https://") && !contact.url.includes("http://")&& contact.url.includes("www.")) {
+        var hypertextTransfer = "http://"
+        contact.url = hypertextTransfer.concat(contact.url)
+      }
+    }
+  };
+
+//Validate Phone Numbers
+  function validatePhoneNumber(){
+
+    var phoneno =/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
+    var emptyNumber = '';
+        for (let i = 0; i < newduplicateArray.length; ++i){
+      let contact = newduplicateArray[i];
+
+     if(!contact.phoneNumber.match(phoneno) && contact.phoneNumber.length > 1){
+        let errorMessage = "CHECK THIS PHONE NUMBER-->"
+        contact.phoneNumber = errorMessage.concat(contact.phoneNumber)
+        console.log(contact.phoneNumber);
+      }
+  }
+}
+
+//final markup string created conditionally based on what information was provided.
+  let createMarkUp = newduplicateArray.map((contact) => {
+//if there is an SSO item it will print out the script 
+    if (contact.SSO.length != "") {
+      return `
+      <p>${contact.Description}<br>
+        <a 
+        class="link__external" 
+        href="{$SiteDomain}${contact.SSO}" 
+        target="_blank" sso-link>${contact.Name}
+        </a>
+      </p>`
+    } else if (contact.phoneNumber.length <= 0) {
+//if there is no telephone number
+      return `
+      <p>${contact.Description}<br>
+            <a 
+              class="link__external" 
+              href="${contact.url}" 
+              target="_blank">${contact.Name}
+            </a>
+      </p>`
+    } else if (contact.phoneNumber) {
+//if there is a telephone number
+      return `
+      <p>${contact.Description}<br>
+            <a 
+              class="link__external" 
+              href="${contact.url}" 
+              target="_blank">${contact.Name}
+            </a>
+               &ensp;
+            <a href="tel:">${contact.phoneNumber}
+                </a>
+      </p>`
+    }
+  }
+  );
+
+function ValidateArray(){
+  validatePhoneNumber()
+  checkUrl()
+  //console.log('validateArray was run')
+}
+
+
+//toast notification 
+  let toastNotification = (
+    <div onClick={toastClose} className="alert-toast fixed bottom-0 right-0 m-8 w-5/6 md:w-full max-w-sm" >
+      <input type="checkbox" className="hidden" id="footertoast" ref={toastNotificationRef} />
+      <label 
+      className="close cursor-pointer flex items-start justify-between w-full p-2 bg-green-500 h-24 rounded shadow-lg text-white" title="close" 
+      >
+        Copied to Clipboard!
+      <svg className="fill-current text-white" width="18" height="18" viewBox="0 0 18 18">
+          <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
+        </svg>
+      </label>
+    </div>
+  );
+
+
+//rendered information below
+  return (
+    <div className="flex space-x-4n m-0 ">
+{/*Dropzone for .csv file*/}
+      <div
+        className={` flex flex-wrap content-center h-auto  p-6 w-2/12  ${highlighted ? "border-blue-600 bg-blue-100" : "border-gray-600"
+          }`}
+        onDragEnter={() => {
+          setHighlighted(true);
+        }}
+        onDragLeave={() => {
+          setHighlighted(false);
+        }}
+        onDragOver={(e) => {
+          e.preventDefault();
+        }}
+
+        onDrop={(e) => {
+          e.preventDefault();
+          setHighlighted(false);
+          Array.from(e.dataTransfer.files)
+            .filter((file) => file.type === "text/csv")
+            .forEach(async (file) => {
+              const text = await file.text();
+              const result = parse(text, { header: true });
+              setContacts((existing) => [...existing, ...result.data]);
+            });
+        }}
+      >
+        <div className={`text-center mx-auto text-3xl p-5 text-gray-500 ${highlighted ? "text-gray-800" : "border-gray-600"
+          }`}>
+          DROP .CSV HERE
+          <div>
+            <FontAwesomeIcon icon={faArrowDown} size="lg" />
+          </div>
+        </div>
+      </div>
+
+      <div className="relative flex flex-col h-screen w-10/12 p-6 justify-self-center bg-gray-800	">
+{/*Text area where code will populate*/}
+        <textarea className="resize-none bg-gray-800 text-white overflow-auto h-full w-full m-0"
+        onChange={ValidateArray()}
+          ref={textAreaRef}
+          placeholder="Code will appear below:"
+          value={createMarkUp.join("")}
+        >        
+
+
+        </textarea>
+        <div className=" relative bottom-0 mt-6">
+{/* Copy code button */}
+
+          <button onClick={copyText}
+            className="text-white bg-transparent border border-solid border-white hover:bg-white hover:text-gray-800  active:bg-white font-bold uppercase px-8 py-3 rounded outline-none focus:outline-none mr-1 mb-1"
+            type="button" >
+            Copy code
+          </button>
+{/* clear content button */}
+             <button onClick={clearText}
+            className="text-white bg-transparent border border-solid border-white hover:bg-white hover:text-gray-800  active:bg-white font-bold uppercase px-8 py-3 rounded outline-none focus:outline-none ml-8 mb-1"
+            type="button" >
+            Clear 
+          </button>
+        </div>
+        { copySuccess ? <div>{toastNotification}</div> : null}
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/toastNotification.js b/src/Components/toastNotification.js
@@ -0,0 +1,23 @@
+
+import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
+import './toast.css'
+
+export class toastNotificationtab extends Component {
+    render(){
+        return(
+        <div class="alert-toast fixed bottom-0 right-0 m-8 w-5/6 md:w-full max-w-sm">
+            <input type="checkbox" class="hidden" id="footertoast" />
+
+            <label class="close cursor-pointer flex items-start justify-between w-full p-2 bg-green-500 h-24 rounded shadow-lg text-white" title="close" for="footertoast">
+                Copied to Clipboard!
+
+   <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+                    <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
+                </svg>
+            </label>
+        </div>
+        );
+
+};
+}