update

reader/src/App.jsx

@@ -45,7 +45,8 @@ function LoadingWrapper({ children }) {
   const isLoading = useStore((state) => state.isLoading);
 
   if (isLoading) {
-    return "Loading...";
+    //return "Loading...";
+    return null;
   }
 
   return children;
@@ -205,15 +206,17 @@ export function TopicListView() {
 
 function FileReader() {
   const topic = useTopicSyncParams();
-  const topicIdx = useStore((state) => state.topicIdx);
+
+  if (topic.isLoading) {
+    return null;
+    //return "Loading...";
+  }
 
   if (!topic) {
     return <Navigate to="/" replace />;
   }
 
-  console.log({ topic, topicIdx });
-
-  return <Reader topic={topic} />;
+  return <Reader key={topic.id} topic={topic} />;
 }
 
 export function Reader({ topic }) {
@@ -222,15 +225,10 @@ export function Reader({ topic }) {
 
   const { prevTopic, nextTopic } = useTopicsAround();
 
-  const resourceIdx = useStore((state) => state.resourceIdx);
-  const selectResource = useStore((state) => state.selectResource);
   const [isSelectingResource, setIsSelectingResource] = useState(false);
-  const selectedResource = topic.resources[resourceIdx];
+  const [resourceIdx, setResourceIdx] = useState(topic.resources.length - 1);
 
-  console.log("reader!");
-  if (!prevTopic || !nextTopic) {
-    return "balb";
-  }
+  const selectedResource = topic.resources[resourceIdx];
 
   return (
     <>
@@ -295,9 +293,8 @@ export function Reader({ topic }) {
               </button>
             )}
             {topic.resources.length > 1 && (
-              <div className="relative flex ml-2">
+              <div className="relative h-full flex ml-2">
                 <button
-                  key={selectedResource.id}
                   className={`${isSelectingResource ? "invisible" : ""} flex-1 shadow-xl cursor-pointer px-2 py-1 rounded-md text-xs text-blue-800 font-medium whitespace-nowrap bg-blue-100/50 backdrop-blur hover:bg-blue-200/50 border border-blue-100`}
                   onClick={() => setIsSelectingResource(true)}
                 >
@@ -305,7 +302,6 @@ export function Reader({ topic }) {
                 </button>
                 {isSelectingResource && (
                   <button
-                    key={selectedResource.id}
                     className={`absolute w-full h-full flex-1 flex justify-center items-center cursor-pointer rounded-md hover:backdrop-blur hover:bg-blue-100/30`}
                     onClick={() => setIsSelectingResource(false)}
                   >
@@ -326,7 +322,7 @@ export function Reader({ topic }) {
                       : "bg-gray-100 hover:bg-gray-200 border border-gray-400"
                   }`}
                   onClick={() => {
-                    selectResource(rIndex);
+                    setResourceIdx(rIndex);
                     setIsSelectingResource(false);
                   }}
                 >
@@ -348,7 +344,7 @@ export function Reader({ topic }) {
             >
               <ArrowBackIcon />
               <span className="ml-2 truncate w-full ">
-                {prevTopic.sequence - 1 - 1}: {prevTopic.title}
+                {prevTopic.sequence}: {prevTopic.title}
               </span>
             </Link>
           )}
@@ -360,7 +356,7 @@ export function Reader({ topic }) {
               className="flex-1 px-4 py-2 hover:bg-blue-200 w-1/2 cursor-pointer flex align-center justify-end"
             >
               <span className="mr-2 w-full truncate">
-                {nextTopic.sequence - 1 + 1}: {nextTopic.title}
+                {nextTopic.sequence}: {nextTopic.title}
               </span>
               <ArrowForwardIcon />
             </Link>
@@ -433,11 +429,7 @@ export function PDFViewer({ file, compact, zoomFactor, justifyText }) {
         setIsLoading(true);
         const response = await resourcesInstance.get(`/${file.filename}`);
 
-        if (!response.ok) {
-          throw new Error(`Failed to load file: ${response.status}`);
-        }
-
-        let fileContent = await response.text();
+        let fileContent = response.data;
         if (fileContent === "") {
           fileContent = "**No Data!**";
         }

reader/src/api.js

@@ -6,11 +6,9 @@ const RESOURCES_BASE_URL = "https://resources.med.tomastm.com";
 export const apiInstance = axios.create({
   baseURL: API_BASE_URL,
   timeout: 1000,
-  headers: { Origin: "https://med.tomastm.com" },
 });
 
 export const resourcesInstance = axios.create({
   baseURL: RESOURCES_BASE_URL,
   timeout: 1000,
-  headers: { Origin: "https://med.tomastm.com" },
 });

reader/src/hooks.js

@@ -60,9 +60,10 @@ export function useTopicSyncParams() {
     }
   }, [selectSubject, selectTopic, topic]);
 
-  if (currentTopicIdx === null || currentSubjectIdx === null) {
-    return null;
+  if (topic && (currentTopicIdx === null || currentSubjectIdx === null)) {
+    return { isLoading: true };
   }
+
   return topic;
 }
 
@@ -71,7 +72,7 @@ export function useTopicsAround() {
     useShallow((state) => {
       const { subjects, subjectIdx, topicIdx } = state;
       const { topics } = subjects[subjectIdx];
-      console.log({ topics, topicIdx });
+
       const prevTopic = topicIdx === 0 ? null : topics[topicIdx - 1];
       const nextTopic = topicIdx === topics.length - 1 ? null : topics[topicIdx + 1];