configured cms locally for exec screen

web/.gitignore

@@ -12,6 +12,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.env
 
 # Editor directories and files
 .vscode/*

web/package.json

@@ -29,6 +29,7 @@
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.0.0",
+    "@types/node": "^20.14.2",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

web/src/components/ExecInfo.tsx

@@ -1,10 +1,9 @@
-import { execs } from "../data/data";
 import ExecCard from "../screens/ExecScreen";
 
 function ExecScreen() {
   return (
     <div>
-      <ExecCard execs={execs} />
+      <ExecCard />
     </div>
   );
 }

web/src/hooks/useFetch.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 
 const useFetch = (url: string) => {
-  const [data, setData] = useState(null);
+  const [data, setData] = useState<any>([]);
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(true);
 

web/src/main.tsx

@@ -17,16 +17,15 @@ import LoginScreen from "./screens/LoginScreen.tsx";
 import SignUpScreen from "./screens/SignUpScreen.tsx";
 import PhotosScreen from "./screens/PhotosScreen.tsx";
 import PPVScreen from "./screens/PPVScreen.tsx";
-import CreditsScreen from './screens/CreditsScreen.tsx';
-import { execs } from "./data/data.ts";
+import CreditsScreen from "./screens/CreditsScreen.tsx";
 
 //Add any routes for screens below
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<App />}>
       <Route index={true} element={<HomeScreen />} />
       <Route path="/test" element={<TestScreen />} />
-      <Route path="/exec" element={<ExecScreen execs={execs} />} />
+      <Route path="/exec" element={<ExecScreen />} />
       <Route path="/login" element={<LoginScreen />} />
       <Route path="/signup" element={<SignUpScreen />} />
       <Route path="/pvv" element={<PPVScreen />} />

web/src/screens/ExecScreen.tsx

@@ -1,16 +1,25 @@
-import { Props } from "../types/types";
+import LoadingSpinner from "@components/LoadingSpinner";
+import useFetch from "../hooks/useFetch";
+import { Exec } from "../types/types";
+
+function ExecScreen() {
+  const { loading, data, error } = useFetch(
+    `${import.meta.env.VITE_STRAPI_URL}/api/execs?populate=*`
+  );
+  if (loading) return <LoadingSpinner />;
+  if (error) return <div>{error}</div>;
+  const execs: Exec[] = mapToExec(data);
 
-function ExecScreen({ execs }: Props) {
   return (
-    <div>
+    <div className="mt-20">
       <h1>Meet the Execs</h1>
       <div className="grid grid-cols-2 gap-10">
         {execs.map((exec) => (
           <div key={exec.id} className="bg-white text-black p-5 rounded-lg">
             <div className="flex items-center">
               <img
                 className="rounded-full max-w-40 max-h-40 mr-4"
-                src={exec.image}
+                src={`${import.meta.env.VITE_STRAPI_URL}${exec.image}`}
                 alt="exec image"
               />
               <div>
@@ -27,3 +36,15 @@ function ExecScreen({ execs }: Props) {
 }
 
 export default ExecScreen;
+
+const mapToExec = (data: any): Exec[] => {
+  return data.data.map((item: any) => {
+    return {
+      id: item.id,
+      name: item.attributes.name,
+      bio: item.attributes.bio,
+      position: item.attributes.position,
+      image: item.attributes.image.data.attributes.url,
+    };
+  });
+};

web/tsconfig.json

@@ -5,7 +5,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-    "types": ["vitest/globals"],
+    "types": ["vitest/globals", "node"],
 
     "paths": {
       "@utils/*": ["./src/utils/*"],

web/yarn.lock

@@ -718,6 +718,13 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
+"@types/node@^20.14.2":
+  version "20.14.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.2.tgz#a5f4d2bcb4b6a87bffcaa717718c5a0f208f4a18"
+  integrity sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/prop-types@*":
   version "15.7.11"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz"
@@ -2942,6 +2949,11 @@ ufo@^1.5.3:
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.5.3.tgz#3325bd3c977b6c6cd3160bf4ff52989adc9d3344"
   integrity sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==
 
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
 universal-cookie@^7.0.2:
   version "7.0.2"
   resolved "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.0.2.tgz"