Using Toasts and updated page layout

src/components/SingleFileUpload.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react"
+import { useToasts } from '@geist-ui/core';
 import PropTypes from "prop-types"
 
 export var fileContent = "{}"
@@ -8,9 +9,15 @@ function SingleFileUpload({ onFileUploaded }) {
   const [, setFile] = useState()
   const [fileUploaded, setFileUploaded] = useState(false)
 
+  const { setToast } = useToasts()
+  const showSuccessToast = () => setToast({ text: "File successfully uploaded", delay: 2000 });
+  const showInvalidCSVToast = () => setToast({ text: "Invalid CSV File", delay: 2000 });
+  const showInvalidFileToast = () => setToast({ text: "Wrong file type", delay: 2000 });
+
   useEffect(() => {
     if (fileUploaded) {
       onFileUploaded()
+      showSuccessToast();
     }
     if (uploadFailed && !fileUploaded) {
       onFileUploaded()
@@ -20,7 +27,7 @@ function SingleFileUpload({ onFileUploaded }) {
   // Reads file.
   var readCallback = function (csvRawData) {
     if (!checkCSVValidity(csvRawData)) {
-      alert("Invalid CSV File")
+      showInvalidCSVToast();
       uploadFailed = true
       setFileUploaded(false)
       fileContent = {}
@@ -49,7 +56,7 @@ function SingleFileUpload({ onFileUploaded }) {
     reader.onload = function (evt) {
       var uploadedFile = document.getElementById("fileInput").files[0]
       if (uploadedFile.type != "application/vnd.ms-excel") {
-        alert("Wrong file type")
+        showInvalidFileToast();
         fileContent = "{}"
         return
       }

src/index.js

@@ -4,7 +4,7 @@ import "./index.css"
 import TimelineAreaChart from "./components/TimelineAreaChart"
 import TotalPieChart from "./components/TotalPieChart"
 import SingleFileUploader, { fileContent } from "./components/SingleFileUpload"
-import { GeistProvider, CssBaseline, Tabs } from "@geist-ui/core"
+import { GeistProvider, Page, CssBaseline, Tabs } from "@geist-ui/core"
 
 export default function App() {
   const [fileUploaded, setFileUploaded] = useState(false)
@@ -18,6 +18,7 @@ export default function App() {
   }
 
   return (
+    <Page>
     <GeistProvider>
       <CssBaseline />
       <Tabs initialValue="1">
@@ -25,11 +26,14 @@ export default function App() {
           <SingleFileUploader onFileUploaded={handleUploadedFile} />
           <br />
           <hr />
-          <h3>How to upload a file</h3>
-          <p>
-            Go to Clockify → Reports → Summary → Time Report (Detailed) → Export (As
-            a CSV file)
-          </p>
+          <h3>How to upload a file:</h3>
+          <ul>
+            <li>Go to Clockify</li>  
+            <li>Reports</li>
+            <li>Summary</li>
+            <li>Time Report (Detailed)</li>
+            <li>Export (As a CSV file)</li>
+          </ul>
         </Tabs.Item>
         <Tabs.Item label="Project timeline" value="2" disabled={!fileUploaded}>
           <TimelineAreaChart />
@@ -39,6 +43,7 @@ export default function App() {
         </Tabs.Item>
       </Tabs>
     </GeistProvider>
+    </Page>
   )
 }