Finished tutorial. Begin migration to material UI

package-lock.json

@@ -5,7 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
-        "bootstrap": "^5.2.3"
+        "bootstrap": "^5.3.0-alpha3"
       }
     },
     "node_modules/@popperjs/core": {
@@ -19,9 +19,9 @@
       }
     },
     "node_modules/bootstrap": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "version": "5.3.0-alpha3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha3.tgz",
+      "integrity": "sha512-FBhOWMxkCFr74hesJdchLXhqagPTXS+kRNU3gE0FR5Ki/AdPSz32Ik96Z28+yBluCnE/pc9st7l1yPwKgbtfSA==",
       "funding": [
         {
           "type": "github",
@@ -33,7 +33,7 @@
         }
       ],
       "peerDependencies": {
-        "@popperjs/core": "^2.11.6"
+        "@popperjs/core": "^2.11.7"
       }
     }
   }

package.json

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "bootstrap": "^5.2.3"
+    "bootstrap": "^5.3.0-alpha3"
   }
 }

react-again-tutorial/package.json

@@ -9,14 +9,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
+    "@mui/material": "^5.12.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^3.1.0",
-    "typescript": "^4.9.3",
-    "vite": "^4.1.0"
+    "@types/react": "^18.2.5",
+    "@types/react-dom": "^18.2.4",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5"
   }
-}
+}

react-again-tutorial/src/App.tsx

@@ -1,23 +1,41 @@
-import Message from "./Message";
 import ListGroup from "./components/ListGroup";
-import { Fragment, useState } from "react";
-import { MouseEvent } from "react";
+import Alert from "./components/Alert";
+import { useState } from "react";
+import MyButt from "./components/MyButt";
+import Button from "@mui/material/Button";
 
 // Following tutorial https://www.youtube.com/watch?v=SqcY0GlETPk
 
 function App() {
   const items = ["Dude", "Man", "Shit", "Is it working?"];
+  const [alertVisible, setAlertVisible] = useState(false);
 
   const handleSelectItem = (item: string) => {
-    console.debug("Yoman!");
+    console.debug(item);
+  };
+
+  const dismissError = () => {
+    setAlertVisible(false);
   };
 
   return (
     <div>
+      {alertVisible && (
+        <Alert onClose={() => setAlertVisible(false)}>This is bad</Alert>
+      )}
+      <MyButt name="LöBöttån!" onClick={() => setAlertVisible(true)}>
+        Maan
+      </MyButt>
+      {<Button variant="contained">Hello World</Button>}
       <ListGroup
         items={items}
         heading="Man shit list"
-        onSelectedItem={handleSelectItem}
+        onSelectItem={handleSelectItem}
+      />
+      <ListGroup
+        items={["Hoho", "Hihi", "Thhihih"]}
+        heading="Skrat prat datt"
+        onSelectItem={handleSelectItem}
       />
     </div>
   );

react-again-tutorial/src/components/Alert.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  onClose: () => void;
+}
+
+const Alert = ({ children, onClose }: Props) => {
+  return (
+    <>
+      <div className="alert alert-primary alert-dismissible" role="alert">
+        {children}
+        <button
+          type="button"
+          className="btn-close"
+          data-bs-dismiss="alert"
+          aria-label="Close"
+          onClick={onClose}
+        ></button>
+      </div>
+    </>
+  );
+};
+
+export default Alert;

react-again-tutorial/src/components/ListGroup.tsx

@@ -3,11 +3,15 @@ import { useState } from "react";
 interface ListGroupProps {
   items: string[];
   heading: string;
-  onSelectedItem?: (item: string) => void;
+  onSelectItem: (item: string) => void;
 }
 
-function ListGroup({ items, heading }: ListGroupProps) {
-  const [activeListItem, setActiveListItem] = useState(-1);
+function ListGroup({
+  items,
+  heading,
+  onSelectItem: onSelectItem,
+}: ListGroupProps) {
+  const [activeListItem, setActiveListItem] = useState(0);
 
   // Retired click handler
   const myClickHandlerMan = (event: MouseEvent) => {
@@ -28,7 +32,10 @@ function ListGroup({ items, heading }: ListGroupProps) {
                 : "list-group-item"
             }
             key={item}
-            onClick={() => setActiveListItem(index)}
+            onClick={() => {
+              setActiveListItem(index);
+              onSelectItem(item);
+            }}
           >
             {item}
           </li>

react-again-tutorial/src/components/MyButt.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  name?: string;
+  onClick?: (item: string) => void;
+}
+
+function MyButt({ children, name, onClick }: Props) {
+  return (
+    <button
+      type="button"
+      name={name ? name : ""}
+      className="btn btn-primary"
+      onClick={() => {
+        onClick && name ? onClick(name) : null;
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default MyButt;

react-again-tutorial/src/main.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import 'bootstrap/dist/css/bootstrap.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "bootstrap/dist/css/bootstrap.css";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);