refactor: restructure react display

react-typescript/src/App.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import App from './App';
+import App from './components/App';
 
 test('renders learn react link', () => {
   render(<App />);

react-typescript/src/App.tsx

@@ -1,17 +0,0 @@
-import './App.css';
-import Item from './Item';
-
-function App() {
-  return (
-    <div className="App">
-      <Item name="+5 Dexterity Vest" sellIn={10} quality={20} isConjured={false} />
-      <Item name="Aged Brie" sellIn={2} quality={0} isConjured={false} />
-      <Item name="Elixir of the Mongoose" sellIn={5} quality={7} isConjured={false} />
-      <Item name="Sulfuras, Hand of Ragnaros" sellIn={1} quality={80} isConjured={false} />
-      <Item name="Backstage passes to a TAFKAL80ETC concert" sellIn={15} quality={20} isConjured={false} />
-      <Item name="Conjured Mana Cake" sellIn={3} quality={6} isConjured={true} />
-    </div>
-  );
-}
-
-export default App;

react-typescript/src/Item.tsx

@@ -1,107 +0,0 @@
-import { useEffect, useState } from "react";
-
-function calculateQuality(name:string, quality: number, sellIn: number,isConjured: boolean): number {
-  const sellInAmount = sellIn;
-
-  let calculatedQuality = quality;
-  let degradeRate = 1;
-  let qualityIdentifier = 1;
-
-  if(sellInAmount <= 0) {
-    return calculatedQuality;
-  }
-
-  if(name.includes("Sulfuras")) {
-    return 80;
-  };
-
-  if(calculatedQuality >= 50) {
-    return 50;
-  } else if(calculatedQuality <= 0) {
-    return 0;
-  }
-
-  if(isConjured) {
-    degradeRate = 2;
-  }
-
-  if(name.includes('Aged Brie')) {
-    qualityIdentifier = -1;
-  }
-
-  if(name.includes('Backstage passes')) {
-    if(sellInAmount <= 10 && sellInAmount > 5) {
-      qualityIdentifier = -3;
-    } else if(sellInAmount <= 5 && sellInAmount > 0) {
-      qualityIdentifier = -2;
-    } else if(sellInAmount <= 0) {
-      qualityIdentifier = 0;
-      degradeRate = 0;
-    }
-  }
-
-  return degradeRate * calculatedQuality - qualityIdentifier;  
-};
-
-function calculateSellIn(name:string, sellIn: number): number {
-  let sellInAmount = sellIn;
-
-  if(name.includes("Sulfuras")) {
-    return sellInAmount;
-  };
-
-  if(sellInAmount <= 0) {
-    return 0;
-  }
-
-  return sellIn - 1;
-};
-
-type ItemProps = {
-    name: string,
-    quality: number,
-    sellIn: number,
-    isConjured: boolean
-};
-
-const Item = (props: ItemProps) => {
-    const [name, setName] = useState(props.name);
-    useEffect(() => {
-        setName(props.name);
-    }, [props.name]);
-
-    const [quality, setQuality] = useState(props.quality);
-    useEffect(() => {
-        setQuality(props.quality);
-    }, [props.quality]);
-
-    const [sellIn, setSellIn] = useState(props.sellIn);
-    useEffect(() => {
-        setSellIn(props.sellIn);
-    }, [props.sellIn]);
-
-    const [isConjured, setIsConjured] = useState(props.isConjured);
-    useEffect(() => {
-        setIsConjured(props.isConjured);
-    }, [props.isConjured]);
-
-    return (
-        <div>
-          <p color={isConjured ? 'Red' : 'Green'}>{name}</p>
-
-          <p>{quality}</p>
-
-          <p>{sellIn}</p>
-          <br></br>
-          <button onClick={() => { 
-            setQuality(calculateQuality(name, sellIn, quality, isConjured));
-            setSellIn(calculateSellIn(name, sellIn));
-            }}>
-            Purchase
-          </button>
-          <br></br>
-        </div>
-    );
-};
-
-export default Item;

react-typescript/src/components/App.tsx

@@ -0,0 +1,12 @@
+import './App.css';
+import Items from './Item';
+
+function App() {
+  return (
+    <div className="App">
+      <Items />
+    </div>
+  );
+}
+
+export default App;

react-typescript/src/components/Item.tsx

@@ -0,0 +1,21 @@
+import useItem from "../hooks/useItem";
+import Item from "../types"
+
+function Items() {
+  const { items, updateItem } = useItem();
+  return (
+    <div className="Item">
+      <ul>
+        {items.map((item: Item) => {
+          return (
+          <li key={item.name}>
+            Name: {item.name} Quality: {item.quality} SellIn: {item.sellIn} <button onClick={() => updateItem(item)}></button> 
+          </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default Items;

react-typescript/src/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import App from './components/App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -12,8 +11,3 @@ root.render(
     <App />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

react-typescript/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

react-typescript/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';