Dalene final

client/package.json

@@ -7,8 +7,11 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.33",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-moment": "^1.1.1",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

client/src/App.js

@@ -1,19 +1,22 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, onSubmit } from "react";
 import axios from "axios";
+import Time from "./currentTime";
+import PalindromeInput from "./palindromeInput";
+import React from 'react';
 
 axios.defaults.baseURL = 'http://localhost:5000';
-axios.defaults.headers.post['Content-Type'] = 'applicatin/json';
+axios.defaults.headers.post['Content-Type'] = 'application/json';
 
 function App() {  
-  const [palindromeList, setPalindromList] = useState([]);
+  const [palindromeList, setPalindromeList] = useState([]);
 
   const loadList = useCallback(async (abortToken) => {
     const result = await axios.get('/api/palindromes');
 
     if (!abortToken || !abortToken.aborted) {
-      setPalindromList(result.data);
+      setPalindromeList(result.data);
     }
-  }, [setPalindromList]);
+  }, [setPalindromeList]);
 
   useEffect(
     () => {
@@ -27,18 +30,53 @@ function App() {
     }, [loadList]
   );
 
+  class moment extends React.Component {
+
+  }
+
+  class SimpleForm extends React.Component {
+    constructor(props) {
+      super(props);
+      this.nameEl = React.createRef();
+      this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleSubmit(e) {
+      e.preventDefault();
+      alert(this.nameEl.current.value);
+    }
+
+    render() {
+      return (
+        <form onSubmit={this.handleSubmit}>
+          <label>
+            <input type="text" ref={this.nameEl} />
+            is a palindrome
+          </label>
+          <input type="submit" name="Submit" />
+        </form>
+      )
+    }
+  }
+
   return (
     <div className="App">
       <header className="App-header">
         <p>
           This is the bootcamp final.
         </p>
+
+          <Time /> 
+
+          <PalindromeInput onSubmit={onSubmit}/>
+
+          <SimpleForm/>
         {
           <ul>
             {
               palindromeList.map(
                 (palindrome, index) => <li key={index}>
-                  {palindrome}
+                  {palindrome.item} {palindrome.date}
                 </li>
               )
             }

client/src/currentTime.js

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+
+const moment = require ("moment");
+
+const CurrentTime = () => {
+  let time = moment().format('MMMM Do YYYY, h:mm:ss a');
+  const [ctime, setCtime] = useState(time);
+  const UpdateTime = () => {
+    time = moment().format('MMMM Do YYYY, h:mm:ss a')
+    setCtime(time);
+  };
+  setInterval(UpdateTime, 1000);
+  return(
+    <>
+      <p>{ctime}</p>
+    </>
+  );
+};
+
+export default CurrentTime;

client/src/isPalindrome.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const isPalindrome = str => {
+  let newStr = str.replace(/[^aa-zA-Z\d]/g, '');
+  let compare = newStr.split('').reverse().join('');
+  return newStr.toLowerCase() === compare.toLowerCase();
+
+    // const stack = "";
+
+    // for (let i = 0; i < str.length; i++) {
+    //   stack.push(str[i]);
+    // }
+    // let front; let end;
+    // while (
+    //   stack.length === 1 ||
+    //   ((end = stack.pop()) && (front = stack.shift()))
+    // ) {
+    //   if (front != end) {
+    //     return false;
+    //   }
+    // }
+    // return true;
+}
+
+    export { isPalindrome };

client/src/palindromeInput.js

@@ -0,0 +1,51 @@
+import axios from 'axios';
+import React, { useState } from 'react';
+import { isPalindrome } from './isPalindrome';
+
+
+function PalindromeInput(props) {
+    const [data, setData] = useState('');
+    const [palindrome, setPalindrome] = useState(false);
+
+    const onChange = (e) => {
+        let letters = e.target.value;
+        setData(letters);
+        let result = isPalindrome(letters);
+        setPalindrome(result);
+    }
+
+    const onSubmit = () => {
+        props.onSubmit(data);
+        setData('');
+    }
+
+    return (
+        <>
+            <div>
+                {palindrome === true ? (
+                    <span>
+                        <input
+                            type='text'
+                            name='data'
+                            value={data}
+                            onChange={onChange}
+                        />
+                        <input  
+                            type='submit'
+                            value='Add'
+                            onClick={onSubmit}
+                        />
+                    </span>
+                ) : (
+                    <input  
+                            type='text'
+                            value={data}
+                            onChange={onChange}
+                        />
+                    )}
+            </div>
+        </>
+    )
+};
+
+export default PalindromeInput;