Sean final

.gitignore

@@ -21,3 +21,4 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.gitignore

client/package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
+    "moment": "^2.29.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",

client/src/App.js

@@ -1,12 +1,15 @@
 import { useCallback, useEffect, useState } from "react";
 import axios from "axios";
+import Time from "./Time";
+import PalForm from "./PalForm";
 
 axios.defaults.baseURL = 'http://localhost:5000';
 axios.defaults.headers.post['Content-Type'] = 'applicatin/json';
 
 function App() {  
   const [palindromeList, setPalindromList] = useState([]);
 
+
   const loadList = useCallback(async (abortToken) => {
     const result = await axios.get('/api/palindromes');
 
@@ -33,12 +36,14 @@ function App() {
         <p>
           This is the bootcamp final.
         </p>
+        <Time />
+        <PalForm updateList={() => loadList()}/>
         {
           <ul>
             {
               palindromeList.map(
                 (palindrome, index) => <li key={index}>
-                  {palindrome}
+                  {(typeof palindrome === 'string') ? palindrome : palindrome.val + ' ' + palindrome.time}
                 </li>
               )
             }

client/src/PalForm.js

@@ -0,0 +1,69 @@
+import React, {  useState } from 'react';
+import moment from 'moment';
+import isPalindrome from './isPalindrome';
+import axios from 'axios';
+
+axios.defaults.baseURL = 'http://localhost:5000';
+axios.defaults.headers.post['Content-Type'] = 'applicatin/json';
+
+const PalForm = ({ updateList }) => {
+    const [pal, setPal] = useState({
+        val: '',
+        isPal: true
+    });
+
+    const onInput = (e) => {
+        let newVal = e.target.value;
+        setPal(
+            {
+                val: newVal,
+                isPal: isPalindrome(newVal)
+            });
+    }
+
+    const display = (bool) => {
+        if (bool) {
+            return 'is a palindrome'
+        } else {
+            return ''
+        }
+    }
+
+    const subPal = async (e) => {
+        e.preventDefault()
+        const options = {
+            method: 'post',
+            url: '/api/palindromes',
+            data: {
+                time: moment().format('MMMM Do YYYY, h:mm a'),
+                ...pal
+            }
+        }
+        try {
+            await axios(options);
+            updateList();
+        } catch (error) {
+            if(error.response && error.response.data.includes('The palindrome')){
+                alert(error.response.data)
+            } else {
+                alert(error)
+            }
+        } finally {
+            setPal(
+                {
+                    val: '',
+                    isPal: true
+                });
+        }
+    }
+
+    return (
+        <form onSubmit={(e) => {e.preventDefault(); subPal(e)}}>
+            <input type='text' value={pal.val} onChange={onInput}/>
+            <span>{display(pal.isPal)}</span>
+            {pal.isPal && <button type='button' onClick={subPal}>Add</button>}
+        </form>
+    )
+}
+
+export default PalForm

client/src/Time.js

@@ -0,0 +1,19 @@
+import React, { useState } from "react"
+import moment from "moment"
+
+const Time = () => {
+    const [currentTime, setCurrentTime] = useState(moment().format('MMMM Do YYYY, h:mm a'));
+
+    setInterval(
+        () => setCurrentTime(moment().format('MMMM Do YYYY, h:mm a')),
+        1000
+    )
+
+    return (
+        <span>
+            {currentTime}
+        </span>
+    )
+}
+
+export default Time

client/src/isPalindrome.js

@@ -0,0 +1,22 @@
+function isPalindrome (str) {
+    let arr = str.split('')
+    for (let i = 0, h = arr.length - 1; i < (arr.length / 2); i++, h--) {
+        while (arr[i].match(/\W/)){
+            i++;
+        }
+        while (arr[h].match(/\W/)) {
+            h--;
+        }
+        if (arr[i] !== arr[h]) {
+            return false;
+        }
+    }
+    return true
+}
+
+export default isPalindrome
+
+// let arrTest = ['sts', 'hello', 'whyyhw', '', 'why the, ere, htyhw?', 'hh', 'he']
+// for (let x in arrTest) {
+//     console.log(isPalindrome(arrTest[x]))
+// }