From fd8c568d7516da865eee945ed0f1181d5e2b5d0b Mon Sep 17 00:00:00 2001 From: caranicas Date: Sun, 18 Sep 2022 11:12:41 -0400 Subject: [PATCH] working beta --- ui/frontend/build_src/src/api/index.ts | 17 +++++ .../components/molecules/betaMode/index.tsx | 76 +++++++++++++++++++ .../creationPanel/advancedSettings/index.tsx | 7 ++ .../organisms/headerDisplay/index.tsx | 8 +- .../build_src/src/styles/recipes/index.css.ts | 24 ++++++ 5 files changed, 129 insertions(+), 3 deletions(-) create mode 100644 ui/frontend/build_src/src/components/molecules/betaMode/index.tsx diff --git a/ui/frontend/build_src/src/api/index.ts b/ui/frontend/build_src/src/api/index.ts index 5ab4d71a..f53fd737 100644 --- a/ui/frontend/build_src/src/api/index.ts +++ b/ui/frontend/build_src/src/api/index.ts @@ -31,6 +31,7 @@ export const getSaveDirectory = async () => { return data[0]; }; +export const KEY_CONFIG = "config"; export const getConfig = async () => { const response = await fetch(`${API_URL}/app_config`); console.log("getConfig response", response); @@ -38,6 +39,22 @@ export const getConfig = async () => { return data; }; +export const KEY_TOGGLE_CONFIG = "toggle_config"; +export const toggleBetaConfig = async (branch: string) => { + const response = await fetch(`${API_URL}/app_config`, { + method: "POST", + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + 'update_branch': branch + }) + + }); + const data = await response.json(); + return data; +}; + /** * post a new request for an image */ diff --git a/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx b/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx new file mode 100644 index 00000000..477a0f4f --- /dev/null +++ b/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx @@ -0,0 +1,76 @@ +import React, { useState, useEffect } from 'react'; +import { useQuery, useQueryClient } from '@tanstack/react-query'; + +import { + KEY_CONFIG, getConfig, + KEY_TOGGLE_CONFIG, toggleBetaConfig +} from '../../../api'; + + + + + +export default function BetaMode() { + + // gate for the toggle + const [shouldSetCofig, setShouldSetConfig] = useState(false); + // next branch to get + const [branchToGetNext, setBranchToGetNext] = useState("beta"); + + // our basic config + const { status: configStatus, data: configData } = useQuery([KEY_CONFIG], getConfig); + const queryClient = useQueryClient() + + // the toggle config + const { status: toggleStatus, data: toggleData } = useQuery([KEY_TOGGLE_CONFIG], () => toggleBetaConfig(branchToGetNext), { + enabled: shouldSetCofig, + }); + + + // this is also in the Header Display + // TODO: make this a custom hook + useEffect(() => { + + if (configStatus === 'success') { + + const { update_branch } = configData; + + if (update_branch === 'main') { + setBranchToGetNext('beta'); + } else { + // setIsBeta(true); + setBranchToGetNext('main'); + } + + } + }, [configStatus, configData]); + + + useEffect(() => { + if (toggleStatus === 'success') { + + if (toggleData[0] == 'OK') { + // force a refetch of the config + queryClient.invalidateQueries([KEY_CONFIG]) + } + setShouldSetConfig(false); + + } + }, [toggleStatus, toggleData, setShouldSetConfig]); + + + + return ( + + ); +} + diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx index 7c18ceec..6a4ce5e8 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx @@ -11,6 +11,8 @@ import PropertySettings from "./propertySettings"; import WorkflowSettings from "./workflowSettings"; import GpuSettings from "./gpuSettings"; +import BetaMode from "../../../molecules/betaMode"; + function SettingsList() { return ( ); } diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx index 13631a7a..933e0985 100644 --- a/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; import { useQuery } from "@tanstack/react-query"; -import { getConfig } from "../../../api"; +import { KEY_CONFIG, getConfig } from "../../../api"; import StatusDisplay from "./statusDisplay"; @@ -10,12 +10,14 @@ import { } from "./headerDisplay.css.ts"; export default function HeaderDisplay() { - // but this will be moved to the status display when it is created - const { status, data } = useQuery(["config"], getConfig); + + const { status, data } = useQuery([KEY_CONFIG], getConfig); const [version, setVersion] = useState("2.1.0"); const [release, setRelease] = useState(""); + // this is also in the Beta Mode + // TODO: make this a custom hook useEffect(() => { if (status === "success") { // TODO also pass down the actual version diff --git a/ui/frontend/build_src/src/styles/recipes/index.css.ts b/ui/frontend/build_src/src/styles/recipes/index.css.ts index e69de29b..1907d2db 100644 --- a/ui/frontend/build_src/src/styles/recipes/index.css.ts +++ b/ui/frontend/build_src/src/styles/recipes/index.css.ts @@ -0,0 +1,24 @@ +import { recipe } from '@vanilla-extract/recipes'; + + +export const button = recipe({ + variants: { + color: { + neutral: { background: 'whitesmoke' }, + brand: { background: 'blueviolet' }, + accent: { background: 'slateblue' } + }, + size: { + small: { padding: 12 }, + medium: { padding: 16 }, + large: { padding: 24 } + } + } +}); + + +// export const card = recipe({ +// variants: { +// color: { + +// alt: { background: 'whitesmoke' },