Merge pull request #48 from northwesternfintech/replace-newline-with-…

…linebreak-frontend

web/app/dash/submissions/[id]/page.tsx

@@ -2,6 +2,7 @@
 import { useUserInfo } from "@/app/login/auth/context";
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
+import React from "react";
 export default function Page({ params }: { params: { id: string } }) {
   const userInfo = useUserInfo();
   const router = useRouter();
@@ -16,10 +17,35 @@ export default function Page({ params }: { params: { id: string } }) {
       router.push("/dash");
     }
   });
-  return (
-    <h1>
-      {userInfo?.user?.algos?.get(params.id)?.lintFailureMessage ||
-        userInfo?.user?.algos?.get(params.id)?.lintSuccessMessage || ""}
-    </h1>
-  );
+
+  const formatNewLines = (str: string) => {
+    const LINES = str.split("\n");
+    return LINES.map((line: string, index: number) => (
+      <React.Fragment key={`line_${index}`}>
+        <p>{line}</p>
+        {index < LINES.length - 1 && <br />}
+      </React.Fragment>
+    ));
+  }
+
+
+  const algoDetails = userInfo?.user?.algos?.get(params.id);
+  const lintFailureMessage = algoDetails?.lintFailureMessage;
+  const lintSuccessMessage = algoDetails?.lintSuccessMessage;
+  const stringToRender = lintFailureMessage || lintSuccessMessage || "";
+
+  if(stringToRender === "") {
+    return (
+      <div>
+        <p>Waiting on output...</p>
+      </div>
+    );
+  } else {
+    // TODO: add styling
+    return (
+      <div> 
+        {formatNewLines(stringToRender)}
+      </div>
+    );
+  }
 }