From 1d3e5b85fc12231623ee2e112947f3d56a01eaf5 Mon Sep 17 00:00:00 2001 From: TaylorS15 Date: Sat, 11 Feb 2023 11:56:44 -0500 Subject: [PATCH] react-router-dom --- frontend/package-lock.json | 63 ++++++++++++- frontend/package.json | 3 +- frontend/src/App.tsx | 33 +++++-- frontend/src/components/APIKeyModal.tsx | 60 ++++++++++++ frontend/src/components/DocsGPT.tsx | 8 +- .../src/components/Navigation/Navigation.tsx | 91 +++++++++++++++++-- .../src/components/Navigation/PastChat.tsx | 1 + .../src/components/Navigation/imgs/info.svg | 3 + .../src/components/Navigation/imgs/key.svg | 3 + .../src/components/Navigation/imgs/link.svg | 3 + frontend/src/main.tsx | 15 +-- frontend/tailwind.config.cjs | 7 +- 12 files changed, 266 insertions(+), 24 deletions(-) create mode 100644 frontend/src/components/APIKeyModal.tsx create mode 100644 frontend/src/components/Navigation/PastChat.tsx create mode 100644 frontend/src/components/Navigation/imgs/info.svg create mode 100644 frontend/src/components/Navigation/imgs/key.svg create mode 100644 frontend/src/components/Navigation/imgs/link.svg diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f6133e8..c86fdb0 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.8.1" }, "devDependencies": { "@types/react": "^18.0.27", @@ -896,6 +897,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz", + "integrity": "sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==", + "engines": { + "node": ">=14" + } + }, "node_modules/@types/json-schema": { "version": "7.0.11", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", @@ -4757,6 +4766,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz", + "integrity": "sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==", + "dependencies": { + "@remix-run/router": "1.3.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz", + "integrity": "sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==", + "dependencies": { + "@remix-run/router": "1.3.2", + "react-router": "6.8.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -6226,6 +6265,11 @@ "fastq": "^1.6.0" } }, + "@remix-run/router": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz", + "integrity": "sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==" + }, "@types/json-schema": { "version": "7.0.11", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", @@ -8885,6 +8929,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz", + "integrity": "sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==", + "requires": { + "@remix-run/router": "1.3.2" + } + }, + "react-router-dom": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz", + "integrity": "sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==", + "requires": { + "@remix-run/router": "1.3.2", + "react-router": "6.8.1" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 34761d2..b00008f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,7 +20,8 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.8.1" }, "devDependencies": { "@types/react": "^18.0.27", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 5327bc1..2c0a6da 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,10 +1,16 @@ import { useEffect, useState } from 'react'; +import { Routes, Route } from 'react-router-dom'; import Navigation from './components/Navigation/Navigation'; import DocsGPT from './components/DocsGPT'; +import APIKeyModal from './components/APIKeyModal'; import './App.css'; -function App() { +export default function App() { + //Currently using primitive state management. Will most likely be replaced with Redux. const [isMobile, setIsMobile] = useState(true); + const [isMenuOpen, setIsMenuOpen] = useState(true); + const [isApiModalOpen, setIsApiModalOpen] = useState(true); + const [apiKey, setApiKey] = useState(''); const handleResize = () => { if (window.innerWidth > 768 && isMobile) { @@ -24,11 +30,26 @@ function App() { }, []); return ( -
- - +
+ + + + } /> +
); } - -export default App; diff --git a/frontend/src/components/APIKeyModal.tsx b/frontend/src/components/APIKeyModal.tsx new file mode 100644 index 0000000..4a23bb7 --- /dev/null +++ b/frontend/src/components/APIKeyModal.tsx @@ -0,0 +1,60 @@ +import { useState } from 'react'; + +export default function APIKeyModal({ + isApiModalOpen, + setIsApiModalOpen, + apiKey, + setApiKey, +}: { + isApiModalOpen: boolean; + setIsApiModalOpen: React.Dispatch>; + apiKey: string; + setApiKey: React.Dispatch>; +}) { + const [formError, setFormError] = useState(false); + + const handleResetKey = () => { + if (!apiKey) { + setFormError(true); + } else { + setFormError(false); + setIsApiModalOpen(false); + } + }; + + return ( +
+
+

OpenAI API Key

+

+ Before you can start using DocsGPT we need you to provide an API key + for llm. Currently, we support only OpenAI but soon many more. You can + find it here. +

+ setApiKey(e.target.value)} + /> +
+ {formError && ( +

Please enter a valid API key

+ )} + +
+
+
+ ); +} diff --git a/frontend/src/components/DocsGPT.tsx b/frontend/src/components/DocsGPT.tsx index 112c6e7..15df78e 100644 --- a/frontend/src/components/DocsGPT.tsx +++ b/frontend/src/components/DocsGPT.tsx @@ -1,3 +1,7 @@ -export default function DocsGPT() { - return
Docs GPT Chat Placeholder
; +export default function DocsGPT({ isMenuOpen }: { isMenuOpen: boolean }) { + return ( +
+ Docs GPT Chat Placeholder +
+ ); } diff --git a/frontend/src/components/Navigation/Navigation.tsx b/frontend/src/components/Navigation/Navigation.tsx index de28347..e086bf8 100644 --- a/frontend/src/components/Navigation/Navigation.tsx +++ b/frontend/src/components/Navigation/Navigation.tsx @@ -1,26 +1,103 @@ import React, { useState } from 'react'; import Arrow1 from './imgs/arrow.svg'; +import Key from './imgs/key.svg'; +import Info from './imgs/info.svg'; +import Link from './imgs/link.svg'; function MobileNavigation() { return
Mobile Navigation
; } -function DesktopNavigation() { +function DesktopNavigation({ + isMenuOpen, + setIsMenuOpen, + setIsApiModalOpen, +}: { + isMenuOpen: boolean; + setIsMenuOpen: React.Dispatch>; + setIsApiModalOpen: React.Dispatch>; +}) { return ( -
-
-
+ + {isMenuOpen && ( + <> +
+ +
+
setIsApiModalOpen(true)} + > + key +

Reset Key

+
+
+ +
+
+ info +

About

+
+ +
+ link +

Discord

+
+ +
+ link +

Github

+
+
+ + )}
); } -export default function Navigation({ isMobile }: { isMobile: boolean }) { +export default function Navigation({ + isMobile, + isMenuOpen, + setIsMenuOpen, + setIsApiModalOpen, +}: { + isMobile: boolean; + isMenuOpen: boolean; + setIsMenuOpen: React.Dispatch>; + setIsApiModalOpen: React.Dispatch>; +}) { if (isMobile) { return ; } else { - return ; + return ( + + ); } } diff --git a/frontend/src/components/Navigation/PastChat.tsx b/frontend/src/components/Navigation/PastChat.tsx new file mode 100644 index 0000000..d677ec4 --- /dev/null +++ b/frontend/src/components/Navigation/PastChat.tsx @@ -0,0 +1 @@ +export default function PastChat() {} diff --git a/frontend/src/components/Navigation/imgs/info.svg b/frontend/src/components/Navigation/imgs/info.svg new file mode 100644 index 0000000..6f3d244 --- /dev/null +++ b/frontend/src/components/Navigation/imgs/info.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/components/Navigation/imgs/key.svg b/frontend/src/components/Navigation/imgs/key.svg new file mode 100644 index 0000000..4f8a272 --- /dev/null +++ b/frontend/src/components/Navigation/imgs/key.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/components/Navigation/imgs/link.svg b/frontend/src/components/Navigation/imgs/link.svg new file mode 100644 index 0000000..67bacd9 --- /dev/null +++ b/frontend/src/components/Navigation/imgs/link.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 791f139..399758a 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,10 +1,13 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' -import './index.css' +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import { BrowserRouter } from 'react-router-dom'; +import './index.css'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + + + , -) +); diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs index 9b580ee..8a8d3bf 100644 --- a/frontend/tailwind.config.cjs +++ b/frontend/tailwind.config.cjs @@ -7,7 +7,12 @@ module.exports = { 112: '28rem', 128: '32rem', }, + colors: { + 'eerie-black': '#212121', + jet: '#343541', + 'gray-alpha': 'rgba(0,0,0, .1)', + }, }, }, plugins: [], -} +};