use wavesurfer, extend class, improve front

app/page.js

@@ -1,39 +1,16 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import Recorder from "./components/record.js";
 import { Dashboard } from "./components/dashboard.js";
 import useWebRTC from "./components/webrtc.js";
 import "../public/button.css";
 
 const App = () => {
-  const [isRecording, setIsRecording] = useState(false);
-  const [splashScreen, setSplashScreen] = useState(true);
-
-  const handleRecord = (recording) => {
-    console.log("handleRecord", recording);
-
-    setIsRecording(recording);
-    setSplashScreen(false);
-
-    if (recording) {
-      navigator.mediaDevices
-        .getUserMedia({ audio: true })
-        .then(setStream)
-        .catch((err) => console.error(err));
-    } else if (!recording) {
-      if (stream) {
-        const tracks = stream.getTracks();
-        tracks.forEach((track) => track.stop());
-        setStream(null);
-      }
-
-      setIsRecording(false);
-    }
-  };
-
   const [stream, setStream] = useState(null);
+
+  // This is where you'd send the stream and receive the data from the server.
+  // transcription, summary, etc
   const serverData = useWebRTC(stream);
-  console.log(serverData);
 
   return (
     <div className="flex flex-col items-center h-[100svh]">
@@ -42,17 +19,8 @@ const App = () => {
         <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)}
-        />
-      )}
+      <Recorder setStream={setStream}/>
+      <Dashboard serverData={serverData} />
 
       <footer className="w-full bg-gray-800 text-center py-4 mt-auto text-white">
         Reflector © 2023 Monadical