Refactor based on NextJS 13 Routing / Dir Layout

www/app/layout.js

@@ -1,4 +1,4 @@
-import "./globals.scss";
+import "./styles/globals.scss";
 import { Roboto } from "next/font/google";
 
 import Head from "next/head";

www/app/lib/random.js

@@ -17,15 +17,3 @@ export function Mulberry32(seed) {
     return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
   };
 }
-
-export const formatTime = (seconds) => {
-  let hours = Math.floor(seconds / 3600);
-  let minutes = Math.floor((seconds % 3600) / 60);
-  let secs = Math.floor(seconds % 60);
-
-  let timeString = `${hours > 0 ? hours + ":" : ""}${minutes
-    .toString()
-    .padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
-
-  return timeString;
-};

www/app/lib/time.js

@@ -0,0 +1,11 @@
+export const formatTime = (seconds) => {
+  let hours = Math.floor(seconds / 3600);
+  let minutes = Math.floor((seconds % 3600) / 60);
+  let secs = Math.floor(seconds % 60);
+
+  let timeString = `${hours > 0 ? hours + ":" : ""}${minutes
+    .toString()
+    .padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+
+  return timeString;
+};

www/app/transcripts/new/page.js

@@ -1,11 +1,11 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import Recorder from "./components/record.js";
+import Recorder from "../recorder";
-import { Dashboard } from "./components/dashboard.js";
+import { Dashboard } from "../dashboard";
-import useWebRTC from "./components/webrtc.js";
+import useWebRTC from "../useWebRTC";
-import useTranscript from "./components/transcript.js";
+import useTranscript from "../useTranscript";
-import { useWebSockets } from "./components/websocket.js";
+import { useWebSockets } from "../useWebSockets";
-import "../public/button.css";
+import "../../styles/button.css";
 
 const App = () => {
   const [stream, setStream] = useState(null);
@@ -39,6 +39,9 @@ const App = () => {
           setStream(null);
         }}
       />
+
+      <hr />
+
       <Dashboard
         transcriptionText={webSockets.transcriptText}
         finalSummary={webSockets.finalSummary}

www/app/transcripts/recorder.js

@@ -9,7 +9,7 @@ import Dropdown from "react-dropdown";
 import "react-dropdown/style.css";
 
 import CustomRecordPlugin from "./CustomRecordPlugin";
-import { formatTime } from "../utils";
+import { formatTime } from "../lib/time";
 
 const AudioInputsDropdown = (props) => {
   const [ddOptions, setDdOptions] = useState([]);

www/pages/api/sentry-example-api.js

@@ -1,5 +0,0 @@
-// A faulty API route to test Sentry's error monitoring
-export default function handler(_req, res) {
-  throw new Error("Sentry Example API Route Error");
-  res.status(200).json({ name: "John Doe" });
-}