Show session detail pages

Author: emscb

src/components/common/FallbackImg/index.tsx

@@ -1,13 +1,17 @@
-import React from 'react'
+import React from "react";
 
 type FallbackImgProps = React.HTMLAttributes<HTMLImageElement> & {
-  src: string
-  alt: string
-  loading?: 'lazy' | 'eager'
-  errorFallback: React.ReactNode
-}
+  src: string;
+  alt: string;
+  loading?: "lazy" | "eager";
+  errorFallback: React.ReactNode;
+};
 
 export const FallbackImg: React.FC<FallbackImgProps> = (props) => {
-  const [isError, setIsError] = React.useState(false)
-  return isError ? props.errorFallback : <img src={props.src} alt={props.alt} onError={() => setIsError(true)} />
-}
+  const [isError, setIsError] = React.useState(!props.src ? true : false);
+  return isError ? (
+    props.errorFallback
+  ) : (
+    <img src={props.src} alt={props.alt} onError={() => setIsError(true)} />
+  );
+};

src/pages/Session/list.tsx

@@ -10,29 +10,21 @@ import { APIPretalxSessions } from "models/api/session";
 import { useListSessionsQuery } from "utils/hooks/useAPI";
 import useTranslation from "utils/hooks/useTranslation";
 
-const ENABLE_PROFILE_IMG_AND_DETAILS = false;
-
 const SessionItem: React.FC<{ session: APIPretalxSessions[0] }> = ({ session }) => {
   const t = useTranslation();
   const navigate = useNavigate();
 
-  const h4Props = ENABLE_PROFILE_IMG_AND_DETAILS
-    ? { onClick: () => navigate(`/session/${session.code}`) }
-    : {};
-
   return (
     <SessionItemEl>
-      {ENABLE_PROFILE_IMG_AND_DETAILS && (
-        <SessionItemImgContainer>
-          <FallbackImg
-            src={session.image || ""}
-            alt={session.title}
-            errorFallback={<SloganShort />}
-          />
-        </SessionItemImgContainer>
-      )}
+      <SessionItemImgContainer>
+        <FallbackImg
+          src={session.image || ""}
+          alt={session.title}
+          errorFallback={<SloganShort />}
+        />
+      </SessionItemImgContainer>
       <SessionItemInfoContainer>
-        <h4 {...h4Props}>{session.title}</h4>
+        <h4 onClick={() => navigate(`/session/${session.code}`)}>{session.title}</h4>
         <p>{session.abstract}</p>
         <SessionSpeakerContainer>
           by{" "}
@@ -183,7 +175,7 @@ const SessionItemInfoContainer = styled.div`
   h4 {
     color: #febd99;
     margin-bottom: 0.2rem;
-    cursor: ${ENABLE_PROFILE_IMG_AND_DETAILS ? "pointer" : "default"};
+    cursor: pointer;
   }
 
   p {

src/pages/Session/timetable.tsx

@@ -9,8 +9,6 @@ import { useNavigate } from "react-router";
 import { useListSessionsQuery } from "utils/hooks/useAPI";
 import useTranslation from "utils/hooks/useTranslation";
 
-const ENABLE_DETAILS = false;
-
 const TD_HEIGHT = 2.5;
 const TD_WIDTH = 12.5;
 const TD_WIDTH_MOBILE = 20;
@@ -109,7 +107,7 @@ const SessionColumn: React.FC<{
   session: APIPretalxSessions[0];
 }> = ({ rowSpan, colSpan, session }) => {
   const navigate = useNavigate();
-  const clickable = ENABLE_DETAILS && R.isArray(session.speakers) && !R.isEmpty(session.speakers);
+  const clickable = R.isArray(session.speakers) && !R.isEmpty(session.speakers);
   // Firefox는 rowSpan된 td의 height를 계산할 때 rowSpan을 고려하지 않습니다. 따라서 직접 계산하여 height를 설정합니다.
   const sessionBoxHeight = `${TD_HEIGHT * rowSpan}rem`;
   return (