React

---

Code Scribbles from me learning React

main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "bootstrap/dist/css/bootstrap.css";
import App from "./App.tsx";
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.tsx

import { useEffect, useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "bootstrap/dist/css/bootstrap.css";
import ListGroup from "./components/ListGroup.tsx";
import AlertGroup from "./components/Alert.tsx";
// import axios from "axios";
 
function App() {
  const [count, setCount] = useState(0);
 
  //	Used for connecting to the backend and getting infromation from there
  // const fetchAPI = async () => {
  //   const response = await axios.get("http://localhost:8080/potato");
  //   console.log(response);
  // };
 
  // useEffect(() => {
  //   fetchAPI();
  // }, []);
 
  const items = ["apple", "bananan", "carrot"];
  const handleSelectItem = (item: string) => {
    console.log(item);
  };
 
  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
      <ListGroup
        items={items}
        heading={"Food"}
        onSelectItem={handleSelectItem}
      ></ListGroup>
      <AlertGroup alertId="potato"></AlertGroup>
    </>
  );
}
 
export default App;
 

ListGroup.tsx

import { useState } from "react";
 
interface ListGroupProps {
  items: string[];
  heading: string;
  // You can also do enums like the following to restrict to special tags
  // color: 'Primary' | 'Secondary' | 'danger' 
  // Takes in a property that is a function
  onSelectItem: (item: string) => void;
}
 
// Yiou can also pass children components by passing it in
// you want to use the ReactNode type with a `children` prop
 
function ListGroup({ items, heading, onSelectItem }: ListGroupProps) {
  // let items = [];
  // items = ["Sydney", "Canberra", "Perth", "Melbourne"];
  // let selectedIndex = 0;
 
  // Hook
  const [selectedIndex, setSelectedIndex] = useState(-1);
  // arr[0]; // variable (selected Index)
  // arr[1]; // updater function
  // Each set of react components have their own state
  // i.e within each ListGroup component state, selected index will be
  // specific for each listgroup
 
  const getMessage = () => {
    // return items.length === 0 ? <p>No items have been found</p> : null;
    return items.length === 0 && <p>No items have been found</p>;
  };
 
  // Event Handler
  // const handleClick = (event: MouseEvent) => {
  //   console.log(event);
  //   console.log("potato");
  // };
 
  return (
    // <> <Fragment> are the same thing
    // Both a react feature that is used for creating a singular component
    // As these components can only return 1 HTML component - used to group things
    <>
      <h1>{heading}</h1>
      <ul className="list-group">
        {getMessage()}
        {items.map((item, index) => (
          <li
            className={
              selectedIndex === index
                ? "list-group-item active"
                : "list-group-item"
            }
            key={item}
            onClick={() => {
              // selectedIndex = index;
              setSelectedIndex(index);
              onSelectItem(item);
            }}
            // onClick={handleClick}
          >
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}
 
export default ListGroup;

AlertGroupProps

import { useState } from "react";
 
interface AlertGroupProps {
  alertId: string;
}
 
const AlertGroup = ({ alertId }: AlertGroupProps) => {
  // Have a button
  // button should have a function
  // if clicked - switch a bool to true
  // if on then spawn in an alert
  // if close button clicked off, rmeove it
  // .face and .show
  const [clicked, onClickButton] = useState(false);
  const displayAlert = () => {
    return (
      clicked && (
        <div
          className="alert alert-danger alert-dismissible fade show align-items-center"
          role="alert"
        >
          A simple danger alert—check it out!
          <button
            type="button"
            className="btn-close"
            data-bs-dismiss="alert"
            aria-label="Close"
            onClick={() => {
              onClickButton(false);
            }}
          ></button>
        </div>
      )
    );
  };
 
  return (
    <>
      {displayAlert()}
      <button
        type="button"
        className="btn btn-primary"
        id={alertId}
        onClick={() => {
          onClickButton(true);
        }}
      >
        Start an Emergency
      </button>
    </>
  );
};
 
export default AlertGroup;