images issue is fixed

kamikidd · May 23, 2024 · 6476efc · 6476efc
1 parent f2589d1
commit 6476efc
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 119 deletions.
diff --git a/dist/assets/index.e5dbc594.js → dist/assets/index.df64b4cb.js b/dist/assets/index.e5dbc594.js → dist/assets/index.df64b4cb.js
diff --git a/dist/index.html b/dist/index.html
@@ -22,7 +22,7 @@
       href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500&family=Karla&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/bv2024_frontend/assets/index.e5dbc594.js"></script>
+    <script type="module" crossorigin src="/bv2024_frontend/assets/index.df64b4cb.js"></script>
     <link rel="stylesheet" href="/bv2024_frontend/assets/index.800bf6e7.css">
   </head>
   <body>

diff --git a/js/ServicePicComp.jsx b/js/ServicePicComp.jsx
@@ -1,25 +1,6 @@
 import { useFetchMedia } from "./useFetchMedia";
-// import { useQuery } from "@tanstack/react-query";
-// import { useNavigate } from "react-router-dom";
-// import Spinner from "./Spinner";
-// import fetchData from "./fetchData";
 const ServicePicComp = ({ imgid, picName }) => {
   const media = useFetchMedia(imgid, "imgs/category/forschung.png");
-  console.log(media);
-  // const navigate = useNavigate();
-  // const pic = useQuery(["pic", `media`, `${imgid}`], fetchData);
-  // if (pic.isLoading) {
-  //   return <Spinner></Spinner>;
-  // }
-  // if (pic.isError) {
-  //   navigate("/NotMatch404");
-  // }
-  // let servicePic = "imgs/category/forschung.png";
-  // let image = pic.data.source_url;
-  // console.log(pic);
-  // if (image) {
-  //   servicePic = image;
-  // }
 
   return (
     <div className="picContainer">

diff --git a/js/StaffDetail.jsx b/js/StaffDetail.jsx
@@ -7,14 +7,15 @@ import fetchData from "./fetchData";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import Spinner from "./Spinner";
-
+import { useFetchMedia } from "./useFetchMedia";
+import unknownstaff_pic from "../imgs/staffs/unknown.png";
 const StaffDetail = () => {
   const location = useLocation();
   const state = location.state;
   const navigate = useNavigate();
-
+  const media = useFetchMedia(state.acf.imgid, unknownstaff_pic);
   const staffdetails = useQuery(
-    ["staffdetails", `mitarbeitende/${state}`, ""],
+    ["staffdetails", `mitarbeitende/${state.id}`, ""],
     fetchData
   );
 
@@ -33,6 +34,7 @@ const StaffDetail = () => {
           <Col xl={4}>
             <StaffDetailCompLeft
               staff={staffdetails.data}
+              img={media}
             ></StaffDetailCompLeft>
           </Col>
           <Col xl={8}>

diff --git a/js/StaffDetailCompLeft.jsx b/js/StaffDetailCompLeft.jsx
@@ -1,17 +1,12 @@
 import linkedin_logo from "../imgs/logos/linkedIn_logo_s.png";
 import { Link } from "react-router-dom";
 
-const StaffDetailCompLeft = ({ staff }) => {
-  let staffPic = "imgs/staffs/unknown.png";
-
-  if (staff.acf.foto) {
-    staffPic = staff.acf.foto_url;
-  }
+const StaffDetailCompLeft = ({ staff, img }) => {
   const information = staff.acf.otherInfo.split("\r\n");
   return (
     <div>
       <div id="staff_box">
-        <img id="staff_detail_pic" src={staffPic} alt="staff" />
+        <img id="staff_detail_pic" src={img} alt="staff" />
         <div>
           <div id="staff_name" className="staff_info">
             {staff.title.rendered}

diff --git a/js/StaffPicComp.jsx b/js/StaffPicComp.jsx
@@ -1,29 +1,12 @@
-import { useQuery } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
-import Spinner from "./Spinner";
-import fetchData from "./fetchData";
+import { useFetchMedia } from "./useFetchMedia";
 import unknownstaff_pic from "../imgs/staffs/unknown.png";
 const StaffPicComp = ({ imgid, staffName, position }) => {
-  const navigate = useNavigate();
-  const pic = useQuery(["pic", `media`, `${imgid}`], fetchData);
-  if (pic.isLoading) {
-    return <Spinner></Spinner>;
-  }
-  if (pic.isError) {
-    navigate("/NotMatch404");
-  }
-
-  let staffPic = unknownstaff_pic;
-  let image = pic.data.source_url;
-
-  if (image) {
-    staffPic = image;
-  }
+  const media = useFetchMedia(imgid, unknownstaff_pic);
 
   return (
     <div className="staffPicContainer">
       <div className="staff_pic">
-        <img src={staffPic} alt={staffName}></img>
+        <img src={media} alt={staffName}></img>
         <div className="staff_pic_caption_1">
           <div className="staff_pic_text_1">{staffName}</div>
         </div>

diff --git a/js/Staffs.jsx b/js/Staffs.jsx
@@ -8,7 +8,6 @@ import { Link, useNavigate } from "react-router-dom";
 import DOMPurify from "dompurify";
 import Spinner from "./Spinner";
 import { deUmlaut } from "./helpers";
-import founder_pic from "../imgs/staffs/7.png";
 const Staffs = () => {
   const navigate = useNavigate();
   const staffs = useQuery(["staffs", "mitarbeitende", ""], fetchData);
@@ -32,21 +31,21 @@ const Staffs = () => {
       <Container className="categoryTitle">MITARBEITENDE</Container>
       <Container className="staffs-content">
         <Row className="staff-row">
-          {staffs.data.map((staff) => (
-            <Col
-              xl={4}
-              lg={4}
-              md={6}
-              sm={12}
-              className="staff-box"
-              key={staff.id}
-            >
-              {staff.title.rendered == "Adrian Vatter" ? (
-                ""
-              ) : (
+          {staffs.data.map((staff) =>
+            staff.title.rendered == "Adrian Vatter" ? (
+              ""
+            ) : (
+              <Col
+                xl={4}
+                lg={4}
+                md={6}
+                sm={12}
+                className="staff-box"
+                key={staff.id}
+              >
                 <Link
                   to={`/Mitarbeitende/${deUmlaut(staff.title.rendered)}`}
-                  state={staff.id}
+                  state={staff}
                 >
                   <StaffPicComp
                     imgid={staff.acf.imgid}
@@ -55,34 +54,33 @@ const Staffs = () => {
                     id={staff.title.rendered}
                   ></StaffPicComp>
                 </Link>
-              )}
-            </Col>
-          ))}
+              </Col>
+            )
+          )}
         </Row>
       </Container>
       <Container className="categoryTitle">VERWALTUNGSRAT</Container>
       <Container className="staffs-content">
-        <Row className="staff-box">
-          {staffs.data.map((staff) => (
-            <Col key={staff.id}>
-              {staff.title.rendered != "Adrian Vatter" ?? (
-                <StaffPicComp
-                  imgid={staff.acf.imgid}
-                  staffName={staff.title.rendered}
-                  position={staff.acf.position}
-                  id={staff.title.rendered}
-                ></StaffPicComp>
-              )}
-            </Col>
-          ))}
-
-          {/* <Col className="staff-box">
-            <StaffPicComp
-              imgid={founder_pic}
-              staffName={"Adrian Vatter"}
-              position={"Präsident des Verwaltungsrats"}
-            ></StaffPicComp>
-          </Col> */}
+        <Row className="staff-row">
+          {staffs.data.map((staff) =>
+            staff.title.rendered != "Adrian Vatter" ? (
+              ""
+            ) : (
+              <Col key={staff.id} className="staff-box">
+                <Link
+                  to={`/Mitarbeitende/${deUmlaut(staff.title.rendered)}`}
+                  state={staff.id}
+                >
+                  <StaffPicComp
+                    imgid={staff.acf.imgid}
+                    staffName={staff.title.rendered}
+                    position={staff.acf.position}
+                    id={staff.title.rendered}
+                  ></StaffPicComp>
+                </Link>
+              </Col>
+            )
+          )}
         </Row>
       </Container>
       <br />

diff --git a/js/TopicTabComp.jsx b/js/TopicTabComp.jsx
@@ -1,13 +1,12 @@
-const TopicTabComp = ({ images, picName }) => {
-  let topicPic = "imgs/topics/gesundheit.png";
-  if (images) {
-    topicPic = images;
-  }
+import { useFetchMedia } from "./useFetchMedia";
+
+const TopicTabComp = ({ imgid, picName }) => {
+  const media = useFetchMedia(imgid, "imgs/topics/gesundheit.png");
 
   return (
     <div className="topicPicContainer">
       <div className="topic_pic">
-        <img src={topicPic} alt={picName} />
+        <img src={media} alt={picName} />
         <div className="topic_pic_caption">
           <div className="topic_pic_text">{picName}</div>
         </div>

diff --git a/js/Topics.jsx b/js/Topics.jsx
@@ -37,7 +37,7 @@ const Topics = () => {
                 })}`}
               >
                 <TopicTabComp
-                  images={topic.acf.image_url}
+                  imgid={topic.acf.imgid}
                   picName={topic.title.rendered}
                 ></TopicTabComp>
               </Link>

diff --git a/js/useFetchMedia.jsx b/js/useFetchMedia.jsx
@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import Spinner from "./Spinner";
 import fetchData from "./fetchData";
 export function useFetchMedia(imgid, default_media) {
+  let media = default_media;
   const navigate = useNavigate();
   const pic = useQuery(["pic", `media`, imgid], fetchData);
   if (pic.isLoading) {
@@ -11,10 +12,7 @@ export function useFetchMedia(imgid, default_media) {
   if (pic.isError) {
     navigate("/NotMatch404");
   }
-  // let servicePic = "imgs/category/forschung.png";
-  let media = default_media;
   let image = pic.data.source_url;
-  console.log(pic);
   if (image) {
     media = image;
   }