Coding challenge (Rafael Macapagal)

backend/server.js

@@ -5,6 +5,7 @@ const fs = require("node:fs").promises; // For asynchronous file writing
 const path = require("node:path");
 const app = express();
 const port = 3001; // Or another port
+var mammoth = require("mammoth");
 
 app.use(cors());
 app.use(express.json()); // To parse JSON request bodies
@@ -48,6 +49,48 @@ app.post("/api/files/:fileId/comments", async (req, res) => {
   }
 });
 
+app.get("/api/files/:fileId/content", (req, res) => {
+  const fileId = req.params.fileId;
+  const file = data.files.find((row) => row.id === fileId);
+
+  if( !file ) {
+    return res.status(404).json({ error: "File not found!" });
+  }
+  const file_type = path.extname(file.filename)
+  if ( file_type !== '.docx' ) {
+    return res.status(422).json({ error: "Incorrect file type!" });
+  }
+  mammoth.convertToHtml({path: path.join(__dirname, 'data', file.filename)})
+    .then(function(result){
+        res.send(result.value)
+    })
+    .catch(function(error) {
+        console.error("Error converting file", error)
+        res.status(500).json({ error: `Error converting file: ${error.message}` });
+    });
+});
+
+app.get("/api/files/:fileId/view", (req, res) => {
+  const fileId = req.params.fileId;
+  const file = data.files.find((row) => row.id === fileId);
+
+  if( !file ) {
+    return res.status(404).json({ error: "File not found!" });
+  }
+  const file_type = path.extname(file.filename)
+  if ( file_type !== '.pdf' ) {
+    return res.status(422).json({  message: "Preview not supported" });
+  }
+  try {
+    return res
+      .setHeader("Content-Type", "application/pdf")
+      .sendFile(path.join(__dirname, 'data', file.filename))
+  } catch( error ) {
+      console.error("Error viewing PDF file", error)
+      res.status(500).json({ error: `Error viewing PDF file: ${error.message}` });
+  }
+});
+
 app.listen(port, () => {
   console.log(`Server listening on port ${port}`);
 });

frontend/src/app/page.tsx

@@ -8,6 +8,7 @@ import CommentSection from "@/components/CommentSection"; // Import the componen
 interface File {
   id: string;
   name: string;
+  filename: string
   uploadDate: string;
 }
 
@@ -16,6 +17,9 @@ export default function Home() {
   const [selectedFileId, setSelectedFileId] = useState<string | null>(null); // State for selected file ID
   const [isLoadingFiles, setIsLoadingFiles] = useState(false);
   const [errorFiles, setErrorFiles] = useState<string | null>(null);
+  const [file, setFile] = useState<string | null>(null);
+  const [fileType, setFileType] = useState<"pdf"|"docx"|null>(null);
+  const [fileLoading, setFileLoading] = useState<boolean>(false);
 
   useEffect(() => {
     setIsLoadingFiles(true);
@@ -53,6 +57,35 @@ export default function Home() {
     }
   };
 
+  useEffect(() => {
+    setFileLoading(true)
+    const file = files.find((row) => row.id === selectedFileId)
+    if( !file ) {
+      console.error("file not found!")
+      setFileLoading(false)
+      return
+    }
+    getFileDetails(file)
+  }, [selectedFileId, files])
+
+
+  function getFileDetails(file: File) {
+    const file_split = file.filename.split('.')
+    const file_type = file_split.slice(-1)[0]
+    if( file_type === "docx" ) {
+      setFileType("docx")
+      fetch(`http://localhost:3001/api/files/${file.id}/content`)
+          .then(async (res) => {
+            setFile(await res.text());
+          })
+    } else if ( file_type === "pdf" ) {
+      setFileType("pdf")
+      setFile(`http://localhost:3001/api/files/${file.id}/view#view=FitV`);
+    }
+
+    setFileLoading(false)
+  }
+
   return (
     <main className="flex min-h-screen flex-col p-8 md:p-16 lg:p-24 bg-gray-50 text-gray-900">
       <div className="w-full max-w-6xl mx-auto">
@@ -95,10 +128,34 @@ export default function Home() {
 
           {/* Comment Section */}
           <div className="md:col-span-2">
+
+            {fileLoading && <p>Loading files...</p>}
+            { 
+              !!file ? (<>
+                { fileType == 'docx' ? <DocxDiv html={file} /> : <PDFDiv link={file} /> }
+              </>): undefined}
             <CommentSection fileId={selectedFileId} />
           </div>
         </div>
       </div>
     </main>
   );
 }
+
+function DocxDiv({ html }: {
+  html: string
+})
+{
+  return (
+    <div dangerouslySetInnerHTML={{__html: html}}></div>
+  )
+}
+
+function PDFDiv({ link }: {
+  link: string
+})
+{
+  return (
+    <iframe src={link} width={750} height={1000} />
+  )
+}