From 72a89ada1f00e3ccda24e5cdab522c319c52158f Mon Sep 17 00:00:00 2001 From: Jing Hua Date: Mon, 6 Mar 2023 00:09:03 +0800 Subject: [PATCH] refactor api menu --- src/App.tsx | 2 - src/components/ApiMenu/ApiMenu.tsx | 133 ++++++++++++++ src/components/ApiMenu/index.ts | 1 + src/components/ConfigMenu/ConfigMenu.tsx | 162 ------------------ src/components/ConfigMenu/index.ts | 1 - src/components/Menu/MenuOptions/Api.tsx | 25 +++ src/components/Menu/MenuOptions/Config.tsx | 21 --- .../Menu/MenuOptions/MenuOptions.tsx | 4 +- 8 files changed, 161 insertions(+), 188 deletions(-) create mode 100644 src/components/ApiMenu/ApiMenu.tsx create mode 100644 src/components/ApiMenu/index.ts delete mode 100644 src/components/ConfigMenu/ConfigMenu.tsx delete mode 100644 src/components/ConfigMenu/index.ts create mode 100644 src/components/Menu/MenuOptions/Api.tsx delete mode 100644 src/components/Menu/MenuOptions/Config.tsx diff --git a/src/App.tsx b/src/App.tsx index d393cc3..29e0190 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,7 +3,6 @@ import useStore from '@store/store'; import Chat from './components/Chat'; import Menu from './components/Menu'; -import ConfigMenu from './components/ConfigMenu'; import useInitialiseNewChat from '@hooks/useInitialiseNewChat'; @@ -21,7 +20,6 @@ function App() {
-
); } diff --git a/src/components/ApiMenu/ApiMenu.tsx b/src/components/ApiMenu/ApiMenu.tsx new file mode 100644 index 0000000..e02d4fa --- /dev/null +++ b/src/components/ApiMenu/ApiMenu.tsx @@ -0,0 +1,133 @@ +import React, { useEffect, useState } from 'react'; +import useStore from '@store/store'; + +import PopupModal from '@components/PopupModal'; +import { validateApiKey } from '@api/customApi'; + +const ApiMenu = ({ + isModalOpen, + setIsModalOpen, +}: { + isModalOpen: boolean; + setIsModalOpen: React.Dispatch>; +}) => { + const apiKey = useStore((state) => state.apiKey); + const setApiKey = useStore((state) => state.setApiKey); + const apiFree = useStore((state) => state.apiFree); + const setApiFree = useStore((state) => state.setApiFree); + + const [_apiKey, _setApiKey] = useState(apiKey || ''); + const [error, setError] = useState(false); + + const handleSave = async () => { + if (apiFree === true) { + setIsModalOpen(false); + } else { + const valid = await validateApiKey(_apiKey); + + if (valid) { + setApiKey(_apiKey); + setError(false); + setIsModalOpen(false); + } else { + setError(true); + setTimeout(() => { + setError(false); + }, 3000); + } + } + }; + + useEffect(() => { + if (apiKey) { + setApiFree(false); + _setApiKey(apiKey); + } + }, []); + + return isModalOpen ? ( + +
+
+ setApiFree(true)} + /> + +
+ +
+ setApiFree(false)} + /> + +
+ + {apiFree === false && ( + <> +
+
+ API Key +
+ { + _setApiKey(e.target.value); + }} + /> +
+ {error && ( +
+ Invalid API key! +
+ )} + + )} + +
+ Get your personal API key{' '} + + here + +
+
+ We prioritize the security of your API key and handle it with utmost + care. Your key is exclusively stored on your browser and never shared + with any third-party entity. It is solely used for the intended + purpose of accessing the OpenAI API and not for any other unauthorized + use. +
+
+ + ) : ( + <> + ); +}; + +export default ApiMenu; diff --git a/src/components/ApiMenu/index.ts b/src/components/ApiMenu/index.ts new file mode 100644 index 0000000..789a061 --- /dev/null +++ b/src/components/ApiMenu/index.ts @@ -0,0 +1 @@ +export { default } from './ApiMenu'; diff --git a/src/components/ConfigMenu/ConfigMenu.tsx b/src/components/ConfigMenu/ConfigMenu.tsx deleted file mode 100644 index 87757e1..0000000 --- a/src/components/ConfigMenu/ConfigMenu.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import useStore from '@store/store'; - -import CrossIcon2 from '@icon/CrossIcon2'; -import { validateApiKey } from '@api/customApi'; - -const ConfigMenu = () => { - const apiKey = useStore((state) => state.apiKey); - const setApiKey = useStore((state) => state.setApiKey); - const apiFree = useStore((state) => state.apiFree); - const setApiFree = useStore((state) => state.setApiFree); - const openConfig = useStore((state) => state.openConfig); - const setOpenConfig = useStore((state) => state.setOpenConfig); - - const [_apiKey, _setApiKey] = useState(apiKey || ''); - const [error, setError] = useState(false); - - const handleSave = async () => { - if (apiFree === true) { - setOpenConfig(false); - } else { - const valid = await validateApiKey(_apiKey); - - if (valid) { - setApiKey(_apiKey); - setError(false); - setOpenConfig(false); - } else { - setError(true); - setTimeout(() => { - setError(false); - }, 3000); - } - } - }; - - const handleClose = () => { - setOpenConfig(false); - }; - - useEffect(() => { - if (apiKey) { - setApiFree(false); - _setApiKey(apiKey); - } - }, []); - - return openConfig ? ( -
-
-
-
-

- Config -

- -
-
-
- setApiFree(true)} - /> - -
- -
- setApiFree(false)} - /> - -
- - {apiFree === false && ( - <> -
-
- API Key -
- { - _setApiKey(e.target.value); - }} - /> -
- {error && ( -
- Invalid API key! -
- )} - - )} - -
- Get your personal API key{' '} - - here - -
-
- We prioritize the security of your API key and handle it with - utmost care. Your key is exclusively stored on your browser and - never shared with any third-party entity. It is solely used for - the intended purpose of accessing the OpenAI API and not for any - other unauthorized use. -
-
- -
- - -
-
-
-
- ) : ( - <> - ); -}; - -export default ConfigMenu; diff --git a/src/components/ConfigMenu/index.ts b/src/components/ConfigMenu/index.ts deleted file mode 100644 index 6497639..0000000 --- a/src/components/ConfigMenu/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ConfigMenu'; diff --git a/src/components/Menu/MenuOptions/Api.tsx b/src/components/Menu/MenuOptions/Api.tsx new file mode 100644 index 0000000..f5fcfe7 --- /dev/null +++ b/src/components/Menu/MenuOptions/Api.tsx @@ -0,0 +1,25 @@ +import React, { useState } from 'react'; +import useStore from '@store/store'; + +import PersonIcon from '@icon/PersonIcon'; +import ApiMenu from '@components/ApiMenu'; + +const Config = () => { + const apiFree = useStore((state) => state.apiFree); + const [isModalOpen, setIsModalOpen] = useState(false); + + return ( + <> + setIsModalOpen(true)} + > + + API: {apiFree ? 'Free' : 'Personal'} + + + + ); +}; + +export default Config; diff --git a/src/components/Menu/MenuOptions/Config.tsx b/src/components/Menu/MenuOptions/Config.tsx deleted file mode 100644 index 1f72cb8..0000000 --- a/src/components/Menu/MenuOptions/Config.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { useState } from 'react'; -import useStore from '@store/store'; - -import PersonIcon from '@icon/PersonIcon'; - -const Config = () => { - const apiFree = useStore((state) => state.apiFree); - const setOpenConfig = useStore((state) => state.setOpenConfig); - - return ( - setOpenConfig(true)} - > - - API: {apiFree ? 'Free' : 'Personal'} - - ); -}; - -export default Config; diff --git a/src/components/Menu/MenuOptions/MenuOptions.tsx b/src/components/Menu/MenuOptions/MenuOptions.tsx index 8e41ca8..abe5399 100644 --- a/src/components/Menu/MenuOptions/MenuOptions.tsx +++ b/src/components/Menu/MenuOptions/MenuOptions.tsx @@ -2,7 +2,7 @@ import React from 'react'; import Account from './Account'; import ClearConversation from './ClearConversation'; -import Config from './Config'; +import Api from './Api'; import Logout from './Logout'; import Me from './Me'; import ThemeSwitcher from './ThemeSwitcher'; @@ -12,7 +12,7 @@ const MenuOptions = () => { return ( <> - + {/* */}