Stephieg

package.json

@@ -24,7 +24,8 @@
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.21.0",
     "react-scripts": "^5.0.1",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^9.1.3",
+    "styled-components": "^6.1.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",
@@ -36,4 +37,4 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "vite": "^5.0.8"
   }
-}
+}

src/App.jsx

@@ -1,42 +1,74 @@
-// import { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
-import { ToastContainer } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
-import { withAuth0 } from '@auth0/auth0-react';
-
-// import Header from './components/Header'
-import Dashboard from './pages/Dashboard'
-// import Comments from './pages/Comments'
-// import Login from './pages/Login'
-// import Register from './pages/Register'
-import AuthButtons from './Auth/AuthButtons.jsx';
-
-function App({ auth0 }) {
-  // useEffect(() => {
-  //   if(auth0.isAuthenticated) {
-  //     getDogs();
-  //   }
-  // }, [auth0.isAuthenticated]);
+// import React from 'react';
+// import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+// import { ToastContainer } from 'react-toastify';
+// import 'react-toastify/dist/ReactToastify.css';
+// import { withAuth0 } from '@auth0/auth0-react';
+// import Header from './components/Header.jsx';
+// import Dashboard from './pages/Dashboard';
+// import AuthButtons from './Auth/AuthButtons.jsx';
+// import { UserProvider } from './Auth/UserContext'; 
 
+
+// function App({ auth0 }) {
+//     return (
+//         <UserProvider>
+//             <>
+//                 {/* AUTHBUTTON FOR AUTH0 LOGIN */}
+//                 <AuthButtons />
+
+//                 <Router>
+//                     <div className='container'>
+//                         <Header />
+//                         <Routes>
+//                             {auth0.isAuthenticated && <Route path='/' element={<Dashboard auth0={auth0} />} />}
+//                             {/* Other routes */}
+//                         </Routes>
+//                     </div>
+//                 </Router>
+//                 <ToastContainer />
+//             </>
+//         </UserProvider>
+//     );
+// }
+
+// export default withAuth0(App);
+
+/* Temporary bypass so that I can see and edit the <dashboard></dashboard*/
+
+// import React from 'react';
+// import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+// import { ToastContainer } from 'react-toastify';
+// import 'react-toastify/dist/ReactToastify.css';
+// import Header from './components/Header.jsx';
+// import Dashboard from './pages/Dashboard'; 
+
+// function App() {
+//     return (
+//         <Router>
+//             <div className='container'>
+//                 <Header />
+//                 <Routes>
+//                     <Route path='/' element={<Dashboard />} /> {/* Render Dashboard unconditionally */}
+//                     {/* Other routes */}
+//                 </Routes>
+//             </div>
+//             <ToastContainer />
+//         </Router>
+//     );
+// }
+
+// export default App;
+
+
+import React from 'react';
+import SnakeGame from './components/Snake/SnakeGame.jsx';
+
+function App() {
   return (
-    <>
-      {/* AUTHBUTTON FOR AUTH0 LOGIN */}
-      <AuthButtons />
-
-      <Router>
-        <div className='container'>
-          {/* <Header /> */}
-          <Routes>
-            {auth0.isAuthenticated && <Route path='/' element={<Dashboard auth0={auth0} />} />}
-            {/* {auth0.isAuthenticated && <Route path='/comments' element={<Comments />} />}
-            {auth0.isAuthenticated && <Route path='/login' element={<Login />} />}
-            {auth0.isAuthenticated && <Route path='/register' element={<Register />} />} */}
-          </Routes>
-        </div>
-      </Router>
-      <ToastContainer />
-    </>
+      <div className="App">
+          <SnakeGame />
+      </div>
   );
 }
 
-export default withAuth0(App);
+export default App;

src/Auth/Login.jsx

@@ -1,20 +1,70 @@
-import React from 'react';
+// import React from 'react';
+// import { useAuth0 } from '@auth0/auth0-react';
+// import { Button } from 'react-bootstrap';
+
+// function Login() {
+
+//   const {
+//     isAuthenticated,
+//     loginWithRedirect,
+//   } = useAuth0();
+
+//   function handleLogin() {
+//     loginWithRedirect();
+//   }
+
+//   return !isAuthenticated &&
+//     <Button onClick={handleLogin} className='login-button'>Log in</Button>
+//     ;
+// }
+// export default Login;
+
+
+import React, { useEffect, useState } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
+import { useUser } from './UserContext';
 import { Button } from 'react-bootstrap';
+import '../../src/index.css';
 
-function Login() {
+const rotatingWords = ['Hard', "Can't", 'Later', 'Ease'];
 
-  const {
-    isAuthenticated,
-    loginWithRedirect,
-  } = useAuth0();
+function Login() {
+  const { isAuthenticated } = useUser(); 
+  const { login } = useUser(); 
+  const [index, setIndex] = useState(0);
 
   function handleLogin() {
-    loginWithRedirect();
+      if (!isAuthenticated) {
+          login(); 
+      }
   }
 
-  return !isAuthenticated &&
-    <Button onClick={handleLogin}>Log in</Button>
-    ;
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex(prevIndex => (prevIndex + 1 >= rotatingWords.length ? 0 : prevIndex + 1));
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="login-page">
+      {!isAuthenticated && (
+        <div className="rotating-words-container" id="rotating-words">
+          <span id="goal-text">Goal</span>
+          <span id="rotating-word">
+            {rotatingWords[index]}
+          </span>
+          <Button onClick={handleLogin} className="login-button">
+            Log in
+          </Button>
+        </div>
+      )}
+    </div>
+  );
 }
+
 export default Login;
+
+
+

src/Auth/UserContext.jsx

@@ -0,0 +1,25 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const UserContext = createContext();
+
+export const useUser = () => useContext(UserContext);
+
+export const UserProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+
+  const login = () => {
+
+      setUser({ name: 'Snow White', email: 'SnowWhite@apple.com' });
+  };
+
+  const logout = () => {
+
+      setUser(null);
+  };
+
+  return (
+      <UserContext.Provider value={{ user, login, logout }}>
+          {children}
+      </UserContext.Provider>
+  );
+};

src/components/CommentForm.jsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { createComment } from '../features/comments/commentSlice'
+
+function CommentForm() {
+  const [text, setText] = useState('')
+
+  const dispatch = useDispatch()
+
+  const onSubmit = (e) => {
+    e.preventDefault()
+    dispatch(createComment({ text }))
+    setText('')
+  }
+
+  return (
+    <section className='form'>
+      <form onSubmit={onSubmit}>
+        <div className='form-group'>
+          <label htmlFor='text'>Comment</label>
+          <input
+            type='text'
+            name='description'
+            id='description'
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+          />
+        </div>
+        <div className='form-group'>
+          <button className='btn btn-block' type='submit'>
+            Add Comment
+          </button>
+        </div>
+      </form>
+    </section>
+  )
+}
+
+export default CommentForm

src/components/CommentItem.jsx

@@ -0,0 +1,23 @@
+import { useDispatch } from 'react-redux'
+import { deleteComment } from '../features/comments/commentSlice'
+
+function CommentItem({ comment }) {
+  const dispatch = useDispatch()
+
+  console.log(comment)
+
+  return (
+    <div className='goal'>
+      <div>{new Date(comment.createdAt).toLocaleString('en-US')}</div>
+      <h2>{comment.description}</h2>
+      <button onClick={() => dispatch(deleteComment(comment._id))} className='close'>
+        X
+      </button>
+
+      {/* {comment.isCompleted ? <p> COMPLETED </p> : <p>Not Completed</p>}
+       */}
+    </div>
+  )
+}
+
+export default CommentItem