From 1ec93674fb5b02072c6a451d5336e8835205057d Mon Sep 17 00:00:00 2001
From: Camerin Figueroa <cam@camscode.com>
Date: Thu, 24 Feb 2022 13:51:55 -0500
Subject: [PATCH] Added Error Messaging to BAI Page

---
 public/index.html            |  3 ++-
 src/actions/index.js         | 10 ++++++++++
 src/components/Bai.js        | 26 +++++++++++++++++++++-----
 src/components/css/Bai.css   | 13 +++++++++++++
 src/reducers/modelReducer.js |  2 ++
 5 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/public/index.html b/public/index.html
index b5ab2d4..d62e08b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -44,6 +44,7 @@
   
   <!-- Hotjar Tracking Code for https://www.camscode.com -->
   <script>
+    /*
     (function(h,o,t,j,a,r){
         h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
         h._hjSettings={hjid:2739788,hjsv:6};
@@ -51,6 +52,6 @@
         r=o.createElement('script');r.async=1;
         r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
         a.appendChild(r);
-    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');*/
   </script>
 </html>
diff --git a/src/actions/index.js b/src/actions/index.js
index e74406b..f1b36fe 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -137,6 +137,16 @@ export const predict = (image) => async (dispatch, getState) => {
   return prediction;
 };
 
+export const error_msg = (message) => async (dispatch, getState) => {
+  
+  console.log(message);
+
+  dispatch({
+    type: 'SET_ERROR',
+    payload: message
+  });
+};
+
 export const nextPage = () => async (dispatch, getState) => {
   let page = getState().github.page;
   page++;
diff --git a/src/components/Bai.js b/src/components/Bai.js
index c9daff7..72a0245 100644
--- a/src/components/Bai.js
+++ b/src/components/Bai.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import {downloadModel, loadingModel, predict} from '../actions'
+import {downloadModel, loadingModel, predict, error_msg} from '../actions'
 import ProgressBar from "./subcomponents/ProgressBar";
 //import { Link } from 'react-router-dom';
 import './css/Bai.css';
@@ -17,13 +17,23 @@ class Bai extends React.Component {
     document.title = "Blank AI";
   }
 
+  extExtractor (filename) {
+    let name = filename.split('.');
+    let ext = name[name.length-1];
+    return ext
+  }
+
   async fileUpload (target, predict) {
 
     const [file] = target.files;
 
     let image = document.getElementById("preview")  
 
-    if (file) {
+    let image_ext = ['jpg', 'png'];
+
+    let file_ext = await this.extExtractor(file.name);
+
+    if (file && image_ext.includes(file_ext)) {
 
         let imageBM = await createImageBitmap(file);
         
@@ -33,6 +43,8 @@ class Bai extends React.Component {
 
         image.src = await URL.createObjectURL(file);
         image.classList.add('show');
+    } else {
+      this.props.error_msg('Please pass JPG or PNG file Only');
     }
   }
 
@@ -62,7 +74,11 @@ class Bai extends React.Component {
             <h1>BAI Model Prediction</h1>
 
             <p className="prediction">{this.props.last_prediction ? this.declassify(this.props.last_prediction[0]):"Waiting for Prediction"}</p>
-        
+            
+            <div className={"error " + (this.props.error?'enable':'')}>
+              {this.props.error}
+            </div>
+
             <img id="preview" alt="preview of predicted file"/>
 
             <input type='file' id="fileSubmit" onChange={({target}) => this.fileUpload(target, this.props.predict)} />
@@ -84,7 +100,7 @@ class Bai extends React.Component {
   }
 }
 const mapStateToProps = (state) => {
-  return {model: state.model.model, loading: state.model.loading, last_prediction: state.model.last_prediction, downloadProgress: state.model.progress};
+  return {model: state.model.model, loading: state.model.loading, last_prediction: state.model.last_prediction, downloadProgress: state.model.progress, error: state.model.error};
 }
 
-export default connect(mapStateToProps, {downloadModel, loadingModel, predict})(Bai);
+export default connect(mapStateToProps, {downloadModel, loadingModel, predict, error_msg})(Bai);
diff --git a/src/components/css/Bai.css b/src/components/css/Bai.css
index 49d1b9b..b72d612 100644
--- a/src/components/css/Bai.css
+++ b/src/components/css/Bai.css
@@ -69,4 +69,17 @@
 
 .Bai .hide {
     display: none;
+}
+
+.Bai .error {
+    display:none;
+}
+
+.Bai .error.enable{
+    justify-content: center;
+    display:flex;
+    color: white;
+    background-color: #CB2323;
+    padding: 8px;
+    border-radius: 5px;
 }
\ No newline at end of file
diff --git a/src/reducers/modelReducer.js b/src/reducers/modelReducer.js
index a6a3d7d..447ea74 100644
--- a/src/reducers/modelReducer.js
+++ b/src/reducers/modelReducer.js
@@ -7,6 +7,8 @@ let modelReducer = (state={model: null, loading: "", progress: 0}, action) => {
         return { ...state, loading: action.payload };
       case 'SET_LAST_PRED':
         return { ...state, last_prediction: action.payload };
+      case 'SET_ERROR':
+        return { ...state, error: action.payload };
       case 'SET_PROGRESS':
         return { ...state, progress: action.payload };