- {rootLoaderData?.ghToken ? (
+ {gitHubToken ? (
void;
@@ -19,22 +18,21 @@ export function Controls({
showSecurityLock,
lastCommitData,
}: ControlsProps) {
- const rootData = useRouteLoaderData("routes/_oh");
- const appData = useRouteLoaderData("routes/_oh.app");
+ const { gitHubToken } = useAuth();
+ const { selectedRepository } = useSelector(
+ (state: RootState) => state.initalQuery,
+ );
const projectMenuCardData = React.useMemo(
() =>
- rootData?.user &&
- !isGitHubErrorReponse(rootData.user) &&
- appData?.repo &&
- lastCommitData
+ selectedRepository && lastCommitData
? {
- avatar: rootData.user.avatar_url,
- repoName: appData.repo,
+ repoName: selectedRepository,
lastCommit: lastCommitData,
+ avatar: null, // TODO: fetch repo avatar
}
: null,
- [rootData, appData, lastCommitData],
+ [selectedRepository, lastCommitData],
);
return (
@@ -55,7 +53,7 @@ export function Controls({
-
-
)}
{isOpen && (
diff --git a/frontend/src/components/file-explorer/TreeNode.tsx b/frontend/src/components/file-explorer/TreeNode.tsx
index b3aa3c28335..d65eb07148a 100644
--- a/frontend/src/components/file-explorer/TreeNode.tsx
+++ b/frontend/src/components/file-explorer/TreeNode.tsx
@@ -1,12 +1,10 @@
import React from "react";
-import { useSelector } from "react-redux";
-import toast from "react-hot-toast";
-import { RootState } from "#/store";
import FolderIcon from "../FolderIcon";
import FileIcon from "../FileIcons";
-import OpenHands from "#/api/open-hands";
import { useFiles } from "#/context/files";
import { cn } from "#/utils/utils";
+import { useListFiles } from "#/hooks/query/use-list-files";
+import { useListFile } from "#/hooks/query/use-list-file";
interface TitleProps {
name: string;
@@ -44,51 +42,35 @@ function TreeNode({ path, defaultOpen = false }: TreeNodeProps) {
selectedPath,
} = useFiles();
const [isOpen, setIsOpen] = React.useState(defaultOpen);
- const [children, setChildren] = React.useState{error}
+{error.message}
- {children.map((child, index) => (
+ {paths.map((child, index) => (
diff --git a/frontend/src/components/form/settings-form.tsx b/frontend/src/components/form/settings-form.tsx
index 02a042e8a5c..ec235a2a780 100644
--- a/frontend/src/components/form/settings-form.tsx
+++ b/frontend/src/components/form/settings-form.tsx
@@ -4,19 +4,26 @@ import {
Input,
Switch,
} from "@nextui-org/react";
-import { useFetcher, useLocation, useNavigate } from "@remix-run/react";
+import { useLocation } from "@remix-run/react";
import { useTranslation } from "react-i18next";
import clsx from "clsx";
import React from "react";
+import posthog from "posthog-js";
import { organizeModelsAndProviders } from "#/utils/organizeModelsAndProviders";
import { ModelSelector } from "#/components/modals/settings/ModelSelector";
-import { Settings } from "#/services/settings";
+import { getDefaultSettings, Settings } from "#/services/settings";
import { ModalBackdrop } from "#/components/modals/modal-backdrop";
-import { clientAction } from "#/routes/settings";
import { extractModelAndProvider } from "#/utils/extractModelAndProvider";
import ModalButton from "../buttons/ModalButton";
import { DangerModal } from "../modals/confirmation-modals/danger-modal";
import { I18nKey } from "#/i18n/declaration";
+import {
+ extractSettings,
+ saveSettingsView,
+ updateSettingsVersion,
+} from "#/utils/settings-utils";
+import { useEndSession } from "#/hooks/use-end-session";
+import { useUserPrefs } from "#/context/user-prefs-context";
interface SettingsFormProps {
disabled?: boolean;
@@ -35,19 +42,36 @@ export function SettingsForm({
securityAnalyzers,
onClose,
}: SettingsFormProps) {
+ const { saveSettings } = useUserPrefs();
+ const endSession = useEndSession();
+
const location = useLocation();
- const navigate = useNavigate();
const { t } = useTranslation();
- const fetcher = useFetcher
-
@@ -267,9 +284,7 @@ export function SettingsForm({
aria-label="Agent"
data-testid="agent-input"
name="agent"
- defaultSelectedKey={
- fetcher.formData?.get("agent")?.toString() ?? settings.AGENT
- }
+ defaultSelectedKey={settings.AGENT}
isClearable={false}
inputProps={{
classNames: {
@@ -302,10 +317,7 @@ export function SettingsForm({
id="security-analyzer"
name="security-analyzer"
aria-label="Security Analyzer"
- defaultSelectedKey={
- fetcher.formData?.get("security-analyzer")?.toString() ??
- settings.SECURITY_ANALYZER
- }
+ defaultSelectedKey={settings.SECURITY_ANALYZER}
inputProps={{
classNames: {
inputWrapper:
@@ -346,7 +358,7 @@ export function SettingsForm({
diff --git a/frontend/src/components/github-repositories-suggestion-box.tsx b/frontend/src/components/github-repositories-suggestion-box.tsx
index 4886513dd48..b00a48c6574 100644
--- a/frontend/src/components/github-repositories-suggestion-box.tsx
+++ b/frontend/src/components/github-repositories-suggestion-box.tsx
@@ -1,8 +1,5 @@
import React from "react";
-import {
- isGitHubErrorReponse,
- retrieveAllGitHubUserRepositories,
-} from "#/api/github";
+import { isGitHubErrorReponse } from "#/api/github";
import { SuggestionBox } from "#/routes/_oh._index/suggestion-box";
import { ConnectToGitHubModal } from "./modals/connect-to-github-modal";
import { ModalBackdrop } from "./modals/modal-backdrop";
@@ -12,9 +9,7 @@ import GitHubLogo from "#/assets/branding/github-logo.svg?react";
interface GitHubRepositoriesSuggestionBoxProps {
handleSubmit: () => void;
- repositories: Awaited<
- ReturnType
- > | null;
+ repositories: GitHubRepository[];
gitHubAuthUrl: string | null;
user: GitHubErrorReponse | GitHubUser | null;
}
@@ -57,7 +52,7 @@ export function GitHubRepositoriesSuggestionBox({
isLoggedIn ? (
void;
@@ -28,41 +27,33 @@ function AccountSettingsModal({
gitHubError,
analyticsConsent,
}: AccountSettingsModalProps) {
+ const { gitHubToken, setGitHubToken, logout } = useAuth();
+ const { saveSettings } = useUserPrefs();
const { t } = useTranslation();
- const data = useRouteLoaderData("routes/_oh");
- const settingsFetcher = useFetcher({
- key: "settings",
- });
- const loginFetcher = useFetcher({ key: "login" });
const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
- const language = formData.get("language")?.toString();
+
const ghToken = formData.get("ghToken")?.toString();
+ const language = formData.get("language")?.toString();
const analytics = formData.get("analytics")?.toString() === "on";
- const accountForm = new FormData();
- const loginForm = new FormData();
+ if (ghToken) setGitHubToken(ghToken);
- accountForm.append("intent", "account");
+ // The form returns the language label, so we need to find the corresponding
+ // language key to save it in the settings
if (language) {
const languageKey = AvailableLanguages.find(
({ label }) => label === language,
)?.value;
- accountForm.append("language", languageKey ?? "en");
+
+ if (languageKey) saveSettings({ LANGUAGE: languageKey });
}
- if (ghToken) loginForm.append("ghToken", ghToken);
- accountForm.append("analytics", analytics.toString());
- settingsFetcher.submit(accountForm, {
- method: "POST",
- action: "/settings",
- });
- loginFetcher.submit(loginForm, {
- method: "POST",
- action: "/login",
- });
+ handleCaptureConsent(analytics);
+ const ANALYTICS = analytics.toString();
+ localStorage.setItem("analytics-consent", ANALYTICS);
onClose();
};
@@ -88,7 +79,7 @@ function AccountSettingsModal({
name="ghToken"
label="GitHub Token"
type="password"
- defaultValue={data?.ghToken ?? ""}
+ defaultValue={gitHubToken ?? ""}
/>
{t(I18nKey.CONNECT_TO_GITHUB_MODAL$GET_YOUR_TOKEN)}{" "}
@@ -106,15 +97,12 @@ function AccountSettingsModal({
{t(I18nKey.ACCOUNT_SETTINGS_MODAL$GITHUB_TOKEN_INVALID)}
)}
- {data?.ghToken && !gitHubError && (
+ {gitHubToken && !gitHubError && (
{
- settingsFetcher.submit(
- {},
- { method: "POST", action: "/logout" },
- );
+ logout();
onClose();
}}
className="text-danger self-start"
@@ -133,10 +121,6 @@ function AccountSettingsModal({
- ("routes/_oh");
- const fetcher = useFetcher({ key: "login" });
+ const { gitHubToken, setGitHubToken } = useAuth();
const { t } = useTranslation();
+ const handleSubmit = (event: React.FormEvent) => {
+ event.preventDefault();
+ const formData = new FormData(event.currentTarget);
+ const ghToken = formData.get("ghToken")?.toString();
+
+ if (ghToken) setGitHubToken(ghToken);
+ onClose();
+ };
+
return (
+
+
);
}
diff --git a/frontend/src/components/project-menu/ProjectMenuCard.tsx b/frontend/src/components/project-menu/ProjectMenuCard.tsx
index 1a32c2f802d..a840732cea0 100644
--- a/frontend/src/components/project-menu/ProjectMenuCard.tsx
+++ b/frontend/src/components/project-menu/ProjectMenuCard.tsx
@@ -17,7 +17,7 @@ import { useWsClient } from "#/context/ws-client-provider";
interface ProjectMenuCardProps {
isConnectedToGitHub: boolean;
githubData: {
- avatar: string;
+ avatar: string | null;
repoName: string;
lastCommit: GitHubCommit;
} | null;
diff --git a/frontend/src/components/project-menu/project-menu-details.tsx b/frontend/src/components/project-menu/project-menu-details.tsx
index 6b5382a4368..8bb67a2ec8b 100644
--- a/frontend/src/components/project-menu/project-menu-details.tsx
+++ b/frontend/src/components/project-menu/project-menu-details.tsx
@@ -5,7 +5,7 @@ import { I18nKey } from "#/i18n/declaration";
interface ProjectMenuDetailsProps {
repoName: string;
- avatar: string;
+ avatar: string | null;
lastCommit: GitHubCommit;
}
@@ -23,7 +23,7 @@ export function ProjectMenuDetails({
rel="noreferrer noopener"
className="flex items-center gap-2"
>
- 
+ {avatar && }
{repoName}
-
-
-
- );
-}
-
-export default ConnectToGitHubByTokenModal;
diff --git a/frontend/src/components/modals/connect-to-github-modal.tsx b/frontend/src/components/modals/connect-to-github-modal.tsx
index 19cc4ac36ff..bd0e6b764be 100644
--- a/frontend/src/components/modals/connect-to-github-modal.tsx
+++ b/frontend/src/components/modals/connect-to-github-modal.tsx
@@ -1,4 +1,3 @@
-import { useFetcher, useRouteLoaderData } from "@remix-run/react";
import { useTranslation } from "react-i18next";
import ModalBody from "./ModalBody";
import { CustomInput } from "../form/custom-input";
@@ -7,19 +6,26 @@ import {
BaseModalDescription,
BaseModalTitle,
} from "./confirmation-modals/BaseModal";
-import { clientLoader } from "#/routes/_oh";
-import { clientAction } from "#/routes/login";
import { I18nKey } from "#/i18n/declaration";
+import { useAuth } from "#/context/auth-context";
interface ConnectToGitHubModalProps {
onClose: () => void;
}
export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) {
- const data = useRouteLoaderData
@@ -40,18 +46,13 @@ export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) {
}
/>
-
- void;
+ setGitHubToken: (token: string | null) => void;
+ clearToken: () => void;
+ clearGitHubToken: () => void;
+ logout: () => void;
+}
+
+const AuthContext = React.createContext(undefined);
+
+function AuthProvider({ children }: React.PropsWithChildren) {
+ const [tokenState, setTokenState] = React.useState(() =>
+ localStorage.getItem("token"),
+ );
+ const [gitHubTokenState, setGitHubTokenState] = React.useState(
+ () => localStorage.getItem("ghToken"),
+ );
+
+ React.useLayoutEffect(() => {
+ setTokenState(localStorage.getItem("token"));
+ setGitHubTokenState(localStorage.getItem("ghToken"));
+ });
+
+ const setToken = (token: string | null) => {
+ setTokenState(token);
+
+ if (token) localStorage.setItem("token", token);
+ else localStorage.removeItem("token");
+ };
+
+ const setGitHubToken = (token: string | null) => {
+ setGitHubTokenState(token);
+
+ if (token) localStorage.setItem("ghToken", token);
+ else localStorage.removeItem("ghToken");
+ };
+
+ const clearToken = () => {
+ setTokenState(null);
+ localStorage.removeItem("token");
+ };
+
+ const clearGitHubToken = () => {
+ setGitHubTokenState(null);
+ localStorage.removeItem("ghToken");
+ };
+
+ const logout = () => {
+ clearGitHubToken();
+ posthog.reset();
+ };
+
+ const value = React.useMemo(
+ () => ({
+ token: tokenState,
+ gitHubToken: gitHubTokenState,
+ setToken,
+ setGitHubToken,
+ clearToken,
+ clearGitHubToken,
+ logout,
+ }),
+ [tokenState, gitHubTokenState],
+ );
+
+ return {children} ;
+}
+
+function useAuth() {
+ const context = React.useContext(AuthContext);
+ if (context === undefined) {
+ throw new Error("useAuth must be used within a AuthProvider");
+ }
+ return context;
+}
+
+export { AuthProvider, useAuth };
diff --git a/frontend/src/context/user-prefs-context.tsx b/frontend/src/context/user-prefs-context.tsx
new file mode 100644
index 00000000000..e3573c9234c
--- /dev/null
+++ b/frontend/src/context/user-prefs-context.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import {
+ getSettings,
+ Settings,
+ saveSettings as updateAndSaveSettingsToLocalStorage,
+ settingsAreUpToDate as checkIfSettingsAreUpToDate,
+} from "#/services/settings";
+
+interface UserPrefsContextType {
+ settings: Settings;
+ settingsAreUpToDate: boolean;
+ saveSettings: (settings: Partial) => void;
+}
+
+const UserPrefsContext = React.createContext(
+ undefined,
+);
+
+function UserPrefsProvider({ children }: React.PropsWithChildren) {
+ const [settings, setSettings] = React.useState(getSettings());
+ const [settingsAreUpToDate, setSettingsAreUpToDate] = React.useState(
+ checkIfSettingsAreUpToDate(),
+ );
+
+ const saveSettings = (newSettings: Partial) => {
+ updateAndSaveSettingsToLocalStorage(newSettings);
+ setSettings(getSettings());
+ setSettingsAreUpToDate(checkIfSettingsAreUpToDate());
+ };
+
+ const value = React.useMemo(
+ () => ({
+ settings,
+ settingsAreUpToDate,
+ saveSettings,
+ }),
+ [settings, settingsAreUpToDate],
+ );
+
+ return (
+
+ {children}
+
+ );
+}
+
+function useUserPrefs() {
+ const context = React.useContext(UserPrefsContext);
+ if (context === undefined) {
+ throw new Error("useUserPrefs must be used within a UserPrefsProvider");
+ }
+ return context;
+}
+
+export { UserPrefsProvider, useUserPrefs };
diff --git a/frontend/src/entry.client.tsx b/frontend/src/entry.client.tsx
index cb8f3d16f0a..875daf565d4 100644
--- a/frontend/src/entry.client.tsx
+++ b/frontend/src/entry.client.tsx
@@ -11,26 +11,23 @@ import { hydrateRoot } from "react-dom/client";
import { Provider } from "react-redux";
import posthog from "posthog-js";
import "./i18n";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import store from "./store";
-import OpenHands from "./api/open-hands";
+import { useConfig } from "./hooks/query/use-config";
+import { AuthProvider } from "./context/auth-context";
+import { UserPrefsProvider } from "./context/user-prefs-context";
function PosthogInit() {
- const [key, setKey] = React.useState(null);
+ const { data: config } = useConfig();
React.useEffect(() => {
- OpenHands.getConfig().then((config) => {
- setKey(config.POSTHOG_CLIENT_KEY);
- });
- }, []);
-
- React.useEffect(() => {
- if (key) {
- posthog.init(key, {
+ if (config?.POSTHOG_CLIENT_KEY) {
+ posthog.init(config.POSTHOG_CLIENT_KEY, {
api_host: "https://us.i.posthog.com",
person_profiles: "identified_only",
});
}
- }, [key]);
+ }, [config]);
return null;
}
@@ -48,14 +45,22 @@ async function prepareApp() {
}
}
+const queryClient = new QueryClient();
+
prepareApp().then(() =>
startTransition(() => {
hydrateRoot(
document,
-
+
+
+
+
+
,
);
diff --git a/frontend/src/hooks/mutation/use-save-file.ts b/frontend/src/hooks/mutation/use-save-file.ts
new file mode 100644
index 00000000000..30edcda21a1
--- /dev/null
+++ b/frontend/src/hooks/mutation/use-save-file.ts
@@ -0,0 +1,21 @@
+import { useMutation } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import OpenHands from "#/api/open-hands";
+import { useAuth } from "#/context/auth-context";
+
+type SaveFileArgs = {
+ path: string;
+ content: string;
+};
+
+export const useSaveFile = () => {
+ const { token } = useAuth();
+
+ return useMutation({
+ mutationFn: ({ path, content }: SaveFileArgs) =>
+ OpenHands.saveFile(token || "", path, content),
+ onError: (error) => {
+ toast.error(error.message);
+ },
+ });
+};
diff --git a/frontend/src/hooks/mutation/use-submit-feedback.ts b/frontend/src/hooks/mutation/use-submit-feedback.ts
new file mode 100644
index 00000000000..0253b69d559
--- /dev/null
+++ b/frontend/src/hooks/mutation/use-submit-feedback.ts
@@ -0,0 +1,21 @@
+import { useMutation } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { Feedback } from "#/api/open-hands.types";
+import OpenHands from "#/api/open-hands";
+import { useAuth } from "#/context/auth-context";
+
+type SubmitFeedbackArgs = {
+ feedback: Feedback;
+};
+
+export const useSubmitFeedback = () => {
+ const { token } = useAuth();
+
+ return useMutation({
+ mutationFn: ({ feedback }: SubmitFeedbackArgs) =>
+ OpenHands.submitFeedback(token || "", feedback),
+ onError: (error) => {
+ toast.error(error.message);
+ },
+ });
+};
diff --git a/frontend/src/hooks/mutation/use-upload-files.ts b/frontend/src/hooks/mutation/use-upload-files.ts
new file mode 100644
index 00000000000..0f7a31ed381
--- /dev/null
+++ b/frontend/src/hooks/mutation/use-upload-files.ts
@@ -0,0 +1,16 @@
+import { useMutation } from "@tanstack/react-query";
+import OpenHands from "#/api/open-hands";
+import { useAuth } from "#/context/auth-context";
+
+type UploadFilesArgs = {
+ files: File[];
+};
+
+export const useUploadFiles = () => {
+ const { token } = useAuth();
+
+ return useMutation({
+ mutationFn: ({ files }: UploadFilesArgs) =>
+ OpenHands.uploadFiles(token || "", files),
+ });
+};
diff --git a/frontend/src/hooks/query/use-ai-config-options.ts b/frontend/src/hooks/query/use-ai-config-options.ts
new file mode 100644
index 00000000000..9e63cf6a827
--- /dev/null
+++ b/frontend/src/hooks/query/use-ai-config-options.ts
@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import OpenHands from "#/api/open-hands";
+
+const fetchAiConfigOptions = async () => ({
+ models: await OpenHands.getModels(),
+ agents: await OpenHands.getAgents(),
+ securityAnalyzers: await OpenHands.getSecurityAnalyzers(),
+});
+
+export const useAIConfigOptions = () =>
+ useQuery({
+ queryKey: ["ai-config-options"],
+ queryFn: fetchAiConfigOptions,
+ });
diff --git a/frontend/src/hooks/query/use-config.ts b/frontend/src/hooks/query/use-config.ts
new file mode 100644
index 00000000000..8b81af13b53
--- /dev/null
+++ b/frontend/src/hooks/query/use-config.ts
@@ -0,0 +1,8 @@
+import { useQuery } from "@tanstack/react-query";
+import OpenHands from "#/api/open-hands";
+
+export const useConfig = () =>
+ useQuery({
+ queryKey: ["config"],
+ queryFn: OpenHands.getConfig,
+ });
diff --git a/frontend/src/hooks/query/use-github-user.ts b/frontend/src/hooks/query/use-github-user.ts
new file mode 100644
index 00000000000..ac0de4acce6
--- /dev/null
+++ b/frontend/src/hooks/query/use-github-user.ts
@@ -0,0 +1,40 @@
+import { useQuery } from "@tanstack/react-query";
+import React from "react";
+import posthog from "posthog-js";
+import { retrieveGitHubUser, isGitHubErrorReponse } from "#/api/github";
+import { useAuth } from "#/context/auth-context";
+import { useConfig } from "./use-config";
+
+export const useGitHubUser = () => {
+ const { gitHubToken } = useAuth();
+ const { data: config } = useConfig();
+
+ const user = useQuery({
+ queryKey: ["user", gitHubToken],
+ queryFn: async () => {
+ const data = await retrieveGitHubUser(gitHubToken!);
+
+ if (isGitHubErrorReponse(data)) {
+ throw new Error("Failed to retrieve user data");
+ }
+
+ return data;
+ },
+ enabled: !!gitHubToken && !!config?.APP_MODE,
+ retry: false,
+ });
+
+ React.useEffect(() => {
+ if (user.data) {
+ posthog.identify(user.data.login, {
+ company: user.data.company,
+ name: user.data.name,
+ email: user.data.email,
+ user: user.data.login,
+ mode: config?.APP_MODE || "oss",
+ });
+ }
+ }, [user.data]);
+
+ return user;
+};
diff --git a/frontend/src/hooks/query/use-is-authed.ts b/frontend/src/hooks/query/use-is-authed.ts
new file mode 100644
index 00000000000..9f6971b754b
--- /dev/null
+++ b/frontend/src/hooks/query/use-is-authed.ts
@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import React from "react";
+import OpenHands from "#/api/open-hands";
+import { useConfig } from "./use-config";
+import { useAuth } from "#/context/auth-context";
+
+export const useIsAuthed = () => {
+ const { gitHubToken } = useAuth();
+ const { data: config } = useConfig();
+
+ const appMode = React.useMemo(() => config?.APP_MODE, [config]);
+
+ return useQuery({
+ queryKey: ["user", "authenticated", gitHubToken, appMode],
+ queryFn: () => OpenHands.authenticate(gitHubToken || "", appMode!),
+ enabled: !!appMode,
+ staleTime: 1000 * 60 * 5, // 5 minutes
+ });
+};
diff --git a/frontend/src/hooks/query/use-latest-repo-commit.ts b/frontend/src/hooks/query/use-latest-repo-commit.ts
new file mode 100644
index 00000000000..3ead53c6c57
--- /dev/null
+++ b/frontend/src/hooks/query/use-latest-repo-commit.ts
@@ -0,0 +1,28 @@
+import { useQuery } from "@tanstack/react-query";
+import { retrieveLatestGitHubCommit, isGitHubErrorReponse } from "#/api/github";
+import { useAuth } from "#/context/auth-context";
+
+interface UseLatestRepoCommitConfig {
+ repository: string | null;
+}
+
+export const useLatestRepoCommit = (config: UseLatestRepoCommitConfig) => {
+ const { gitHubToken } = useAuth();
+
+ return useQuery({
+ queryKey: ["latest_commit", gitHubToken, config.repository],
+ queryFn: async () => {
+ const data = await retrieveLatestGitHubCommit(
+ gitHubToken!,
+ config.repository!,
+ );
+
+ if (isGitHubErrorReponse(data)) {
+ throw new Error("Failed to retrieve latest commit");
+ }
+
+ return data[0];
+ },
+ enabled: !!gitHubToken && !!config.repository,
+ });
+};
diff --git a/frontend/src/hooks/query/use-list-file.ts b/frontend/src/hooks/query/use-list-file.ts
new file mode 100644
index 00000000000..074bf6b7296
--- /dev/null
+++ b/frontend/src/hooks/query/use-list-file.ts
@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import OpenHands from "#/api/open-hands";
+import { useAuth } from "#/context/auth-context";
+
+interface UseListFileConfig {
+ path: string;
+}
+
+export const useListFile = (config: UseListFileConfig) => {
+ const { token } = useAuth();
+
+ return useQuery({
+ queryKey: ["file", token, config.path],
+ queryFn: () => OpenHands.getFile(token || "", config.path),
+ enabled: false, // don't fetch by default, trigger manually via `refetch`
+ });
+};
diff --git a/frontend/src/hooks/query/use-list-files.ts b/frontend/src/hooks/query/use-list-files.ts
new file mode 100644
index 00000000000..7baa395fd7b
--- /dev/null
+++ b/frontend/src/hooks/query/use-list-files.ts
@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+ useWsClient,
+ WsClientProviderStatus,
+} from "#/context/ws-client-provider";
+import OpenHands from "#/api/open-hands";
+import { useAuth } from "#/context/auth-context";
+
+interface UseListFilesConfig {
+ path?: string;
+ enabled?: boolean;
+}
+
+export const useListFiles = (config?: UseListFilesConfig) => {
+ const { token } = useAuth();
+ const { status } = useWsClient();
+ const isActive = status === WsClientProviderStatus.ACTIVE;
+
+ return useQuery({
+ queryKey: ["files", token, config?.path],
+ queryFn: () => OpenHands.getFiles(token!, config?.path),
+ enabled: isActive && config?.enabled && !!token,
+ });
+};
diff --git a/frontend/src/hooks/query/use-user-repositories.ts b/frontend/src/hooks/query/use-user-repositories.ts
new file mode 100644
index 00000000000..8b97d6bcd7d
--- /dev/null
+++ b/frontend/src/hooks/query/use-user-repositories.ts
@@ -0,0 +1,63 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import React from "react";
+import {
+ isGitHubErrorReponse,
+ retrieveGitHubUserRepositories,
+} from "#/api/github";
+import { extractNextPageFromLink } from "#/utils/extract-next-page-from-link";
+import { useAuth } from "#/context/auth-context";
+
+interface UserRepositoriesQueryFnProps {
+ pageParam: number;
+ ghToken: string;
+}
+
+const userRepositoriesQueryFn = async ({
+ pageParam,
+ ghToken,
+}: UserRepositoriesQueryFnProps) => {
+ const response = await retrieveGitHubUserRepositories(
+ ghToken,
+ pageParam,
+ 100,
+ );
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch repositories");
+ }
+
+ const data = (await response.json()) as GitHubRepository | GitHubErrorReponse;
+
+ if (isGitHubErrorReponse(data)) {
+ throw new Error(data.message);
+ }
+
+ const link = response.headers.get("link") ?? "";
+ const nextPage = extractNextPageFromLink(link);
+
+ return { data, nextPage };
+};
+
+export const useUserRepositories = () => {
+ const { gitHubToken } = useAuth();
+
+ const repos = useInfiniteQuery({
+ queryKey: ["repositories", gitHubToken],
+ queryFn: async ({ pageParam }) =>
+ userRepositoriesQueryFn({ pageParam, ghToken: gitHubToken! }),
+ initialPageParam: 1,
+ getNextPageParam: (lastPage) => lastPage.nextPage,
+ enabled: !!gitHubToken,
+ });
+
+ // TODO: Once we create our custom dropdown component, we should fetch data onEndReached
+ // (nextui autocomplete doesn't support onEndReached nor is it compatible for extending)
+ const { isSuccess, isFetchingNextPage, hasNextPage, fetchNextPage } = repos;
+ React.useEffect(() => {
+ if (!isFetchingNextPage && isSuccess && hasNextPage) {
+ fetchNextPage();
+ }
+ }, [isFetchingNextPage, isSuccess, hasNextPage, fetchNextPage]);
+
+ return repos;
+};
diff --git a/frontend/src/hooks/use-end-session.ts b/frontend/src/hooks/use-end-session.ts
new file mode 100644
index 00000000000..602bcfa6779
--- /dev/null
+++ b/frontend/src/hooks/use-end-session.ts
@@ -0,0 +1,31 @@
+import { useDispatch } from "react-redux";
+import { useNavigate } from "@remix-run/react";
+import { useAuth } from "#/context/auth-context";
+import {
+ initialState as browserInitialState,
+ setScreenshotSrc,
+ setUrl,
+} from "#/state/browserSlice";
+import { clearSelectedRepository } from "#/state/initial-query-slice";
+
+export const useEndSession = () => {
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const { clearToken } = useAuth();
+
+ /**
+ * End the current session by clearing the token and redirecting to the home page.
+ */
+ const endSession = () => {
+ clearToken();
+ dispatch(clearSelectedRepository());
+
+ // Reset browser state to initial values
+ dispatch(setUrl(browserInitialState.url));
+ dispatch(setScreenshotSrc(browserInitialState.screenshotSrc));
+
+ navigate("/");
+ };
+
+ return endSession;
+};
diff --git a/frontend/src/hooks/use-github-auth-url.ts b/frontend/src/hooks/use-github-auth-url.ts
new file mode 100644
index 00000000000..e9d493764c0
--- /dev/null
+++ b/frontend/src/hooks/use-github-auth-url.ts
@@ -0,0 +1,20 @@
+import React from "react";
+import { generateGitHubAuthUrl } from "#/utils/generate-github-auth-url";
+import { GetConfigResponse } from "#/api/open-hands.types";
+
+interface UseGitHubAuthUrlConfig {
+ gitHubToken: string | null;
+ appMode: GetConfigResponse["APP_MODE"] | null;
+ gitHubClientId: GetConfigResponse["GITHUB_CLIENT_ID"] | null;
+}
+
+export const useGitHubAuthUrl = (config: UseGitHubAuthUrlConfig) =>
+ React.useMemo(() => {
+ if (config.appMode === "saas" && !config.gitHubToken)
+ return generateGitHubAuthUrl(
+ config.gitHubClientId || "",
+ new URL(window.location.href),
+ );
+
+ return null;
+ }, [config.gitHubToken, config.appMode, config.gitHubClientId]);
diff --git a/frontend/src/routes/_oh._index/route.tsx b/frontend/src/routes/_oh._index/route.tsx
index d73ee7fd455..10e47ba0f57 100644
--- a/frontend/src/routes/_oh._index/route.tsx
+++ b/frontend/src/routes/_oh._index/route.tsx
@@ -1,81 +1,40 @@
-import {
- Await,
- ClientActionFunctionArgs,
- ClientLoaderFunctionArgs,
- defer,
- redirect,
- useLoaderData,
- useRouteLoaderData,
-} from "@remix-run/react";
+import { useLocation, useNavigate } from "@remix-run/react";
import React from "react";
import { useDispatch } from "react-redux";
-import posthog from "posthog-js";
import { SuggestionBox } from "./suggestion-box";
import { TaskForm } from "./task-form";
import { HeroHeading } from "./hero-heading";
-import { retrieveAllGitHubUserRepositories } from "#/api/github";
-import store from "#/store";
-import {
- setImportedProjectZip,
- setInitialQuery,
-} from "#/state/initial-query-slice";
-import { clientLoader as rootClientLoader } from "#/routes/_oh";
-import OpenHands from "#/api/open-hands";
-import { generateGitHubAuthUrl } from "#/utils/generate-github-auth-url";
+import { setImportedProjectZip } from "#/state/initial-query-slice";
import { GitHubRepositoriesSuggestionBox } from "#/components/github-repositories-suggestion-box";
import { convertZipToBase64 } from "#/utils/convert-zip-to-base64";
+import { useUserRepositories } from "#/hooks/query/use-user-repositories";
+import { useGitHubUser } from "#/hooks/query/use-github-user";
+import { useGitHubAuthUrl } from "#/hooks/use-github-auth-url";
+import { useConfig } from "#/hooks/query/use-config";
+import { useAuth } from "#/context/auth-context";
-export const clientLoader = async ({ request }: ClientLoaderFunctionArgs) => {
- let isSaas = false;
- let githubClientId: string | null = null;
-
- try {
- const config = await OpenHands.getConfig();
- isSaas = config.APP_MODE === "saas";
- githubClientId = config.GITHUB_CLIENT_ID;
- } catch (error) {
- isSaas = false;
- githubClientId = null;
- }
-
- const ghToken = localStorage.getItem("ghToken");
- const token = localStorage.getItem("token");
- if (token) return redirect("/app");
-
- let repositories: ReturnType<
- typeof retrieveAllGitHubUserRepositories
- > | null = null;
- if (ghToken) {
- const data = retrieveAllGitHubUserRepositories(ghToken);
- repositories = data;
- }
+function Home() {
+ const { token, gitHubToken } = useAuth();
- let githubAuthUrl: string | null = null;
- if (isSaas && githubClientId) {
- const requestUrl = new URL(request.url);
- githubAuthUrl = generateGitHubAuthUrl(githubClientId, requestUrl);
- }
+ const dispatch = useDispatch();
+ const location = useLocation();
+ const navigate = useNavigate();
- return defer({ repositories, githubAuthUrl });
-};
+ const formRef = React.useRef(null);
-export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
- const formData = await request.formData();
- const q = formData.get("q")?.toString();
- if (q) store.dispatch(setInitialQuery(q));
+ const { data: config } = useConfig();
+ const { data: user } = useGitHubUser();
+ const { data: repositories } = useUserRepositories();
- posthog.capture("initial_query_submitted", {
- query_character_length: q?.length,
+ const gitHubAuthUrl = useGitHubAuthUrl({
+ gitHubToken,
+ appMode: config?.APP_MODE || null,
+ gitHubClientId: config?.GITHUB_CLIENT_ID || null,
});
- return redirect("/app");
-};
-
-function Home() {
- const dispatch = useDispatch();
- const rootData = useRouteLoaderData("routes/_oh");
- const { repositories, githubAuthUrl } = useLoaderData();
- const formRef = React.useRef(null);
+ React.useEffect(() => {
+ if (token) navigate("/app");
+ }, [location.pathname]);
return (
- formRef.current?.requestSubmit()}
+ repositories={
+ repositories?.pages.flatMap((page) => page.data) || []
}
- >
-
- {(resolvedRepositories) => (
- formRef.current?.requestSubmit()}
- repositories={resolvedRepositories}
- gitHubAuthUrl={githubAuthUrl}
- user={rootData?.user || null}
- />
- )}
-
-
+ gitHubAuthUrl={gitHubAuthUrl}
+ user={user || null}
+ // onEndReached={}
+ />
((_, ref) => {
const dispatch = useDispatch();
const navigation = useNavigation();
+ const navigate = useNavigate();
const { selectedRepository, files } = useSelector(
(state: RootState) => state.initalQuery,
@@ -51,13 +57,26 @@ export const TaskForm = React.forwardRef((_, ref) => {
return "What do you want to build?";
}, [selectedRepository]);
+ const handleSubmit = (event: React.FormEvent) => {
+ event.preventDefault();
+ const formData = new FormData(event.currentTarget);
+
+ const q = formData.get("q")?.toString();
+ if (q) dispatch(setInitialQuery(q));
+
+ posthog.capture("initial_query_submitted", {
+ query_character_length: q?.length,
+ });
+
+ navigate("/app");
+ };
+
return (
{
const promises = uploadedFiles.map(convertImageToBase64);
diff --git a/frontend/src/routes/_oh.app._index/code-editor-component.tsx b/frontend/src/routes/_oh.app._index/code-editor-component.tsx
index b9f82befa43..673010b8b1d 100644
--- a/frontend/src/routes/_oh.app._index/code-editor-component.tsx
+++ b/frontend/src/routes/_oh.app._index/code-editor-component.tsx
@@ -2,10 +2,9 @@ import { Editor, EditorProps } from "@monaco-editor/react";
import React from "react";
import { useTranslation } from "react-i18next";
import { VscCode } from "react-icons/vsc";
-import toast from "react-hot-toast";
import { I18nKey } from "#/i18n/declaration";
import { useFiles } from "#/context/files";
-import OpenHands from "#/api/open-hands";
+import { useSaveFile } from "#/hooks/mutation/use-save-file";
interface CodeEditorComponentProps {
onMount: EditorProps["onMount"];
@@ -25,6 +24,8 @@ function CodeEditorComponent({
saveFileContent: saveNewFileContent,
} = useFiles();
+ const { mutate: saveFile } = useSaveFile();
+
const handleEditorChange = (value: string | undefined) => {
if (selectedPath && value) modifyFileContent(selectedPath, value);
};
@@ -39,11 +40,7 @@ function CodeEditorComponent({
const content = saveNewFileContent(selectedPath);
if (content) {
- try {
- await OpenHands.saveFile(selectedPath, content);
- } catch (error) {
- toast.error("Failed to save file");
- }
+ saveFile({ path: selectedPath, content });
}
}
};
@@ -66,34 +63,42 @@ function CodeEditorComponent({
);
}
- const fileContent = modifiedFiles[selectedPath] || files[selectedPath];
+ const fileContent: string | undefined =
+ modifiedFiles[selectedPath] || files[selectedPath];
- if (isBase64Image(fileContent)) {
- return (
-
- 
-
- );
- }
+ if (fileContent) {
+ if (isBase64Image(fileContent)) {
+ return (
+
+
+
+ );
+ }
- if (isPDF(fileContent)) {
- return (
-
- );
- }
+ if (isPDF(fileContent)) {
+ return (
+
+ );
+ }
- if (isVideo(fileContent)) {
- return (
-
- );
+ if (isVideo(fileContent)) {
+ return (
+
+ );
+ }
}
+
return (
{
- const token = localStorage.getItem("token");
- return json({ token });
-};
-
export function ErrorBoundary() {
const error = useRouteError();
@@ -41,17 +35,18 @@ export function ErrorBoundary() {
}
function CodeEditor() {
- const { curAgentState } = useSelector((state: RootState) => state.agent);
const {
- setPaths,
selectedPath,
modifiedFiles,
saveFileContent: saveNewFileContent,
discardChanges,
} = useFiles();
+
const [fileExplorerIsOpen, setFileExplorerIsOpen] = React.useState(true);
const editorRef = React.useRef(null);
+ const { mutate: saveFile } = useSaveFile();
+
const toggleFileExplorer = () => {
setFileExplorerIsOpen((prev) => !prev);
editorRef.current?.layout({ width: 0, height: 0 });
@@ -71,24 +66,10 @@ function CodeEditor() {
monaco.editor.setTheme("oh-dark");
};
- const [errors, setErrors] = React.useState<{ getFiles: string | null }>({
- getFiles: null,
- });
-
const agentState = useSelector(
(state: RootState) => state.agent.curAgentState,
);
- React.useEffect(() => {
- if (curAgentState === AgentState.INIT) {
- OpenHands.getFiles()
- .then(setPaths)
- .catch(() => {
- setErrors({ getFiles: "Failed to retrieve files" });
- });
- }
- }, [curAgentState]);
-
// Code editing is only allowed when the agent is paused, finished, or awaiting user input (server rules)
const isEditingAllowed = React.useMemo(
() =>
@@ -102,12 +83,8 @@ function CodeEditor() {
if (selectedPath) {
const content = modifiedFiles[selectedPath];
if (content) {
- try {
- await OpenHands.saveFile(selectedPath, content);
- saveNewFileContent(selectedPath);
- } catch (error) {
- toast.error("Failed to save file");
- }
+ saveFile({ path: selectedPath, content });
+ saveNewFileContent(selectedPath);
}
}
};
@@ -122,11 +99,7 @@ function CodeEditor() {
return (
-
-
+
-
{selectedPath && !isAssetFileType && (
{
- try {
- const config = await OpenHands.getConfig();
- window.__APP_MODE__ = config.APP_MODE;
- window.__GITHUB_CLIENT_ID__ = config.GITHUB_CLIENT_ID;
- } catch (error) {
- window.__APP_MODE__ = "oss";
- window.__GITHUB_CLIENT_ID__ = null;
- }
-
- let token = localStorage.getItem("token");
- const ghToken = localStorage.getItem("ghToken");
- const analyticsConsent = localStorage.getItem("analytics-consent");
- const userConsents = analyticsConsent === "true";
-
- if (!userConsents) {
- posthog.opt_out_capturing();
- } else if (userConsents && !posthog.has_opted_in_capturing()) {
- posthog.opt_in_capturing();
- }
-
- let isAuthed = false;
- let githubAuthUrl: string | null = null;
- let user: GitHubUser | GitHubErrorReponse | null = null;
- try {
- isAuthed = await userIsAuthenticated();
- if (!isAuthed && window.__GITHUB_CLIENT_ID__) {
- const requestUrl = new URL(request.url);
- githubAuthUrl = generateGitHubAuthUrl(
- window.__GITHUB_CLIENT_ID__,
- requestUrl,
- );
- }
- } catch (error) {
- isAuthed = false;
- githubAuthUrl = null;
- }
-
- if (ghToken) user = await retrieveGitHubUser(ghToken);
-
- const settings = getSettings();
- await i18n.changeLanguage(settings.LANGUAGE);
-
- const settingsIsUpdated = settingsAreUpToDate();
- if (!settingsIsUpdated) {
- localStorage.removeItem("token");
- token = null;
- }
-
- // Store the results in cache
- return defer({
- token,
- ghToken,
- isAuthed,
- githubAuthUrl,
- user,
- settingsIsUpdated,
- settings,
- analyticsConsent,
- });
-};
+import { useConfig } from "#/hooks/query/use-config";
+import { useGitHubUser } from "#/hooks/query/use-github-user";
+import { useGitHubAuthUrl } from "#/hooks/use-github-auth-url";
+import { useAIConfigOptions } from "#/hooks/query/use-ai-config-options";
+import { useIsAuthed } from "#/hooks/query/use-is-authed";
+import { useAuth } from "#/context/auth-context";
+import { useEndSession } from "#/hooks/use-end-session";
+import { useUserPrefs } from "#/context/user-prefs-context";
export function ErrorBoundary() {
const error = useRouteError();
@@ -127,107 +62,70 @@ export function ErrorBoundary() {
);
}
-type SettingsFormData = {
- models: string[];
- agents: string[];
- securityAnalyzers: string[];
-};
-
export default function MainApp() {
- const navigation = useNavigation();
+ const { token, gitHubToken, clearToken, logout } = useAuth();
+ const { settings, settingsAreUpToDate } = useUserPrefs();
+
const location = useLocation();
- const {
- token,
- ghToken,
- user,
- isAuthed,
- githubAuthUrl,
- settingsIsUpdated,
- settings,
- analyticsConsent,
- } = useLoaderData();
- const logoutFetcher = useFetcher({ key: "logout" });
- const endSessionFetcher = useFetcher({ key: "end-session" });
const dispatch = useDispatch();
+ const endSession = useEndSession();
+
+ // FIXME: Bad practice to use localStorage directly
+ const analyticsConsent = localStorage.getItem("analytics-consent");
const [accountSettingsModalOpen, setAccountSettingsModalOpen] =
React.useState(false);
const [settingsModalIsOpen, setSettingsModalIsOpen] = React.useState(false);
const [startNewProjectModalIsOpen, setStartNewProjectModalIsOpen] =
React.useState(false);
- const [settingsFormData, setSettingsFormData] =
- React.useState({
- models: [],
- agents: [],
- securityAnalyzers: [],
- });
- const [settingsFormError, setSettingsFormError] = React.useState<
- string | null
- >(null);
+ const [consentFormIsOpen, setConsentFormIsOpen] = React.useState(
+ !localStorage.getItem("analytics-consent"),
+ );
+
+ const config = useConfig();
+ const user = useGitHubUser();
+ const {
+ data: isAuthed,
+ isFetched,
+ isFetching: isFetchingAuth,
+ } = useIsAuthed();
+ const aiConfigOptions = useAIConfigOptions();
+
+ const gitHubAuthUrl = useGitHubAuthUrl({
+ gitHubToken,
+ appMode: config.data?.APP_MODE || null,
+ gitHubClientId: config.data?.GITHUB_CLIENT_ID || null,
+ });
React.useEffect(() => {
- if (user && !isGitHubErrorReponse(user)) {
- posthog.identify(user.login, {
- company: user.company,
- name: user.name,
- email: user.email,
- user: user.login,
- mode: window.__APP_MODE__ || "oss",
- });
- }
- }, [user]);
+ if (isFetched && !isAuthed) clearToken();
+ }, [isFetched, isAuthed]);
React.useEffect(() => {
- // We fetch this here instead of the data loader because the server seems to block
- // the retrieval when the session is closing -- preventing the screen from rendering until
- // the fetch is complete
- (async () => {
- try {
- const [models, agents, securityAnalyzers] = await Promise.all([
- OpenHands.getModels(),
- OpenHands.getAgents(),
- OpenHands.getSecurityAnalyzers(),
- ]);
- setSettingsFormData({ models, agents, securityAnalyzers });
- } catch (error) {
- setSettingsFormError("Failed to load settings, please reload the page");
- }
- })();
- }, []);
+ if (settings.LANGUAGE) {
+ i18n.changeLanguage(settings.LANGUAGE);
+ }
+ }, [settings.LANGUAGE]);
React.useEffect(() => {
// If the github token is invalid, open the account settings modal again
- if (isGitHubErrorReponse(user)) {
+ if (user.isError) {
setAccountSettingsModalOpen(true);
}
- }, [user]);
-
- const handleUserLogout = () => {
- logoutFetcher.submit(
- {},
- {
- method: "POST",
- action: "/logout",
- },
- );
- };
+ }, [user.isError]);
const handleAccountSettingsModalClose = () => {
// If the user closes the modal without connecting to GitHub,
// we need to log them out to clear the invalid token from the
// local storage
- if (isGitHubErrorReponse(user)) handleUserLogout();
+ if (user.isError) logout();
setAccountSettingsModalOpen(false);
};
const handleEndSession = () => {
setStartNewProjectModalIsOpen(false);
dispatch(setCurrentAgentState(AgentState.LOADING));
- // call new session action and redirect to '/'
- endSessionFetcher.submit(new FormData(), {
- method: "POST",
- action: "/end-session",
- });
+ endSession();
};
return (
@@ -237,8 +135,8 @@ export default function MainApp() {
>
diff --git a/frontend/src/routes/_oh.app.tsx b/frontend/src/routes/_oh.app.tsx
index 664b6124af4..89bf549879a 100644
--- a/frontend/src/routes/_oh.app.tsx
+++ b/frontend/src/routes/_oh.app.tsx
@@ -1,16 +1,10 @@
import { useDisclosure } from "@nextui-org/react";
import React from "react";
-import {
- Outlet,
- useLoaderData,
- json,
- ClientActionFunctionArgs,
-} from "@remix-run/react";
-import { useDispatch } from "react-redux";
-import { getSettings } from "#/services/settings";
+import { Outlet } from "@remix-run/react";
+import { useDispatch, useSelector } from "react-redux";
import Security from "../components/modals/security/Security";
import { Controls } from "#/components/controls";
-import store from "#/store";
+import { RootState } from "#/store";
import { Container } from "#/components/container";
import { clearMessages } from "#/state/chatSlice";
import { clearTerminal } from "#/state/commandSlice";
@@ -18,64 +12,32 @@ import { useEffectOnce } from "#/utils/use-effect-once";
import CodeIcon from "#/icons/code.svg?react";
import GlobeIcon from "#/icons/globe.svg?react";
import ListIcon from "#/icons/list-type-number.svg?react";
-import { isGitHubErrorReponse, retrieveLatestGitHubCommit } from "#/api/github";
import { clearJupyter } from "#/state/jupyterSlice";
import { FilesProvider } from "#/context/files";
import { ChatInterface } from "#/components/chat-interface";
import { WsClientProvider } from "#/context/ws-client-provider";
import { EventHandler } from "#/components/event-handler";
+import { useLatestRepoCommit } from "#/hooks/query/use-latest-repo-commit";
+import { useAuth } from "#/context/auth-context";
+import { useUserPrefs } from "#/context/user-prefs-context";
-export const clientLoader = async () => {
- const ghToken = localStorage.getItem("ghToken");
- const repo =
- store.getState().initalQuery.selectedRepository ||
- localStorage.getItem("repo");
-
- const settings = getSettings();
- const token = localStorage.getItem("token");
+function App() {
+ const { token, gitHubToken } = useAuth();
+ const { settings } = useUserPrefs();
- if (repo) localStorage.setItem("repo", repo);
+ const dispatch = useDispatch();
- let lastCommit: GitHubCommit | null = null;
- if (ghToken && repo) {
- const data = await retrieveLatestGitHubCommit(ghToken, repo);
- if (isGitHubErrorReponse(data)) {
- // TODO: Handle error
- console.error("Failed to retrieve latest commit", data);
- } else {
- [lastCommit] = data;
- }
- }
+ const { selectedRepository } = useSelector(
+ (state: RootState) => state.initalQuery,
+ );
- return json({
- settings,
- token,
- ghToken,
- repo,
- lastCommit,
+ const { data: latestGitHubCommit } = useLatestRepoCommit({
+ repository: selectedRepository,
});
-};
-
-export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
- const formData = await request.formData();
-
- const token = formData.get("token")?.toString();
- const ghToken = formData.get("ghToken")?.toString();
-
- if (token) localStorage.setItem("token", token);
- if (ghToken) localStorage.setItem("ghToken", ghToken);
-
- return json(null);
-};
-
-function App() {
- const dispatch = useDispatch();
- const { settings, token, ghToken, lastCommit } =
- useLoaderData();
const secrets = React.useMemo(
- () => [ghToken, token].filter((secret) => secret !== null),
- [ghToken, token],
+ () => [gitHubToken, token].filter((secret) => secret !== null),
+ [gitHubToken, token],
);
const Terminal = React.useMemo(
@@ -99,7 +61,7 @@ function App() {
@@ -141,7 +103,7 @@ function App() {