mirror of https://github.com/arc53/DocsGPT
major changes
state management now handled with redux responsiveness uses custom hook (hooks.ts)pull/72/head^2
parent
c44e1804bf
commit
5e5f13b664
@ -1,12 +1,13 @@
|
||||
export default function DocsGPT({
|
||||
isMenuOpen,
|
||||
isMobile,
|
||||
}: {
|
||||
isMenuOpen: boolean;
|
||||
isMobile: boolean;
|
||||
}) {
|
||||
import { useMediaQuery } from '../../hooks';
|
||||
import { selectIsMenuOpen } from '../../store';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
export default function Conversation() {
|
||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||
const isMenuOpen = useSelector(selectIsMenuOpen);
|
||||
|
||||
return (
|
||||
//Parent div for all content shown through App.tsx routing needs to have this styling. Might change when state management is updated.
|
||||
//Parent div for all content shown through App.tsx routing needs to have this styling.
|
||||
<div
|
||||
className={`${
|
||||
isMobile
|
@ -1 +0,0 @@
|
||||
export default function PastChat() {}
|
@ -0,0 +1,22 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export function useMediaQuery(query: string): boolean {
|
||||
const [matches, setMatches] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const media = window.matchMedia(query);
|
||||
|
||||
if (media.matches !== matches) {
|
||||
setMatches(media.matches);
|
||||
}
|
||||
|
||||
const listener = () => {
|
||||
setMatches(media.matches);
|
||||
};
|
||||
|
||||
media.addEventListener('resize', listener);
|
||||
return () => media.removeEventListener('resize', listener);
|
||||
}, [matches, query]);
|
||||
|
||||
return matches;
|
||||
}
|
@ -0,0 +1,48 @@
|
||||
import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
|
||||
interface State {
|
||||
isApiKeyModalOpen: boolean;
|
||||
apiKey: string;
|
||||
isMenuOpen: boolean;
|
||||
}
|
||||
|
||||
const initialState: State = {
|
||||
isApiKeyModalOpen: true,
|
||||
apiKey: '',
|
||||
isMenuOpen: true,
|
||||
};
|
||||
|
||||
export const slice = createSlice({
|
||||
name: 'app',
|
||||
initialState,
|
||||
reducers: {
|
||||
toggleApiKeyModal: (state) => {
|
||||
state.isApiKeyModalOpen = !state.isApiKeyModalOpen;
|
||||
console.log('showApiKeyModal', state.isApiKeyModalOpen);
|
||||
},
|
||||
setApiKey: (state, action: PayloadAction<string>) => {
|
||||
state.apiKey = action.payload;
|
||||
console.log('setApiKey', action.payload);
|
||||
},
|
||||
toggleIsMenuOpen: (state) => {
|
||||
state.isMenuOpen = !state.isMenuOpen;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { toggleApiKeyModal, setApiKey, toggleIsMenuOpen } = slice.actions;
|
||||
|
||||
const store = configureStore({
|
||||
reducer: {
|
||||
app: slice.reducer,
|
||||
},
|
||||
});
|
||||
|
||||
type RootState = ReturnType<typeof store.getState>;
|
||||
|
||||
export const selectIsApiKeyModalOpen = (state: RootState) =>
|
||||
state.app.isApiKeyModalOpen;
|
||||
export const selectApiKey = (state: RootState) => state.app.apiKey;
|
||||
export const selectIsMenuOpen = (state: RootState) => state.app.isMenuOpen;
|
||||
|
||||
export default store;
|
Loading…
Reference in New Issue