From 68899bd9bf397eccdf22dcfa1085c6fe7cb6b74d Mon Sep 17 00:00:00 2001
From: Jose B <jose.zdy@gmail.com>
Date: Tue, 18 Jul 2023 17:36:30 -0500
Subject: [PATCH] re-arrange code

---
 app/components/audioVisualizer.js |  5 +----
 app/components/dashboard.js       | 27 ++++-----------------------
 app/components/record.js          | 23 ++++++++++-------------
 app/page.js                       | 24 ++++++++++++++++--------
 4 files changed, 31 insertions(+), 48 deletions(-)

diff --git a/app/components/audioVisualizer.js b/app/components/audioVisualizer.js
index 12954d63..fedaa5da 100644
--- a/app/components/audioVisualizer.js
+++ b/app/components/audioVisualizer.js
@@ -56,10 +56,7 @@ function AudioVisualizer(props) {
   }, []);
 
   return (
-    <>
-      <p>Is recording: {props.isRecording ? "true" : "false"}</p>
-      <canvas className="w-full h-16" ref={canvasRef} />
-    </>
+    <canvas className="w-full h-16" ref={canvasRef} />
   );
 }
 
diff --git a/app/components/dashboard.js b/app/components/dashboard.js
index 952c7f47..d8dd0aa3 100644
--- a/app/components/dashboard.js
+++ b/app/components/dashboard.js
@@ -1,13 +1,10 @@
 import { Mulberry32 } from "../utils.js";
 import React, { useState, useEffect } from "react";
-import AudioVisualizer from "./audioVisualizer.js";
 
 export function Dashboard(props) {
   const [openIndex, setOpenIndex] = useState(null);
   const [liveTranscript, setLiveTranscript] = useState("");
 
-  const [fakeTranscriptIndex, setFakeTranscriptIndex] = useState(0);
-
   const fakeTranscripts = [
     "This is the first transcript. We are discussing the current situation of our company. We are currently leading the market with a significant margin, and our future outlook is also very promising...",
     "Here is the second transcript. We are now moving to our next topic, which is the progress in our ongoing projects. Most of them are on schedule and the quality of work is up to our standard...",
@@ -104,11 +101,7 @@ export function Dashboard(props) {
 
   return (
     <>
-      <div className="w-3/4 py-4">
-        <div className="text-center py-6">
-          <h1 className="text-4xl font-bold text-blue-500">Reflector</h1>
-          <p className="text-gray-500">Capture The Signal, Not The Noise</p>
-        </div>
+      <div className="p-4">
         <div className="flex justify-between border-b-2">
           <div className="w-1/4">Timestamp</div>
           <div className="w-1/4">Topic</div>
@@ -136,11 +129,11 @@ export function Dashboard(props) {
               </div>
             </div>
             {openIndex === index && (
-              <div className="mt-2 p-2 bg-white">{item.transcript}</div>
+              <div className="mt-2 p-2">{item.transcript}</div>
             )}
           </div>
         ))}
-        <div className="border-b-2 py-2">
+        <div className="border-b-2 py-2 w-[90vw] max-w-[1280px]">
           <div className="flex justify-between">
             <div className="w-1/4">Live</div>
             <div className="w-1/4">Transcript</div>
@@ -148,21 +141,9 @@ export function Dashboard(props) {
               {generateDecibelGraph(generateDecibelData())}
             </div>
           </div>
-          <div className="mt-2 p-2 bg-white">{liveTranscript}</div>
+          <div className="mt-2 p-2">{liveTranscript}</div>
         </div>
-        <AudioVisualizer isRecording={props.isRecording} />
 
-        <button
-          className="mx-auto mt-6 mb-9"
-          onClick={() => props.onRecord(!props.isRecording)}
-          data-color={props.isRecording ? "red" : "blue"}
-        >
-          {props.isRecording ? "STOP" : "RESUME"}
-        </button>
-
-        <footer className="w-full bg-gray-800 text-center py-4 mt-4 text-white">
-          Reflector © 2023 Monadical
-        </footer>
       </div>
     </>
   );
diff --git a/app/components/record.js b/app/components/record.js
index 03c9c4aa..26bcc984 100644
--- a/app/components/record.js
+++ b/app/components/record.js
@@ -1,4 +1,6 @@
-export default function Record(props) {
+import AudioVisualizer from "./audioVisualizer.js";
+
+export default function Recorder(props) {
   let mediaRecorder = null; // mediaRecorder instance
 
   const startRecording = () => {
@@ -17,23 +19,18 @@ export default function Record(props) {
   };
 
   return (
-    <div className="flex flex-col justify-center h-screen">
-      <div className="text-center py-6 mt-10">
-        <h1 className="text-5xl font-bold text-blue-500">Reflector</h1>
-        <p className="text-gray-500">Capture The Signal, Not The Noise</p>
-      </div>
+      <div className="flex flex-col items-center justify-center">
+        {props.isRecording && <AudioVisualizer />}
 
-      <div className="flex flex-col items-center justify-center flex-grow -mt-10">
-        {!props.isRecording ? (
-          <button onClick={startRecording} data-color="blue">
-            Record
-          </button>
-        ) : (
+        {props.isRecording ? (
           <button onClick={stopRecording} data-color="red">
             Stop
           </button>
+        ) : (
+          <button onClick={startRecording} data-color="blue">
+            Record
+          </button>
         )}
       </div>
-    </div>
   );
 }
diff --git a/app/page.js b/app/page.js
index 563a9942..5130b47a 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,6 +1,6 @@
 "use client";
 import React, { useState, useEffect } from "react";
-import Record from "./components/record.js";
+import Recorder from "./components/record.js";
 import { Dashboard } from "./components/dashboard.js";
 import useWebRTC from "./components/webrtc.js";
 import "../public/button.css";
@@ -36,19 +36,27 @@ const App = () => {
   console.log(serverData);
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-      {splashScreen && (
-        <Record
-          isRecording={isRecording}
-          onRecord={(recording) => handleRecord(recording)}
-        />
-      )}
+    <div className="flex flex-col items-center h-[100svh]">
+      <div className="text-center py-6 mt-10">
+        <h1 className="text-5xl font-bold text-blue-500">Reflector</h1>
+        <p className="text-gray-500">Capture The Signal, Not The Noise</p>
+      </div>
+
+      <Recorder
+        isRecording={isRecording}
+        onRecord={(recording) => handleRecord(recording)}
+      />
+
       {!splashScreen && (
         <Dashboard
           isRecording={isRecording}
           onRecord={(recording) => handleRecord(recording)}
         />
       )}
+
+      <footer className="w-full bg-gray-800 text-center py-4 mt-auto text-white">
+        Reflector © 2023 Monadical
+      </footer>
     </div>
   );
 };