diff --git a/.babelrc b/.babelrc index fd78320fc2..4fddc17734 100644 --- a/.babelrc +++ b/.babelrc @@ -11,6 +11,13 @@ Babel's code transformations are enabled by applying plugins (or presets) to your configuration file. */ "plugins": [ - "@babel/plugin-transform-runtime" + "@babel/plugin-transform-runtime", + [ + "babel-plugin-root-import", + { + "rootPathPrefix": "~/", + "rootPathSuffix": "./src" + } + ] ] } \ No newline at end of file diff --git a/.gitignore b/.gitignore index c2e0375e5e..f9c5a49088 100644 --- a/.gitignore +++ b/.gitignore @@ -22,6 +22,7 @@ coverage build/ dist/ public/main.js +public/main.js.map # Dependency directorys # Deployed apps should consider commenting these lines out: diff --git a/index.js b/index.js index 0c4778e53d..9edd6a9f29 100644 --- a/index.js +++ b/index.js @@ -2,7 +2,7 @@ import React from 'react'; // import reactDom from 'react-dom'; ---> deprecated import { createRoot } from 'react-dom/client'; import { Provider } from 'react-redux'; -import { store } from './store'; +import { store } from './src/store'; import App from './src/App'; import './src/style.css'; diff --git a/package-lock.json b/package-lock.json index 90ff233694..f8041cf9da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "@babel/preset-react": "^7.18.6", "@babel/runtime": "^7.20.13", "babel-loader": "^9.1.2", + "babel-plugin-root-import": "^6.6.0", "babel-preset-react": "^6.24.1", "css-loader": "^6.7.3", "eslint": "^8.33.0", @@ -4711,6 +4712,24 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-root-import": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/babel-plugin-root-import/-/babel-plugin-root-import-6.6.0.tgz", + "integrity": "sha512-SPzVOHd7nDh5loZwZBxtX/oOu1MXeKjTkz+1VnnzLWC0dk8sJIGC2IDQ2uWIBjE5mUtXlQ35MTHSqN0Xn7qHrg==", + "dev": true, + "dependencies": { + "slash": "^3.0.0" + } + }, + "node_modules/babel-plugin-root-import/node_modules/slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/babel-plugin-syntax-flow": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz", @@ -15958,6 +15977,23 @@ "@babel/helper-define-polyfill-provider": "^0.3.3" } }, + "babel-plugin-root-import": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/babel-plugin-root-import/-/babel-plugin-root-import-6.6.0.tgz", + "integrity": "sha512-SPzVOHd7nDh5loZwZBxtX/oOu1MXeKjTkz+1VnnzLWC0dk8sJIGC2IDQ2uWIBjE5mUtXlQ35MTHSqN0Xn7qHrg==", + "dev": true, + "requires": { + "slash": "^3.0.0" + }, + "dependencies": { + "slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true + } + } + }, "babel-plugin-syntax-flow": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz", diff --git a/package.json b/package.json index 518308a8db..db2278b98b 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "@babel/preset-react": "^7.18.6", "@babel/runtime": "^7.20.13", "babel-loader": "^9.1.2", + "babel-plugin-root-import": "^6.6.0", "babel-preset-react": "^6.24.1", "css-loader": "^6.7.3", "eslint": "^8.33.0", diff --git a/public/index.html b/public/index.html index ee4cdcdd76..8410c7a892 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,8 @@ - Webpack App + ChatGPT Clone +
diff --git a/src/App.jsx b/src/App.jsx index 276ff608ea..8a9153ac6d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,9 @@ import React from 'react'; import { useSelector } from 'react-redux'; -import Messages from './components/Messages'; -import TextChat from './components/TextChat'; +import Messages from './components/main/Messages'; +import TextChat from './components/main/TextChat'; import Nav from './components/Nav'; -import MobileNav from './components/MobileNav'; +import MobileNav from './components/Nav/MobileNav'; import useSWR from 'swr'; const fetcher = (url) => fetch(url).then((res) => res.json()); diff --git a/src/components/Conversation.jsx b/src/components/Conversations/Conversation.jsx similarity index 93% rename from src/components/Conversation.jsx rename to src/components/Conversations/Conversation.jsx index 3b56a9db0c..81c4e0fcb3 100644 --- a/src/components/Conversation.jsx +++ b/src/components/Conversations/Conversation.jsx @@ -2,8 +2,8 @@ import React from 'react'; import RenameButton from './RenameButton'; import DeleteButton from './DeleteButton'; import { useSelector, useDispatch } from 'react-redux'; -import { setConversation } from '../../store/convoSlice'; -import { setMessages } from '../../store/messageSlice'; +import { setConversation } from '~/store/convoSlice'; +import { setMessages } from '~/store/messageSlice'; import useSWRMutation from 'swr/mutation'; const fetcher = (url) => fetch(url).then((res) => res.json()); diff --git a/src/components/DeleteButton.jsx b/src/components/Conversations/DeleteButton.jsx similarity index 89% rename from src/components/DeleteButton.jsx rename to src/components/Conversations/DeleteButton.jsx index 99ec4394b7..bd8be47bf4 100644 --- a/src/components/DeleteButton.jsx +++ b/src/components/Conversations/DeleteButton.jsx @@ -1,9 +1,11 @@ import React from 'react'; +import TrashIcon from '../svg/TrashIcon'; export default function DeleteButton({ onClick, disabled }) { return ( ); } diff --git a/src/components/RenameButton.jsx b/src/components/Conversations/RenameButton.jsx similarity index 100% rename from src/components/RenameButton.jsx rename to src/components/Conversations/RenameButton.jsx diff --git a/src/components/Conversations.jsx b/src/components/Conversations/index.jsx similarity index 100% rename from src/components/Conversations.jsx rename to src/components/Conversations/index.jsx diff --git a/src/components/MobileNav.jsx b/src/components/Nav/MobileNav.jsx similarity index 100% rename from src/components/MobileNav.jsx rename to src/components/Nav/MobileNav.jsx diff --git a/src/components/NavLink.jsx b/src/components/Nav/NavLink.jsx similarity index 100% rename from src/components/NavLink.jsx rename to src/components/Nav/NavLink.jsx diff --git a/src/components/NavLinks.jsx b/src/components/Nav/NavLinks.jsx similarity index 72% rename from src/components/NavLinks.jsx rename to src/components/Nav/NavLinks.jsx index 4dac9d9f63..586baccedc 100644 --- a/src/components/NavLinks.jsx +++ b/src/components/Nav/NavLinks.jsx @@ -1,8 +1,8 @@ import React from 'react'; import NavLink from './NavLink'; -import TrashIcon from './svg/TrashIcon'; -import DarkModeIcon from './svg/DarkModeIcon'; -import LogOutIcon from './svg/LogOutIcon'; +import TrashIcon from '../svg/TrashIcon'; +import DarkModeIcon from '../svg/DarkModeIcon'; +import LogOutIcon from '../svg/LogOutIcon'; export default function NavLinks() { return ( diff --git a/src/components/NewChat.jsx b/src/components/Nav/NewChat.jsx similarity index 100% rename from src/components/NewChat.jsx rename to src/components/Nav/NewChat.jsx diff --git a/src/components/Nav.jsx b/src/components/Nav/index.jsx similarity index 93% rename from src/components/Nav.jsx rename to src/components/Nav/index.jsx index c070c7f9f1..a11cbe2cd4 100644 --- a/src/components/Nav.jsx +++ b/src/components/Nav/index.jsx @@ -1,6 +1,6 @@ import React from 'react'; import NewChat from './NewChat'; -import Conversations from './Conversations'; +import Conversations from '../Conversations'; import NavLinks from './NavLinks'; export default function Nav({ conversations }) { diff --git a/src/components/Message.jsx b/src/components/main/Message.jsx similarity index 100% rename from src/components/Message.jsx rename to src/components/main/Message.jsx diff --git a/src/components/Messages.jsx b/src/components/main/Messages.jsx similarity index 100% rename from src/components/Messages.jsx rename to src/components/main/Messages.jsx diff --git a/src/components/SubmitButton.jsx b/src/components/main/SubmitButton.jsx similarity index 100% rename from src/components/SubmitButton.jsx rename to src/components/main/SubmitButton.jsx diff --git a/src/components/TextChat.jsx b/src/components/main/TextChat.jsx similarity index 95% rename from src/components/TextChat.jsx rename to src/components/main/TextChat.jsx index 70a17927ef..48d7c395d7 100644 --- a/src/components/TextChat.jsx +++ b/src/components/main/TextChat.jsx @@ -1,10 +1,10 @@ import React, { useState } from 'react'; import SubmitButton from './SubmitButton'; import TextareaAutosize from 'react-textarea-autosize'; -import handleSubmit from '../utils/handleSubmit'; +import handleSubmit from '~/utils/handleSubmit'; import { useSelector, useDispatch } from 'react-redux'; -import { setConversation } from '../../store/convoSlice'; -import { setMessages } from '../../store/messageSlice'; +import { setConversation } from '~/store/convoSlice'; +import { setMessages } from '~/store/messageSlice'; export default function TextChat({ messages, reloadConvos }) { const [text, setText] = useState(''); diff --git a/src/components/svg/DarkModeIcon.jsx b/src/components/svg/DarkModeIcon.jsx index aaa66d2b02..29b002b512 100644 --- a/src/components/svg/DarkModeIcon.jsx +++ b/src/components/svg/DarkModeIcon.jsx @@ -14,7 +14,7 @@ export default function DarkModeIcon() { width="1em" xmlns="http://www.w3.org/2000/svg" > - + ); } diff --git a/src/components/svg/LogOutIcon.jsx b/src/components/svg/LogOutIcon.jsx index faee97e80b..757e85fb79 100644 --- a/src/components/svg/LogOutIcon.jsx +++ b/src/components/svg/LogOutIcon.jsx @@ -14,14 +14,14 @@ export default function LogOutIcon() { width="1em" xmlns="http://www.w3.org/2000/svg" > - - + + + /> ); } diff --git a/src/components/svg/TrashIcon.jsx b/src/components/svg/TrashIcon.jsx index e72ed7b6b8..357fbf05ad 100644 --- a/src/components/svg/TrashIcon.jsx +++ b/src/components/svg/TrashIcon.jsx @@ -14,20 +14,20 @@ export default function TrashIcon() { width="1em" xmlns="http://www.w3.org/2000/svg" > - - + + + /> + /> ); } diff --git a/store/convoSlice.js b/src/store/convoSlice.js similarity index 100% rename from store/convoSlice.js rename to src/store/convoSlice.js diff --git a/store/index.js b/src/store/index.js similarity index 98% rename from store/index.js rename to src/store/index.js index e37b91b014..491bc473ff 100644 --- a/store/index.js +++ b/src/store/index.js @@ -8,4 +8,4 @@ export const store = configureStore({ convo: convoReducer, messages: messageReducer, }, -}); +}); \ No newline at end of file diff --git a/store/messageSlice.js b/src/store/messageSlice.js similarity index 100% rename from store/messageSlice.js rename to src/store/messageSlice.js diff --git a/webpack.config.js b/webpack.config.js index 5cec748e50..2a671a37cc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,5 @@ const path = require('path'); +require('dotenv').config(); const HtmlWebpackPlugin = require('html-webpack-plugin'); /*We are basically telling webpack to take index.js from entry. Then check for all file extensions in resolve. @@ -9,7 +10,7 @@ module.exports = { * the environment - development, production, none. tells webpack * to use its built-in optimizations accordingly. default is production */ - mode: 'development', + mode: process.env.NODE_ENV, /** "entry" * the entry point */