generated from Jonghakseo/chrome-extension-boilerplate-react-vite
-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #64 from Jonghakseo/dev
Dev
- Loading branch information
Showing
18 changed files
with
235 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,71 +1,10 @@ | ||
import React from "react"; | ||
import { NoApiKeyPage } from "@pages/popup/pages/NoApiKeyPage"; | ||
import SlotListPage from "@pages/popup/pages/SlotListPage"; | ||
import { useMachine } from "@xstate/react"; | ||
import popupStateMachine from "@pages/popup/xState/popupStateMachine"; | ||
import { | ||
sendMessageToBackground, | ||
sendMessageToBackgroundAsync, | ||
} from "@src/chrome/message"; | ||
import MainLayout from "@pages/popup/components/layout/MainLayout"; | ||
import QuickChattingPage from "@pages/popup/pages/QuickChattingPage"; | ||
|
||
const saveApiKeyToBackground = async (apiKey: string) => { | ||
await sendMessageToBackgroundAsync({ | ||
type: "SaveAPIKey", | ||
input: apiKey, | ||
}); | ||
}; | ||
|
||
const getApiKeyFromBackground = async () => { | ||
return sendMessageToBackgroundAsync({ | ||
type: "GetAPIKey", | ||
}); | ||
}; | ||
|
||
const resetApiKeyFromBackground = () => { | ||
sendMessageToBackground({ | ||
message: { | ||
type: "ResetAPIKey", | ||
}, | ||
}); | ||
}; | ||
import Popup from "@pages/popup/Popup"; | ||
import StyleProvider from "@pages/popup/style/StyleProvider"; | ||
|
||
export default function App() { | ||
const [state, send] = useMachine(popupStateMachine, { | ||
services: { | ||
saveApiKeyToBackground: (context) => { | ||
return saveApiKeyToBackground(context.openAiApiKey ?? ""); | ||
}, | ||
getApiKeyFromBackground, | ||
}, | ||
actions: { | ||
resetApiKeyFromBackground, | ||
}, | ||
}); | ||
|
||
const checkApiKey = (apiKey: string) => { | ||
send({ type: "CHECK_API_KEY", data: apiKey }); | ||
}; | ||
|
||
return ( | ||
<MainLayout> | ||
{state.matches("slot_list_page") && ( | ||
<SlotListPage | ||
onClickChangeApiKey={() => send("RESET_API_KEY")} | ||
onClickQuickChatButton={() => send("GO_TO_QUICK_CHAT")} | ||
/> | ||
)} | ||
{state.hasTag("noApiKeyPage") && ( | ||
<NoApiKeyPage | ||
apiKeyError={state.context.apiKeyCheckError} | ||
loading={state.matches("checking_api_key")} | ||
checkApiKey={checkApiKey} | ||
/> | ||
)} | ||
{state.matches("quick_chat") && ( | ||
<QuickChattingPage onClickBackButton={() => send("EXIT_QUICK_CHAT")} /> | ||
)} | ||
</MainLayout> | ||
<StyleProvider> | ||
<Popup /> | ||
</StyleProvider> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
import React from "react"; | ||
import { NoApiKeyPage } from "@pages/popup/pages/NoApiKeyPage"; | ||
import SlotListPage from "@pages/popup/pages/SlotListPage"; | ||
import { useMachine } from "@xstate/react"; | ||
import popupStateMachine from "@pages/popup/xState/popupStateMachine"; | ||
import { | ||
sendMessageToBackground, | ||
sendMessageToBackgroundAsync, | ||
} from "@src/chrome/message"; | ||
import MainLayout from "@pages/popup/components/layout/MainLayout"; | ||
import QuickChattingPage from "@pages/popup/pages/QuickChattingPage"; | ||
|
||
const saveApiKeyToBackground = async (apiKey: string) => { | ||
await sendMessageToBackgroundAsync({ | ||
type: "SaveAPIKey", | ||
input: apiKey, | ||
}); | ||
}; | ||
|
||
const getApiKeyFromBackground = async () => { | ||
return sendMessageToBackgroundAsync({ | ||
type: "GetAPIKey", | ||
}); | ||
}; | ||
|
||
const resetApiKeyFromBackground = () => { | ||
sendMessageToBackground({ | ||
message: { | ||
type: "ResetAPIKey", | ||
}, | ||
}); | ||
}; | ||
|
||
export default function Popup() { | ||
const [state, send] = useMachine(popupStateMachine, { | ||
services: { | ||
saveApiKeyToBackground: (context) => { | ||
return saveApiKeyToBackground(context.openAiApiKey ?? ""); | ||
}, | ||
getApiKeyFromBackground, | ||
}, | ||
actions: { | ||
resetApiKeyFromBackground, | ||
}, | ||
}); | ||
|
||
const checkApiKey = (apiKey: string) => { | ||
send({ type: "CHECK_API_KEY", data: apiKey }); | ||
}; | ||
|
||
return ( | ||
<MainLayout> | ||
{state.matches("slot_list_page") && ( | ||
<SlotListPage | ||
onClickChangeApiKey={() => send("RESET_API_KEY")} | ||
onClickQuickChatButton={() => send("GO_TO_QUICK_CHAT")} | ||
/> | ||
)} | ||
{state.hasTag("noApiKeyPage") && ( | ||
<NoApiKeyPage | ||
apiKeyError={state.context.apiKeyCheckError} | ||
loading={state.matches("checking_api_key")} | ||
checkApiKey={checkApiKey} | ||
/> | ||
)} | ||
{state.matches("quick_chat") && ( | ||
<QuickChattingPage onClickBackButton={() => send("EXIT_QUICK_CHAT")} /> | ||
)} | ||
</MainLayout> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.