typescript

Author: btholt

typescript-1/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

typescript-1/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "react/prop-types": 0,
+    "react/react-in-jsx-scope": 0,
+    "@typescript-eslint/no-empty-function": 0
+  },
+  "plugins": ["react", "import", "jsx-a11y", "@typescript-eslint"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2022,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      }
+    },
+    "react": {
+      "version": "detect"
+    }
+  }
+}

typescript-1/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.parcel-cache/
+dist/
+.env
+.DS_Store
+coverage/
+.vscode/

typescript-1/.prettierrc

@@ -0,0 +1 @@
+{}

typescript-1/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "adopt-me",
+  "version": "7.0.0",
+  "description": "Adopt pets via adopt-me",
+  "main": "src/App.js",
+  "scripts": {
+    "dev": "parcel src/index.html",
+    "format": "prettier --write \"src/**/*.{js,jsx}\"",
+    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet"
+  },
+  "author": "Brian Holt <btholt+citr-v7-project@gmail.com>",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
+    "eslint": "8.8.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "parcel": "2.2.1",
+    "prettier": "2.5.1",
+    "typescript": "4.5.5"
+  },
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-router-dom": "^6.2.1"
+  },
+  "browserslist": [
+    "last 2 Chrome versions"
+  ]
+}

typescript-1/src/App.js

@@ -0,0 +1,27 @@
+import { render } from "react-dom";
+import SearchParams from "./SearchParams";
+import { StrictMode, useState } from "react";
+import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+import Details from "./Details";
+import ThemeContext from "./ThemeContext";
+
+const App = () => {
+  const theme = useState("darkblue");
+  return (
+    <StrictMode>
+      <ThemeContext.Provider value={theme}>
+        <BrowserRouter>
+          <header>
+            <Link to="/">Adopt Me!</Link>
+          </header>
+          <Routes>
+            <Route path="/details/:id" element={<Details />} />
+            <Route path="/" element={<SearchParams />} />
+          </Routes>
+        </BrowserRouter>
+      </ThemeContext.Provider>
+    </StrictMode>
+  );
+};
+
+render(<App />, document.getElementById("root"));

typescript-1/src/Carousel.js

@@ -0,0 +1,42 @@
+import { Component } from "react";
+
+class Carousel extends Component {
+  state = {
+    active: 0,
+  };
+
+  static defaultProps = {
+    images: ["http://pets-images.dev-apis.com/pets/none.jpg"],
+  };
+
+  handleIndexClick = (event) => {
+    this.setState({
+      active: +event.target.dataset.index,
+    });
+  };
+
+  render() {
+    const { active } = this.state;
+    const { images } = this.props;
+    return (
+      <div className="carousel">
+        <img src={images[active]} alt="animal" />
+        <div className="carousel-smaller">
+          {images.map((photo, index) => (
+            // eslint-disable-next-line
+            <img
+              key={photo}
+              src={photo}
+              className={index === active ? "active" : ""}
+              alt="animal thumbnail"
+              onClick={this.handleIndexClick}
+              data-index={index}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Carousel;

typescript-1/src/Details.js

@@ -0,0 +1,71 @@
+import { Component } from "react";
+import { useParams } from "react-router-dom";
+import Carousel from "./Carousel";
+import ErrorBoundary from "./ErrorBoundary";
+import ThemeContext from "./ThemeContext";
+import Modal from "./Modal";
+
+class Details extends Component {
+  state = { loading: true, showModal: false };
+
+  async componentDidMount() {
+    const res = await fetch(
+      `http://pets-v2.dev-apis.com/pets?id=${this.props.params.id}`
+    );
+    const json = await res.json();
+    this.setState(Object.assign({ loading: false }, json.pets[0]));
+  }
+  toggleModal = () => this.setState({ showModal: !this.state.showModal });
+  adopt = () => (window.location = "http://bit.ly/pet-adopt");
+  render() {
+    if (this.state.loading) {
+      return <h2>loading … </h2>;
+    }
+
+    const { animal, breed, city, state, description, name, images, showModal } =
+      this.state;
+
+    return (
+      <div className="details">
+        <Carousel images={images} />
+        <div>
+          <h1>{name}</h1>
+          <h2>{`${animal} — ${breed} — ${city}, ${state}`}</h2>
+          <ThemeContext.Consumer>
+            {([theme]) => (
+              <button
+                onClick={this.toggleModal}
+                style={{ backgroundColor: theme }}
+              >
+                Adopt {name}
+              </button>
+            )}
+          </ThemeContext.Consumer>
+          <p>{description}</p>
+          {showModal ? (
+            <Modal>
+              <div>
+                <h1>Would you like to adopt {name}?</h1>
+                <div className="buttons">
+                  <a href="https://bit.ly/pet-adopt">Yes</a>
+                  <button onClick={this.toggleModal}>No</button>
+                </div>
+              </div>
+            </Modal>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+const WrappedDetails = () => {
+  const params = useParams();
+  return (
+    <ErrorBoundary>
+      <Details params={params} />
+    </ErrorBoundary>
+  );
+};
+
+export default WrappedDetails;

typescript-1/src/ErrorBoundary.js

@@ -0,0 +1,34 @@
+// mostly code from reactjs.org/docs/error-boundaries.html
+import { Component } from "react";
+import { Link, Navigate } from "react-router-dom";
+
+class ErrorBoundary extends Component {
+  state = { hasError: false, redirect: false };
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, info) {
+    console.error("ErrorBoundary caught an error", error, info);
+  }
+  componentDidUpdate() {
+    if (this.state.hasError) {
+      setTimeout(() => this.setState({ redirect: true }), 5000);
+    }
+  }
+  render() {
+    if (this.state.redirect) {
+      return <Navigate to="/" />;
+    } else if (this.state.hasError) {
+      return (
+        <h2>
+          There was an error with this listing. <Link to="/">Click here</Link>{" "}
+          to back to the home page or wait five seconds.
+        </h2>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

typescript-1/src/Modal.tsx

@@ -0,0 +1,26 @@
+import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+const Modal: FunctionComponent = ({ children }) => {
+  const elRef: MutableRefObject<HTMLDivElement | null>  = useRef(null);
+  if (!elRef.current) {
+    elRef.current = document.createElement("div");
+  }
+
+  useEffect(() => {
+    const modalRoot = document.getElementById("modal");
+    if (!modalRoot || !elRef.current) {
+      return;
+    }
+    modalRoot.appendChild(elRef.current);
+    return () => {
+      if (elRef.current) {
+        modalRoot.removeChild(elRef.current);
+      }
+    }
+  }, []);
+
+  return createPortal(<div>{children}</div>, elRef.current);
+};
+
+export default Modal;