Restructure Components: Move App into its own TruthTally component (#8)

* Restructure app into its own Truth Tally component

* Created Component specific CSS file

src/components/App.js

@@ -1,105 +1,14 @@
-import React, { useState, useRef } from 'react';
-import Header from './Header';
-import ItemsList from './ItemsList';
-import Stage from './Stage';
-import Controls from './Controls';
-import Results from './Results';
-import LoadingSpinner from './LoadingSpinner';
-
-
-//import logo from './logo.svg';
-
-
-function App() {
-
-  const [items, setItems] = useState ([]);
-
-  const [gameState, setGameState] = useState('start');
-
-  const [gameCompleted, setGameCompleted] = useState(false);
-
-  const [loadingText, setLoadingText] = useState('');
-
-  const [pairs, setPairs] = useState([]);
-
-  const currentIndex = useRef(0);
-
-  const nextItemId = useRef(0);
-
-
-  const handleAddItem = (item) => {
-    nextItemId.current++
-
-    setItems(prevItems =>  [
-      ...prevItems,
-      {
-        item,
-        score: 0,
-        id: nextItemId.current
-      }
-    ]);
-  }
-
-
-  const handleRemoveItem = (id) => {
-    setItems(prevItems => prevItems.filter( p => p.id !== id ));
-  }
-
-
-
-
-
-const updatePairsList = (a) => {
-  setPairs(a);
-}
-
-const props = {
-  items,
-  setItems,
-  gameState,
-  setGameState,
-  gameCompleted,
-  setGameCompleted,
-  loadingText,
-  setLoadingText,
-  pairs,
-  setPairs,
-  currentIndex,
-  nextItemId,
-  handleAddItem,
-  handleRemoveItem,
-  updatePairsList
-};
-
+import React from "react";
+import TruthTally from "./TruthTally";
+import Header from "./Header";
 
+const App = () => {
   return (
-
-    <div className="main-container">  
+    <div className="main-container">
       <Header />
-
-      <LoadingSpinner 
-        {...props}
-      />
-
-      <ItemsList
-        {...props}
-      />
-
-      <Stage
-        {...props} 
-      />
-
-      <Results
-        {...props}
-      />
-
-      <Controls 
-        {...props}
-      />
-
-
+      <TruthTally />
     </div>
   );
-}
+};
 
 export default App;

src/components/TruthTally/TruthTally.js

@@ -0,0 +1,77 @@
+import React, { useState, useRef } from "react";
+import ItemsList from "./ItemsList";
+import Stage from "./Stage";
+import Controls from "./Controls";
+import Results from "./Results";
+import LoadingSpinner from "./LoadingSpinner";
+
+function TruthTally() {
+  const [items, setItems] = useState([]);
+
+  const [gameState, setGameState] = useState("start");
+
+  const [gameCompleted, setGameCompleted] = useState(false);
+
+  const [loadingText, setLoadingText] = useState("");
+
+  const [pairs, setPairs] = useState([]);
+
+  const currentIndex = useRef(0);
+
+  const nextItemId = useRef(0);
+
+  const handleAddItem = (item) => {
+    nextItemId.current++;
+
+    setItems((prevItems) => [
+      ...prevItems,
+      {
+        item,
+        score: 0,
+        id: nextItemId.current,
+      },
+    ]);
+  };
+
+  const handleRemoveItem = (id) => {
+    setItems((prevItems) => prevItems.filter((p) => p.id !== id));
+  };
+
+  const updatePairsList = (a) => {
+    setPairs(a);
+  };
+
+  const props = {
+    items,
+    setItems,
+    gameState,
+    setGameState,
+    gameCompleted,
+    setGameCompleted,
+    loadingText,
+    setLoadingText,
+    pairs,
+    setPairs,
+    currentIndex,
+    nextItemId,
+    handleAddItem,
+    handleRemoveItem,
+    updatePairsList,
+  };
+
+  return (
+    <div className="truthtally-container">
+      <LoadingSpinner {...props} />
+
+      <ItemsList {...props} />
+
+      <Stage {...props} />
+
+      <Results {...props} />
+
+      <Controls {...props} />
+    </div>
+  );
+}
+
+export default TruthTally;