Merge pull request #10 from oslabs-beta/backend

Backend - Update for useState compatibility for NextJS/React

Author: lanceziegler

.gitignore

@@ -5,7 +5,6 @@ node_modules/
 .DS_Store
 src/extension/build/bundles
 package/reactime-*.tgz
-tictactoe
 parents
 coverage
 src/extension/build.zip

demo-app-next/src/components/Buttons.tsx

@@ -1,17 +1,17 @@
-import Increment from "./Increment";
+import Increment from './Increment';
 
 export default function Buttons() {
   const buttons = [];
   for (let i = 0; i < 4; i++) {
-    buttons.push(<Increment />);
+    buttons.push(<Increment key={i} />);
   }
 
   return (
-    <div className="buttons">
+    <div className='buttons'>
       <h1>Stateful Buttons</h1>
       <h4>
-        These buttons are functional components that each manage their own state
-        with the useState hook.
+        These buttons are functional components that each manage their own state with the useState
+        hook.
       </h4>
       {buttons}
     </div>

demo-app-next/src/components/navbar.js

@@ -1,15 +1,15 @@
-import Link from "next/link";
+import Link from 'next/link';
 
 export default function Navbar() {
   return (
-    <div className="nav">
-      <Link className="link" href="/">
+    <div className='nav'>
+      <Link className='link' href='/'>
         About
       </Link>
-      <Link id="tictactoe" className="link" href="/tictactoe">
+      <Link id='tictactoe' className='link' href='/tictactoe'>
         Tic-Tac-Toe
       </Link>
-      <Link className="link" href="/buttons">
+      <Link className='link' href='/buttons'>
         Counter
       </Link>
     </div>

demo-app-next/src/pages/tictactoe/index.tsx

@@ -0,0 +1,11 @@
+import Board from '../../components/Board';
+import Navbar from '../../components/navbar';
+
+export default function BoardPage() {
+  return (
+    <div>
+      <Navbar />
+      <Board />
+    </div>
+  );
+}

demo-app/src/client/Components/Buttons.tsx

@@ -4,7 +4,7 @@ import Increment from './Increment';
 function Buttons() {
   const buttons = [];
   for (let i = 0; i < 4; i++) {
-    buttons.push(<Increment />);
+    buttons.push(<Increment key={i} />);
   }
 
   return (

demo-app/src/client/Components/Home.tsx

@@ -1,10 +1,33 @@
+import { set } from 'lodash';
 import React from 'react';
+import { useState } from 'react';
 
 function Home() {
+  const [dummyDummy1, setDummyData1] = useState('dummyData1');
+  const [dummyDummy2, setDummyData2] = useState('dummyData2');
+
+  function handleClick1() {
+    setDummyData1((dummyData1) => (dummyData1 === 'dummyData1' ? 'test1' : 'dummyData1'));
+  }
+
+  function handleClick2() {
+    setDummyData2((dummyData2) => (dummyData2 === 'dummyData2' ? 'test2' : 'dummyData2'));
+  }
   return (
     <div className='about'>
-      <h1>Lorem Ipsum</h1>
-      <p>
+      <p>{dummyDummy1}</p>
+      <p>{dummyDummy2}</p>
+      <button
+        onClick={() => {
+          handleClick1();
+          handleClick2();
+        }}
+      >
+        {' '}
+        Test{' '}
+      </button>
+      {/* <h1>Lorem Ipsum</h1> */}
+      {/* <p>
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
@@ -17,7 +40,7 @@ function Home() {
         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
         voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
         cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-      </p>
+      </p> */}
     </div>
   );
 }

demo-app/src/client/Components/Increment.tsx

@@ -1,12 +1,24 @@
 import React, { useState } from 'react';
-
+import Box from './Box';
+import { BoardText } from '../../types';
+import { Function } from 'lodash';
 function Increment() {
   const [count, setCount] = useState(0);
-
+  // const [value, setValue]: [BoardText, any] = useState('-');
   return (
-    <button className='increment' onClick={() => setCount(count + 1)}>
-      You clicked me {count} times.
-    </button>
+    <div>
+      <button className='increment' onClick={() => setCount(count + 1)}>
+        You clicked me {count} times.
+      </button>
+      {/* <div> */}
+      {/* <Box
+        value={value}
+        column={3}
+        row={2}
+        handleBoxClick={() => setValue((value: BoardText) => (value == 'X' ? 'O' : 'X'))}
+      /> */}
+      {/* </div> */}
+    </div>
   );
 }
 

demo-app/src/client/Components/Nav.tsx

@@ -13,6 +13,9 @@ function Nav() {
       <Link className='link' to='/buttons'>
         Counter
       </Link>
+      <Link className='link' to='/test'>
+        Test
+      </Link>
     </div>
   );
 }

demo-app/src/client/Components/Test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useState, createContext, useContext } from 'react';
+
+interface User {
+  username: string;
+}
+
+const defaultUser: User = { username: 'dummyusername' };
+
+const UserContext = createContext<User>(defaultUser);
+
+function Test() {
+  const [user, setUser] = useState(defaultUser);
+  return (
+    <UserContext.Provider value={defaultUser}>
+      <h1>{`What's up ${user.username}`}</h1>
+      <Component2 />
+    </UserContext.Provider>
+  );
+}
+function Component2() {
+  return (
+    <>
+      <h1>Component 2</h1>
+      <Component3 />
+    </>
+  );
+}
+
+function Component3() {
+  return (
+    <>
+      <h1>Component 3</h1>
+      <Component4 />
+    </>
+  );
+}
+
+function Component4() {
+  return (
+    <>
+      <h1>Component 4</h1>
+      <Component5 />
+    </>
+  );
+}
+
+function Component5() {
+  const user = useContext(UserContext);
+
+  return (
+    <>
+      <h1>Component 5</h1>
+      <h2>{`Hello ${user.username} again!`}</h2>
+    </>
+  );
+}
+
+export default Test;

demo-app/src/client/Router.tsx

@@ -1,21 +1,24 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Nav from './Components/Nav';
 import Board from './Components/Board';
 import Home from './Components/Home';
 import Buttons from './Components/Buttons';
+import Test from './Components/Test';
 
-const root = document.getElementById('root');
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
 
-ReactDOM.render(
+root.render(
   <BrowserRouter>
     <Nav />
     <Routes>
       <Route path='/tictactoe' element={<Board />} />
       <Route path='/' element={<Home />} />
       <Route path='/buttons' element={<Buttons />} />
+      <Route path='/test' element={<Test />} />
     </Routes>
   </BrowserRouter>,
-  root,
 );