reorganize components and add root import plugin

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());

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());

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 (
     <button className="p-1 hover:text-white">
-      <svg
+      <TrashIcon />
+      {/* <svg
         stroke="currentColor"
         fill="none"
         strokeWidth="2"
@@ -29,7 +31,7 @@ export default function DeleteButton({ onClick, disabled }) {
           x2="14"
           y2="17"
         />
-      </svg>
+      </svg> */}
     </button>
   );
 }

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 (

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 }) {

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('');

src/components/svg/DarkModeIcon.jsx

@@ -14,7 +14,7 @@ export default function DarkModeIcon() {
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
     </svg>
   );
 }

src/components/svg/LogOutIcon.jsx

@@ -14,14 +14,14 @@ export default function LogOutIcon() {
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
-      <polyline points="16 17 21 12 16 7"></polyline>
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <polyline points="16 17 21 12 16 7" />
       <line
         x1="21"
         y1="12"
         x2="9"
         y2="12"
-      ></line>
+      />
     </svg>
   );
 }

src/components/svg/TrashIcon.jsx

@@ -14,20 +14,20 @@ export default function TrashIcon() {
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <polyline points="3 6 5 6 21 6"></polyline>
-      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
       <line
         x1="10"
         y1="11"
         x2="10"
         y2="17"
-      ></line>
+      />
       <line
         x1="14"
         y1="11"
         x2="14"
         y2="17"
-      ></line>
+      />
     </svg>
   );
 }

src/store/convoSlice.js

@@ -0,0 +1,24 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  active: false,
+  conversationId: null,
+  parentMessageId: null,
+};
+
+const currentSlice = createSlice({
+  name: 'convo',
+  initialState,
+  reducers: {
+    setConversation: (state, action) => {
+      const { conversationId, parentMessageId } = action.payload;
+      state.conversationId = conversationId;
+      state.parentMessageId = parentMessageId;
+    },
+  }
+});
+//
+
+export const { setConversation } = currentSlice.actions;
+
+export default currentSlice.reducer;

src/store/index.js

@@ -0,0 +1,11 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+import convoReducer from './convoSlice.js';
+import messageReducer from './messageSlice.js'
+
+export const store = configureStore({
+  reducer: {
+    convo: convoReducer,
+    messages: messageReducer,
+  },
+});

src/store/messageSlice.js

@@ -0,0 +1,18 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = [];
+
+const currentSlice = createSlice({
+  name: 'messages',
+  initialState,
+  reducers: {
+    setMessages: (state, action) => {
+      const { payload } = action;
+      return [...payload];
+    },
+  }
+});
+
+export const { setMessages } = currentSlice.actions;
+
+export default currentSlice.reducer;