Merge pull request #65 from aodn/bugfix/5280-detail-page-image-import

🐛 fix image src import method and some bugs

src/components/details/LinkCard.tsx

@@ -3,6 +3,7 @@ import { Link as LinkType } from "../common/store/searchReducer";
 import { Box, Grid, Link, Typography } from "@mui/material";
 import { color, fontColor, padding } from "../../styles/constants";
 import CopyLinkButton from "../common/buttons/CopyLinkButton";
+import linkIcon from "../../assets/icons/link.png";
 
 const LinkCard = ({
   link,
@@ -59,7 +60,7 @@ const LinkCard = ({
                 }}
               >
                 <img
-                  src="src/assets/icons/link.png"
+                  src={linkIcon}
                   alt=""
                   style={{
                     objectFit: "scale-down",

src/components/details/icons/Dimensions.tsx

@@ -1,12 +1,8 @@
 import IconContainer from "./IconContainer";
+import dimensions from "../../../assets/icons/dimensions.png";
 
 const DimensionsIcon = () => {
-  return (
-    <IconContainer
-      imgUrl="src/assets/icons/dimensions.png"
-      label="Dimensions"
-    />
-  );
+  return <IconContainer imgUrl={dimensions} label="Dimensions" />;
 };
 
 export default DimensionsIcon;

src/components/details/icons/SpatialIcon.tsx

@@ -1,9 +1,8 @@
 import IconContainer from "./IconContainer";
+import spatial from "../../../assets/icons/spatial.png";
 
 const SpatialIcon = () => {
-  return (
-    <IconContainer imgUrl="src/assets/icons/spatial.png" label="Spatial" />
-  );
+  return <IconContainer imgUrl={spatial} label="Spatial" />;
 };
 
 export default SpatialIcon;

src/components/details/icons/TimeRangeIcon.tsx

@@ -1,12 +1,8 @@
 import IconContainer from "./IconContainer";
+import timeRange from "../../../assets/logos/time-range.png";
 
 const TimeRangeIcon = () => {
-  return (
-    <IconContainer
-      imgUrl="src/assets/logos/time-range.png"
-      label="Time Range"
-    />
-  );
+  return <IconContainer imgUrl={timeRange} label="Time Range" />;
 };
 
 export default TimeRangeIcon;

src/pages/detail-page/subpages/HeaderSection.tsx

@@ -19,8 +19,8 @@ import ReplyIcon from "@mui/icons-material/Reply";
 import SkipNextIcon from "@mui/icons-material/SkipNext";
 import SkipPreviousIcon from "@mui/icons-material/SkipPrevious";
 import { useDetailPageContext } from "../context/detail-page-context";
-
 import { useNavigate } from "react-router-dom";
+import imosLogoWithTitle from "../../../../public/logo/imos_logo_with_title.png";
 
 interface ButtonWithIcon {
   label: string;
@@ -154,7 +154,7 @@ const HeaderSection = () => {
           {/* TODO: replace with real org logo */}
           <img
             aria-label="collection image"
-            src="logo/imos_logo_with_title.png"
+            src={imosLogoWithTitle}
             alt="imos_logo_with_title"
             style={{
               objectFit: "contain",

src/pages/detail-page/subpages/components/ContactCard.tsx

@@ -2,7 +2,7 @@ import { Grid, Link, Typography } from "@mui/material";
 import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
 import LanguageOutlinedIcon from "@mui/icons-material/LanguageOutlined";
 import React from "react";
-import { IContact } from "../../../../types/DataStructureTypes";
+import { IAddress, IContact } from "../../../../types/DataStructureTypes";
 import LocalPhoneOutlinedIcon from "@mui/icons-material/LocalPhoneOutlined";
 import PrintOutlinedIcon from "@mui/icons-material/PrintOutlined";
 
@@ -11,8 +11,14 @@ interface ContactCardProps {
 }
 
 const ContactCard: React.FC<ContactCardProps> = ({ contact }) => {
+  let addresses: IAddress;
+  if (contact && Array.isArray(contact.addresses) && contact.addresses[0]) {
+    addresses = contact.addresses[0];
+  } else {
+    addresses = {} as IAddress;
+  }
   const { delivery_point, city, country, postal_code, administrative_area } =
-    contact.addresses[0];
+    addresses;
   const phones = contact.phones;
   const links = contact.links;
 

src/pages/detail-page/subpages/side-cards/OverviewCard.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import SideCardContainer from "./SideCardContainer";
 import { Box } from "@mui/material";
+import bgLandingPage from "../../../../../public/bg_landing_page.png";
 
 // TODO: replace with real picture url
 const OverviewCard = () => {
   return (
     <SideCardContainer title="Overview">
       <Box sx={{ width: "100%", height: "200px" }}>
         <img
-          src={"public/bg_landing_page.png"}
+          src={bgLandingPage}
           alt="imos_logo"
           style={{
             objectFit: "cover",

src/pages/detail-page/subpages/side-cards/RatingsAndCommentsCard.tsx

@@ -8,6 +8,14 @@ import {
   Typography,
 } from "@mui/material";
 import { borderRadius, color, padding } from "../../../../styles/constants";
+import twitterIcon from "../../../../assets/icons/twitter.png";
+import facebookIcon from "../../../../assets/icons/facebook.png";
+import instagramIcon from "../../../../assets/icons/instagram.png";
+import emailIcon from "../../../../assets/icons/email.png";
+import linkIcon from "../../../../assets/icons/link.png";
+import commentsIcon from "../../../../assets/icons/comments.png";
+import feedbackIcon from "../../../../assets/icons/feedback.png";
+
 interface SocialIcon {
   name: string;
   icon?: JSX.Element;
@@ -17,11 +25,11 @@ interface SocialIcon {
 
 // TODO: add real social sites links
 const socialIcons: SocialIcon[] = [
-  { name: "twitter", imgUrl: "src/assets/icons/twitter.png", url: "#" },
-  { name: "facebook", imgUrl: "src/assets/icons/facebook.png", url: "#" },
-  { name: "facebook", imgUrl: "src/assets/icons/instagram.png", url: "#" },
-  { name: "facebook", imgUrl: "src/assets/icons/email.png", url: "#" },
-  { name: "facebook", imgUrl: "src/assets/icons/link.png", url: "#" },
+  { name: "twitter", imgUrl: twitterIcon, url: "#" },
+  { name: "facebook", imgUrl: facebookIcon, url: "#" },
+  { name: "instagram", imgUrl: instagramIcon, url: "#" },
+  { name: "email", imgUrl: emailIcon, url: "#" },
+  { name: "link", imgUrl: linkIcon, url: "#" },
 ];
 
 const RatingsAndCommentsCard = () => {
@@ -88,7 +96,7 @@ const RatingsAndCommentsCard = () => {
               }}
             >
               <img
-                src="src/assets/icons/comments.png"
+                src={commentsIcon}
                 alt="all_comments"
                 style={{
                   objectFit: "contain",
@@ -123,7 +131,7 @@ const RatingsAndCommentsCard = () => {
               }}
             >
               <img
-                src="src/assets/icons/feedback.png"
+                src={feedbackIcon}
                 alt="add_your_feedback"
                 style={{
                   objectFit: "contain",