Feat | Pokemon models

full-stack-javascript/21-inventory-application/client/src/components/PokeCard.jsx

@@ -1,7 +1,7 @@
 import capitalise from "../utils/capitalise";
 import { HeartIcon as HeartIconOutline } from "@heroicons/react/24/outline";
 import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";
-import PokemonType from "./PokemonType";
+import PokeType from "./PokeType";
 import { useNavigate } from "react-router-dom";
 
 function PokeCard({ pokemon }) {
@@ -44,7 +44,7 @@ function PokeCard({ pokemon }) {
         <div className="flex gap-2">
           {pokemon.types.map((typeObj) => {
             return (
-              <PokemonType
+              <PokeType
                 key={typeObj.type.name}
                 type={capitalise(typeObj.type.name)}
               />

full-stack-javascript/21-inventory-application/client/src/components/PokeDetails.jsx

@@ -0,0 +1,27 @@
+import { useParams } from "react-router-dom";
+
+function PokeDetails() {
+  const params = useParams();
+  const endpoint = "http://localhost:3000/pokemon/" + params.pokemonId;
+  async function fetchPokemon() {
+    try {
+      const response = await fetch(endpoint);
+      const result = await response.json();
+
+      console.log(result);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  fetchPokemon();
+
+  return (
+    <div>
+      <div>Main Details</div>
+      <div>Pokemon: {params.pokemonId}</div>
+    </div>
+  );
+}
+
+export default PokeDetails;

full-stack-javascript/21-inventory-application/client/src/components/PokeList.jsx

@@ -5,7 +5,7 @@ function PokeList() {
   const [list, setList] = useState(null);
   const [state, setState] = useState("loading");
   const [error, setError] = useState(null);
-
+  console.log(list);
   async function fetchList(currData) {
     try {
       const endpoint = list
@@ -14,6 +14,10 @@ function PokeList() {
       const response = await fetch(endpoint);
       const result = await response.json();
 
+      const response2 = await fetch("http://localhost:3000/pokemon/");
+      const result2 = await response2.json();
+      console.log(result2);
+
       if (result.results) {
         const { count, next, previous } = { ...result };
         const nextList = {
@@ -70,7 +74,6 @@ function PokeList() {
             className="w-fit min-w-32 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-300 dark:hover:bg-gray-100"
             disabled={state === "loading"}
             onClick={(e) => {
-              console.log(e);
               setState("loading");
               fetchList(list.data);
             }}

full-stack-javascript/21-inventory-application/client/src/components/PokemonType.jsx → full-stack-javascript/21-inventory-application/client/src/components/PokeType.jsx

@@ -1,11 +1,11 @@
 import pokemonTypes from "../utils/pokemonTypes";
 
-function PokemonType({ type }) {
+function PokeType({ type }) {
   const typeColor = pokemonTypes[type.toLowerCase()];
   const classes =
     "min-w-12 rounded-xl px-2 py-1 text-center text-xs font-bold text-white ";
 
   return <span className={classes + typeColor}>{type}</span>;
 }
 
-export default PokemonType;
+export default PokeType;

full-stack-javascript/21-inventory-application/client/src/main.jsx

@@ -9,24 +9,22 @@ import {
 import App from "./App.jsx";
 import Home from "./components/Home";
 import Test from "./components/Test.jsx";
+import PokeDetails from "./components/PokeDetails.jsx";
 import "./reset.css";
 import "./index.css";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<App />}>
       <Route index element={<Home text="home" />}></Route>
-      <Route
-        path="pokemon/:pokemonId"
-        element={<Test text="pokemon" />}
-      ></Route>
+      <Route path="pokemon/:pokemonId" element={<PokeDetails />}></Route>
       <Route path="favorites" element={<Test text="favs" />}></Route>
-    </Route>
-  )
+    </Route>,
+  ),
 );
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <RouterProvider router={router}></RouterProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );

full-stack-javascript/21-inventory-application/server/.gitignore

@@ -0,0 +1 @@
+node_modules

full-stack-javascript/21-inventory-application/server/app.js

@@ -1,13 +1,15 @@
-var createError = require("http-errors");
-var express = require("express");
-var path = require("path");
-var cookieParser = require("cookie-parser");
-var logger = require("morgan");
-
-var indexRouter = require("./routes/index");
-var usersRouter = require("./routes/users");
-
-var app = express();
+const createError = require("http-errors");
+const express = require("express");
+const path = require("path");
+const cookieParser = require("cookie-parser");
+const logger = require("morgan");
+const cors = require("cors");
+
+const indexRouter = require("./routes/index");
+const usersRouter = require("./routes/users");
+
+const app = express();
+app.use(cors());
 
 // view engine setup
 app.set("views", path.join(__dirname, "views"));

full-stack-javascript/21-inventory-application/server/controllers/pokeController.js

@@ -2,13 +2,15 @@ const axios = require("axios");
 
 exports.pokeList = async function (req, res, next) {
   console.log("pokelist");
+  console.log(req);
   try {
     const response = await axios.get(
       "https://pokeapi.co/api/v2/pokemon/?limit=24"
     );
-    // const results = await response.json();
-    console.log(response.data);
+
+    res.status(200);
+    res.send({ ...response.data });
   } catch (error) {
-    console.log(error);
+    return next(error);
   }
 };

full-stack-javascript/21-inventory-application/server/models/pokeDetails.js

@@ -0,0 +1,20 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const PokeDetailsSchema = new Schema({
+  height: { type: String, required: true },
+  weight: { type: Number, required: true },
+  has_gender: { type: Boolean, required: true },
+  hp: { type: Number, required: true },
+  attack: { type: Number, required: true },
+  defense: { type: Number, required: true },
+  specialAttack: { type: Number, required: true },
+  specialDefense: { type: Number, required: true },
+  speed: { type: Number, required: true },
+  abilities: [{ type: String }],
+  evolvesTo: [{ type: Schema.Types.ObjectId, ref: "Pokemon" }],
+});
+
+// Export model
+module.exports = mongoose.model("PokeDetails", PokeDetailsSchema);

full-stack-javascript/21-inventory-application/server/models/pokemon.js

@@ -0,0 +1,19 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const PokeSchema = new Schema({
+  name: { type: String, required: true },
+  dexId: { type: Number, required: true },
+  types: [{ type: String }],
+  avatar: { type: String, required: true },
+  details: { type: Schema.Types.ObjectId, ref: "PokeDetails", required: true },
+});
+
+// Virtual for pokemon's URL
+PokeSchema.virtual("url").get(function () {
+  return `/pokemon/${this._id}`;
+});
+
+// Export model
+module.exports = mongoose.model("Pokemon", PokeSchema);