import React, { useEffect, useState } from "react"; import Head from "next/head"; import CryptoLibCheck from "../components/CryptoLibCheck"; import Header from "../components/Header"; import Alert from "../components/Alert"; import ConfigurationSettings from "../components/ConfigurationSettings"; import Link from "next/link"; /** Import Context */ import { GlobalProvider, useGlobal } from "../contexts/Global"; import "../styles/globals.css"; import Auth from "./auth"; import Button from "../components/Button"; import { STATUS } from "../utils"; import { OrbisDBLogo } from "../components/Icons"; import ConfigurationPreset from "../components/ConfigurationPreset"; import TimeAgo from "javascript-time-ago"; import en from "javascript-time-ago/locale/en"; // Customize the locale en.long.minute = { current: "now", future: { one: "{0} min.", other: "{0} mins." }, past: { one: "{0} min. ago", other: "{0} mins. ago" }, }; TimeAgo.setDefaultLocale(en.locale); TimeAgo.addLocale(en); export default function App({ Component, pageProps }) { return ( OrbisDB Studio | Your Decentralized Database ); } function AppContent({ Component, pageProps }) { const { settings, settingsLoading, adminLoading, isAdmin, isConnected, isConfigured, isShared, } = useGlobal() as any; useEffect(() => { console.log("settings:", settings); }, [settings]); useEffect(() => { console.log("adminLoading:", adminLoading); }, [adminLoading]); useEffect(() => { console.log("isShared:", isShared); }, [isShared]); /** Admin details are loading */ if (adminLoading || settingsLoading) { return (

Loading settings...

); } // If instance is a shared instance and user hasn't selected a slot yet /*else if(isShared && !slot) { return(
) }*/ // User is not connected and instance is not configured else if (!isConfigured && !isConnected) { console.log("User is not connected and instance is not configured"); return (
); } // Admin is not connected and instance is configured else if (!isConnected && isShared) { return (
); } // Admin is not connected and instance is configured else if (!isConnected && isConfigured) { return (
); } // User is not connected and the instance is configured else if (!isConnected && !isAdmin && isConfigured) { return (
); } else if (!adminLoading && !isAdmin && isConfigured) { /** User is connected but not admin */ return (
); } else if (settings?.configuration?.admins && !isShared) { /** User has finalized configuration, render app */ return (
); } else if (!settings?.configuration && isShared) { return (
); } else { return (
); } } function PickSlot() { const { slots } = useGlobal() as any; return (

Slots

This is a shared instance with multiple slots assigned to different projects, pick the slot you want to use.

{slots && slots.length > 0 ? (
) : (
)}
{/**
); } const LoopSlots = ({ slots }) => { return slots.map((slot, key) => { return (
{slot.title}
); }); }; const ConfigurationSharedSetup = () => { const { isShared, adminSession, sessionJwt, setSettings } = useGlobal() as any; const [status, setStatus] = useState(STATUS.ACTIVE); const [presets, setPresets] = useState([]); async function configure() { setStatus(STATUS.LOADING); try { let rawResponse = await fetch("/api/setup/shared", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${sessionJwt}`, }, body: JSON.stringify({ presets: presets, }), }); const response = await rawResponse.json(); console.log("Configuration results:", response); if (rawResponse.status == 200) { setStatus(STATUS.SUCCESS); setSettings(response.updatedSettings); } } catch (e) { console.log("Error setup config:", e); } } return (

You are new here!

To get started, let's configure your personal OrbisDB instance by selecting the preset you want to use. Select none to start from scratch.

{/** If shared instance we display the user's did */} {isShared && ( {adminSession} )} {/** Display presets available */} Note: This will create your own slot in this OrbisDB instance which will give you the ability to write and query data from Ceramic easily. } />
); }; function ConfigurationSetup() { const { isShared, adminSession } = useGlobal() as any; return (

Welcome to OrbisDB

To get started, let's configure your OrbisDB instance.

); }