t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
tsiry-sandratraina.com
1import styled from "@emotion/styled";
2import { PLACEMENT, ToasterContainer } from "baseui/toast";
3import { useEffect, useState } from "react";
4import { useLocation } from "react-router";
5import { API_URL } from "../consts";
6import useProfile from "../hooks/useProfile";
7import Navbar from "./Navbar";
8
9const Container = styled.div`
10 display: flex;
11 justify-content: center;
12 height: 100vh;
13 overflow-y: auto;
14 flex-direction: row;
15`;
16
17const Flex = styled.div`
18 display: flex;
19 max-width: 770px;
20 margin-top: 50px;
21 flex-direction: column;
22 margin-bottom: 200px;
23 height: 100vh;
24`;
25
26function Main({ children }: { children: React.ReactNode }) {
27 const { search } = useLocation();
28 const jwt = localStorage.getItem("token");
29 const [token, setToken] = useState<string | null>(null);
30
31 useEffect(() => {
32 const query = new URLSearchParams(search);
33 const did = query.get("did");
34
35 if (did && did !== "null") {
36 localStorage.setItem("did", did);
37
38 const fetchToken = async () => {
39 try {
40 const response = await fetch(`${API_URL}/token`, {
41 method: "GET",
42 headers: {
43 "session-did": did,
44 },
45 });
46 const data = await response.json();
47 localStorage.setItem("token", data.token);
48 setToken(data.token);
49
50 if (query.get("cli")) {
51 await fetch("http://localhost:6996/token", {
52 method: "POST",
53 headers: {
54 "Content-Type": "application/json",
55 },
56 body: JSON.stringify({ token: data.token }),
57 });
58 }
59
60 if (!jwt && data.token) {
61 window.location.href = "/";
62 }
63 } catch (e) {
64 console.error(e);
65 }
66 };
67 fetchToken();
68 }
69 }, [search]);
70
71 useProfile(token || localStorage.getItem("token"));
72
73 return (
74 <Container>
75 <ToasterContainer
76 placement={PLACEMENT.top}
77 overrides={{
78 ToastBody: {
79 style: {
80 zIndex: 2,
81 boxShadow: "none",
82 },
83 },
84 }}
85 />
86 <Flex>
87 <Navbar />
88 {children}
89 </Flex>
90 </Container>
91 );
92}
93
94export default Main;