feat: implement TestPreviewPage, remove Auth to test on mock-server

package.json

@@ -13,14 +13,17 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@cyntler/react-doc-viewer": "^1.13.0",
     "@heroicons/react": "^2.0.18",
     "@hookform/resolvers": "^3.2.0",
     "@material-tailwind/react": "^2.1.0",
+    "@types/react-modal": "^3.16.1",
     "axios": "^1.4.0",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.4",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.15.0",
     "react-toastify": "^9.1.3",
     "yup": "^1.2.0",

src/App.tsx

@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 import { NavigateFunction, useNavigate, useLocation } from 'react-router-dom';
 import { AppSkeleton } from '@components/common';
 import { MAIN_MENU, SUB_MENU } from '@constants';
-import { AppLayout, AuthLayout } from '@layouts';
-import { AuthPage, HomePage, TestPreviewPage } from '@pages';
+import { AppLayout } from '@layouts';
+import { HomePage, TestPreviewPage } from '@pages';
 import { useUserStore } from '@states/common';
 
 export default function App() {
@@ -26,13 +26,13 @@ export default function App() {
     return <AppSkeleton />;
   }
 
-  if (userStatus === 'REJECT') {
-    return (
-      <AuthLayout>
-        <AuthPage />
-      </AuthLayout>
-    );
-  }
+  // if (userStatus === 'REJECT') {
+  //   return (
+  //     <AuthLayout>
+  //       <AuthPage />
+  //     </AuthLayout>
+  //   );
+  // }
 
   return (
     <AppLayout

src/pages/TestPreviewPage.tsx

@@ -1,3 +1,36 @@
+import DocViewer, { DocViewerRenderers } from '@cyntler/react-doc-viewer';
+import Modal from 'react-modal';
+import React, { useState } from 'react';
 export function TestPreviewPage() {
-  return <>TestPreviewPage</>;
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [modalIsOpen, setModalIsOpen] = useState<boolean>(false);
+  const openPreview = (file: string) => {
+    setSelectedFile(file);
+    setModalIsOpen(true);
+  };
+  const closePreview = () => {
+    setModalIsOpen(false);
+  };
+  const Files: string[] = [
+    'http://localhost:3000/ssps-logo.jpg',
+    'http://localhost:3000/2309.07870v1.pdf'
+  ];
+  return (
+    <>
+      <h1>TestPreviewPage</h1>
+      <ul>
+        {Files.map((file, index) => (
+          <li key={index}>
+            {file} <button onClick={() => openPreview(file)}>Preview</button>
+          </li>
+        ))}
+      </ul>
+      <Modal isOpen={modalIsOpen} onRequestClose={closePreview}>
+        {selectedFile && (
+          <DocViewer pluginRenderers={DocViewerRenderers} documents={[{ uri: selectedFile }]} />
+        )}
+        <button onClick={closePreview}>Close Preview</button>
+      </Modal>
+    </>
+  );
 }