moves the apikeymodal mounting one level down to simplify

This commit is contained in:
ajaythapliyal 2023-02-18 08:20:20 +05:30
parent 779253ef15
commit 5341d03749
2 changed files with 18 additions and 16 deletions

View File

@ -1,31 +1,18 @@
import { Routes, Route } from 'react-router-dom';
import Navigation from './Navigation';
import Conversation from './conversation/Conversation';
import APIKeyModal from './preferences/APIKeyModal';
import About from './About';
import { useState } from 'react';
import { ActiveState } from './models/misc';
import { selectApiKeyStatus } from './preferences/preferenceSlice';
import { useSelector } from 'react-redux';
export default function App() {
const isApiKeySet = useSelector(selectApiKeyStatus);
const [navState, setNavState] = useState<ActiveState>('ACTIVE');
const [apiKeyModalState, setApiKeyModalState] = useState<ActiveState>(
isApiKeySet ? 'INACTIVE' : 'ACTIVE',
);
return (
<div className="min-h-full min-w-full transition-all">
<APIKeyModal
modalState={apiKeyModalState}
setModalState={setApiKeyModalState}
isCancellable={isApiKeySet}
/>
<Navigation
navState={navState}
setNavState={(val: ActiveState) => setNavState(val)}
setApiKeyModalState={setApiKeyModalState}
/>
<div
className={`${

View File

@ -5,6 +5,10 @@ import Key from './assets/key.svg';
import Info from './assets/info.svg';
import Link from './assets/link.svg';
import { ActiveState } from './models/misc';
import APIKeyModal from './preferences/APIKeyModal';
import { useSelector } from 'react-redux';
import { selectApiKeyStatus } from './preferences/preferenceSlice';
import { useState } from 'react';
//TODO - Need to replace Chat button to open secondary nav with scrollable past chats option and new chat at top
//TODO - Need to add Discord and Github links
@ -12,12 +16,14 @@ import { ActiveState } from './models/misc';
export default function Navigation({
navState,
setNavState,
setApiKeyModalState,
}: {
navState: ActiveState;
setNavState: (val: ActiveState) => void;
setApiKeyModalState: (val: ActiveState) => void;
}) {
const isApiKeySet = useSelector(selectApiKeyStatus);
const [apiKeyModalState, setApiKeyModalState] = useState<ActiveState>(
isApiKeySet ? 'INACTIVE' : 'ACTIVE',
);
const openNav = (
<div className="fixed h-full w-72 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:visible md:flex lg:w-96">
<div className={'h-16 w-full border-b-2 border-gray-100'}>
@ -93,5 +99,14 @@ export default function Navigation({
</>
);
return navState === 'ACTIVE' ? openNav : closedNav;
return (
<>
{navState === 'ACTIVE' ? openNav : closedNav}
<APIKeyModal
modalState={apiKeyModalState}
setModalState={setApiKeyModalState}
isCancellable={isApiKeySet}
/>
</>
);
}