Added logged email user on the extension (#42)

* added logged email user on the extension

* biome fixes

* added missing props

* biome fixes

* biome fixes

apps/mocksi-lite/consts.ts

@@ -10,6 +10,7 @@ export const MOCKSI_AUTH = "mocksi-auth";
 export const WebSocketURL = "wss://crowllectordb.onrender.com/ws";
 // FIXME: Move to an environment variable
 export const SignupURL = "https://nest-auth-ts-merge.onrender.com";
+export const STORAGE_KEY = "mocksi-auth";
 
 export enum RecordingState {
 	UNAUTHORIZED = "UNAUTHORIZED",

apps/mocksi-lite/content/ContentApp.tsx

@@ -10,6 +10,7 @@ import { RecordButton } from "./RecordButton";
 
 interface ContentProps {
 	isOpen?: boolean;
+	email: string | null;
 }
 const recordingLabel = (currentStatus: RecordingState) => {
 	switch (currentStatus) {
@@ -28,7 +29,7 @@ const recordingLabel = (currentStatus: RecordingState) => {
 	}
 };
 
-export default function ContentApp({ isOpen }: ContentProps) {
+export default function ContentApp({ isOpen, email }: ContentProps) {
 	const [isDialogOpen, setIsDialogOpen] = useState(isOpen || false);
 	const initialState = localStorage.getItem(
 		MOCKSI_RECORDING_STATE,
@@ -50,6 +51,7 @@ export default function ContentApp({ isOpen }: ContentProps) {
 				label={recordingLabel(state)}
 				close={() => setIsDialogOpen(false)}
 				setState={onChangeState}
+				email={email}
 			/>
 		);
 	}

apps/mocksi-lite/content/Popup/Footer.tsx

@@ -1,9 +1,12 @@
 import { logout } from "../../utils";
 
-const Footer = ({ close }: { close: () => void }) => {
+const Footer = ({
+	email,
+	close,
+}: { email: string | null; close: () => void }) => {
 	return (
 		<div className={"h-[36px] flex items-center justify-end pr-3"}>
-			<div className={"text-[13px] text-[#5E5E5E] mr-2"}>jana@mocoso.com</div>
+			<div className={"text-[13px] text-[#5E5E5E] mr-2"}>{email}</div>
 			<div
 				className={"text-[13px] text-[#006C52] underline cursor-pointer"}
 				onClick={() => {

apps/mocksi-lite/content/Popup/index.tsx

@@ -12,9 +12,10 @@ interface PopupProps {
 	label: string;
 	setState: (r: RecordingState) => void;
 	state: RecordingState;
+	email: string | null;
 }
 
-const Popup = ({ label, close, setState, state }: PopupProps) => {
+const Popup = ({ label, close, setState, state, email }: PopupProps) => {
 	const [createForm, setCreateForm] = useState<boolean>(false);
 
 	useEffect(() => {
@@ -50,7 +51,7 @@ const Popup = ({ label, close, setState, state }: PopupProps) => {
 			{!createForm && (
 				<div>
 					<Divider />
-					<Footer close={close} />
+					<Footer close={close} email={email} />
 				</div>
 			)}
 		</div>

apps/mocksi-lite/content/content.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom/client";
-import { STORAGE_CHANGE_EVENT } from "../consts";
+import { STORAGE_CHANGE_EVENT, STORAGE_KEY } from "../consts";
 import ContentApp from "./ContentApp";
 
 let root: ReactDOM.Root;
@@ -20,7 +20,10 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
 			root.unmount();
 		}
 		root = ReactDOM.createRoot(extensionRoot);
-		root.render(<ContentApp isOpen={true} />);
+		chrome.storage.local.get(STORAGE_KEY).then((value) => {
+			const { email } = JSON.parse(value[STORAGE_KEY] || {});
+			root.render(<ContentApp isOpen={true} email={email || ""} />);
+		});
 	}
 	sendResponse({ status: "success" });
 });