Refactor extension state into ExtensionStateContext

webview-ui/src/components/WelcomeView.tsx

@@ -1,24 +1,18 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import React, { useEffect, useState } from "react"
-import { ApiConfiguration } from "../../../src/shared/api"
+import { getKoduSignInUrl } from "../../../src/shared/kodu"
+import { useExtensionState } from "../context/ExtensionStateContext"
 import { validateApiConfiguration } from "../utils/validate"
 import { vscode } from "../utils/vscode"
 import ApiOptions from "./ApiOptions"
-import { getKoduSignInUrl } from "../../../src/shared/kodu"
 
 interface WelcomeViewProps {
-	apiConfiguration?: ApiConfiguration
-	setApiConfiguration: React.Dispatch<React.SetStateAction<ApiConfiguration | undefined>>
-	vscodeUriScheme?: string
 	setDidAuthKoduFromWelcome: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-const WelcomeView: React.FC<WelcomeViewProps> = ({
-	apiConfiguration,
-	setApiConfiguration,
-	vscodeUriScheme,
-	setDidAuthKoduFromWelcome,
-}) => {
+const WelcomeView: React.FC<WelcomeViewProps> = ({ setDidAuthKoduFromWelcome }) => {
+	const { apiConfiguration, uriScheme } = useExtensionState()
+
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
 
 	const disableLetsGoButton = apiErrorMessage != null
@@ -67,20 +61,14 @@ const WelcomeView: React.FC<WelcomeViewProps> = ({
 					}}></i>
 				<span>
 					Explore Claude's capabilities with $20 free credits from{" "}
-					<VSCodeLink href={getKoduSignInUrl(vscodeUriScheme)} style={{ display: "inline" }}>
+					<VSCodeLink href={getKoduSignInUrl(uriScheme)} style={{ display: "inline" }}>
 						Kodu
 					</VSCodeLink>
 				</span>
 			</div>
 
 			<div style={{ marginTop: "10px" }}>
-				<ApiOptions
-					apiConfiguration={apiConfiguration}
-					setApiConfiguration={setApiConfiguration}
-					showModelOptions={false}
-					vscodeUriScheme={vscodeUriScheme}
-					setDidAuthKodu={setDidAuthKoduFromWelcome}
-				/>
+				<ApiOptions showModelOptions={false} setDidAuthKodu={setDidAuthKoduFromWelcome} />
 				{apiConfiguration?.apiProvider !== "kodu" && (
 					<VSCodeButton onClick={handleSubmit} disabled={disableLetsGoButton} style={{ marginTop: "3px" }}>
 						Let's go!