setIsApiModalOpen(true)}
+ onClick={() => dispatch(toggleApiKeyModal())}
>
Reset Key
@@ -155,32 +152,12 @@ function DesktopNavigation({
);
}
-export default function Navigation({
- isMobile,
- isMenuOpen,
- setIsMenuOpen,
- setIsApiModalOpen,
-}: {
- isMobile: boolean;
- isMenuOpen: boolean;
- setIsMenuOpen: React.Dispatch
>;
- setIsApiModalOpen: React.Dispatch>;
-}) {
+export default function Navigation() {
+ const isMobile = useMediaQuery('(max-width: 768px)');
+
if (isMobile) {
- return (
-
- );
+ return ;
} else {
- return (
-
- );
+ return ;
}
}
diff --git a/frontend/src/components/Navigation/PastChat.tsx b/frontend/src/components/Navigation/PastChat.tsx
deleted file mode 100644
index d677ec4a..00000000
--- a/frontend/src/components/Navigation/PastChat.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export default function PastChat() {}
diff --git a/frontend/src/hooks.ts b/frontend/src/hooks.ts
new file mode 100644
index 00000000..45bfb83e
--- /dev/null
+++ b/frontend/src/hooks.ts
@@ -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;
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8c23069d..1b6d459d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -30,6 +30,7 @@ body {
margin: 0;
min-height: 100vh;
overflow-x: hidden;
+ font-family: 'Inter', sans-serif;
}
/**
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 399758a4..6146911d 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,12 +2,16 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import store from './store';
import './index.css';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-
+
+
+
,
);
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
new file mode 100644
index 00000000..a7c377bb
--- /dev/null
+++ b/frontend/src/store.ts
@@ -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) => {
+ 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;
+
+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;
From 8e75d83a72422994aa188c9a64e674b1855d0235 Mon Sep 17 00:00:00 2001
From: TaylorS15
Date: Tue, 14 Feb 2023 21:44:29 -0500
Subject: [PATCH 16/16] default state change
---
frontend/src/store.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index a7c377bb..e5dcda3f 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -7,9 +7,9 @@ interface State {
}
const initialState: State = {
- isApiKeyModalOpen: true,
+ isApiKeyModalOpen: false,
apiKey: '',
- isMenuOpen: true,
+ isMenuOpen: false,
};
export const slice = createSlice({