From 0c29e408f97a95de14e8f4cf9b8b0f3c6901d764 Mon Sep 17 00:00:00 2001 From: atyabbin Date: Wed, 5 Jun 2024 01:17:41 +0530 Subject: [PATCH 1/4] dashboard --- infra/staff/src/App.tsx | 206 +++++++++++++++++++++++++++++++++++----- 1 file changed, 184 insertions(+), 22 deletions(-) diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx index 01d79b18cc6..dc31e9116d4 100644 --- a/infra/staff/src/App.tsx +++ b/infra/staff/src/App.tsx @@ -1,28 +1,190 @@ -import React from "react"; -import { getUserDetails } from "./services/support-service"; +import React, { useEffect, useState } from "react"; + import S from "./utils/strings"; export const App: React.FC = () => { - const handleClick = () => { - const authToken = "xxx"; - getUserDetails(authToken) - .then((userDetails) => { - console.log("Fetched user details", userDetails); - }) - .catch((e: unknown) => { - console.error("Failed to fetch user details", e); - }); - }; + const [serverUrl, setServerUrl] = useState(""); + const [token, setToken] = useState(""); + const [userId, setUserId] = useState(""); + const [userData, setUserData] = useState(null); + const [error, setError] = useState(null); + useEffect(() => { + + const storedToken = localStorage.getItem("token"); + if (storedToken) { + setToken(storedToken); + } + }, []); + useEffect(() => { + + if (token) { + localStorage.setItem("token", token); + } else { + + localStorage.removeItem("token"); + } + }, [token]); + useEffect(() => { + + const storedserverUrl = localStorage.getItem("serverUrl"); + if (storedserverUrl) { + setServerUrl(storedserverUrl); + } + }, []); + useEffect(() => { + + if (serverUrl) { + localStorage.setItem("serverUrl", serverUrl); + } else { + + localStorage.removeItem("severUrl"); + } + }, [serverUrl]); + + + const fetchData = async () => { + try { + const url = `${serverUrl}/admin/user?id=${userId}&token=${token}`; + const response = await fetch(url); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + const userData = await response.json(); + console.log("API Response:", userData); + setUserData(userData); + setError(null); + } catch (error) { + console.error("Error fetching data:", error); + setError((error as Error).message); + } + }; + + const renderAttributes = (data: any) => { + if (!data) return null; + + let nullAttributes: string[] = []; + + const rows = Object.entries(data).map(([key, value]) => { + console.log("Processing key:", key, "value:", value); + + if (typeof value === "object" && value !== null && !Array.isArray(value)) { + return ( + + + {key.toUpperCase()} + + {renderAttributes(value)} + + ); + } else { + if (value === null) { + nullAttributes.push(key); + } + + + let displayValue = value; + if (key === "expiryTime" && typeof value === "number") { + displayValue = new Date(value / 1000).toLocaleString(); + } else if (key === "creationTime" && typeof value === "number") { + displayValue = new Date(value / 1000).toLocaleString(); + } else if (key === "storage") { + displayValue = value === null ? "null" : `${(value / (1024 ** 3)).toFixed(2)} GB`; + } else if (typeof value === "string") { + try { + + const parsedValue = JSON.parse(value); + displayValue = parsedValue; + } catch (error) { + + displayValue = value; + } + } else { + displayValue = value === null ? "null" : value.toString(); + } + return ( + + {key} + {displayValue} + + ); + } + }); + + console.log("Attributes with null values:", nullAttributes); + + return rows; + }; + - return ( -
-

{S.hello}

-

- help.ente.io -

-

- -

+ return ( +
+

{S.hello}

+ +
+
+ +
+
+ +
+
+
- ); +
+
+ +
+
+ {error &&

{`Error: ${error}`}

} + {userData && ( + + + {Object.keys(userData).map((category) => ( + + + + + {renderAttributes(userData[category])} + + ))} + +
{category.toUpperCase()}
+ )} + +
+ ); }; From 674907cd2ace13815f49c5bdd98940226cd5ba5d Mon Sep 17 00:00:00 2001 From: atyabbin Date: Wed, 5 Jun 2024 14:13:37 +0530 Subject: [PATCH 2/4] Added the required lint formatting and email input field --- infra/staff/src/App.tsx | 430 +++++++++++++++++++++++----------------- 1 file changed, 247 insertions(+), 183 deletions(-) diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx index dc31e9116d4..be158c418b2 100644 --- a/infra/staff/src/App.tsx +++ b/infra/staff/src/App.tsx @@ -1,190 +1,254 @@ import React, { useEffect, useState } from "react"; - import S from "./utils/strings"; export const App: React.FC = () => { - const [serverUrl, setServerUrl] = useState(""); - const [token, setToken] = useState(""); - const [userId, setUserId] = useState(""); - const [userData, setUserData] = useState(null); - const [error, setError] = useState(null); - useEffect(() => { - - const storedToken = localStorage.getItem("token"); - if (storedToken) { - setToken(storedToken); - } - }, []); - useEffect(() => { - - if (token) { - localStorage.setItem("token", token); - } else { - - localStorage.removeItem("token"); - } - }, [token]); - useEffect(() => { - - const storedserverUrl = localStorage.getItem("serverUrl"); - if (storedserverUrl) { - setServerUrl(storedserverUrl); - } - }, []); - useEffect(() => { - - if (serverUrl) { - localStorage.setItem("serverUrl", serverUrl); - } else { - - localStorage.removeItem("severUrl"); - } - }, [serverUrl]); - - - const fetchData = async () => { - try { - const url = `${serverUrl}/admin/user?id=${userId}&token=${token}`; - const response = await fetch(url); - if (!response.ok) { - throw new Error("Network response was not ok"); - } - const userData = await response.json(); - console.log("API Response:", userData); - setUserData(userData); - setError(null); - } catch (error) { - console.error("Error fetching data:", error); - setError((error as Error).message); - } - }; - - const renderAttributes = (data: any) => { - if (!data) return null; - - let nullAttributes: string[] = []; - - const rows = Object.entries(data).map(([key, value]) => { - console.log("Processing key:", key, "value:", value); - - if (typeof value === "object" && value !== null && !Array.isArray(value)) { - return ( - - - {key.toUpperCase()} - - {renderAttributes(value)} - - ); - } else { - if (value === null) { - nullAttributes.push(key); + const [serverUrl, setServerUrl] = useState(""); + const [token, setToken] = useState(""); + const [email, setEmail] = useState(""); + const [userData, setUserData] = useState(null); + const [error, setError] = useState(null); + + useEffect(() => { + const storedToken = localStorage.getItem("token"); + if (storedToken) { + setToken(storedToken); } - - - let displayValue = value; - if (key === "expiryTime" && typeof value === "number") { - displayValue = new Date(value / 1000).toLocaleString(); - } else if (key === "creationTime" && typeof value === "number") { - displayValue = new Date(value / 1000).toLocaleString(); - } else if (key === "storage") { - displayValue = value === null ? "null" : `${(value / (1024 ** 3)).toFixed(2)} GB`; - } else if (typeof value === "string") { - try { - - const parsedValue = JSON.parse(value); - displayValue = parsedValue; - } catch (error) { - - displayValue = value; - } - } else { - displayValue = value === null ? "null" : value.toString(); - } - return ( - - {key} - {displayValue} - - ); - } - }); - - console.log("Attributes with null values:", nullAttributes); - - return rows; - }; - - - return ( -
-

{S.hello}

- -
-
- -
-
- -
-
- + }, []); + + useEffect(() => { + if (token) { + localStorage.setItem("token", token); + } else { + localStorage.removeItem("token"); + } + }, [token]); + + useEffect(() => { + const storedServerUrl = localStorage.getItem("serverUrl"); + if (storedServerUrl) { + setServerUrl(storedServerUrl); + } + }, []); + + useEffect(() => { + if (serverUrl) { + localStorage.setItem("serverUrl", serverUrl); + } else { + localStorage.removeItem("serverUrl"); + } + }, [serverUrl]); + + const fetchData = async () => { + try { + const url = `${serverUrl}/admin/user?email=${email}&token=${token}`; + const response = await fetch(url); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + const userData = await response.json(); + console.log("API Response:", userData); + setUserData(userData); + setError(null); + } catch (error) { + console.error("Error fetching data:", error); + setError((error as Error).message); + } + }; + + const renderAttributes = (data: any) => { + if (!data) return null; + + let nullAttributes: string[] = []; + + const rows = Object.entries(data).map(([key, value]) => { + console.log("Processing key:", key, "value:", value); + + if ( + typeof value === "object" && + value !== null && + !Array.isArray(value) + ) { + return ( + + + + {key.toUpperCase()} + + + {renderAttributes(value)} + + ); + } else { + if (value === null) { + nullAttributes.push(key); + } + + let displayValue: React.ReactNode; + if (key === "expiryTime" && typeof value === "number") { + displayValue = new Date(value / 1000).toLocaleString(); + } else if ( + key === "creationTime" && + typeof value === "number" + ) { + displayValue = new Date(value / 1000).toLocaleString(); + } else if (key === "storage" && typeof value === "number") { + displayValue = `${(value / 1024 ** 3).toFixed(2)} GB`; + } else if (typeof value === "string") { + try { + const parsedValue = JSON.parse(value); + displayValue = parsedValue; + } catch (error) { + displayValue = value; + } + } else if (value === null) { + displayValue = "null"; + } else if (typeof value !== "undefined") { + displayValue = value.toString(); + } else { + displayValue = "undefined"; + } + + return ( + + + {key} + + + {displayValue} + + + ); + } + }); + + console.log("Attributes with null values:", nullAttributes); + + return rows; + }; + + return ( +
+

{S.hello}

+ + +
+ +
+
+ +
+
+ +
+ +
+ +
+
+ {error &&

{`Error: ${error}`}

} + {userData && ( + + + {Object.keys(userData).map((category) => ( + + + + + {renderAttributes(userData[category])} + + ))} + +
+ {category.toUpperCase()} +
+ )} +
- -
- -
-
- {error &&

{`Error: ${error}`}

} - {userData && ( - - - {Object.keys(userData).map((category) => ( - - - - - {renderAttributes(userData[category])} - - ))} - -
{category.toUpperCase()}
- )} - -
- ); + ); }; From 57629f26c063b8e107dab2479a23d88c1b876d54 Mon Sep 17 00:00:00 2001 From: atyabbin Date: Thu, 6 Jun 2024 15:17:00 +0530 Subject: [PATCH 3/4] Using ENV variables to pass the host --- infra/staff/src/App.tsx | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx index be158c418b2..e3961754474 100644 --- a/infra/staff/src/App.tsx +++ b/infra/staff/src/App.tsx @@ -2,7 +2,9 @@ import React, { useEffect, useState } from "react"; import S from "./utils/strings"; export const App: React.FC = () => { - const [serverUrl, setServerUrl] = useState(""); + const [serverUrl, setServerUrl] = useState( + import.meta.env.VITE_ENTE_ENDPOINT || "", + ); const [token, setToken] = useState(""); const [email, setEmail] = useState(""); const [userData, setUserData] = useState(null); @@ -13,6 +15,7 @@ export const App: React.FC = () => { if (storedToken) { setToken(storedToken); } + console.log(import.meta.env.VITE_ENTE_ENDPOINT); }, []); useEffect(() => { @@ -148,21 +151,6 @@ export const App: React.FC = () => {

{S.hello}

-
- -