improve files organisation

src/App.jsx

@@ -2,11 +2,9 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 import { Home, Layout, List, ManageList } from './views';
 
-import { useAuth } from './api';
+import { useAuth, useShoppingListData, useShoppingLists } from '@api';
 
-import { useShoppingListData, useShoppingLists } from './api';
-
-import { useStateWithStorage } from './utils';
+import { useStateWithStorage } from '@utils';
 
 export function App() {
 	/**

src/api/firebase.js

@@ -14,7 +14,7 @@ import {
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
-import { getDaysBetweenDates, getFutureDate } from '../utils';
+import { getDaysBetweenDates, getFutureDate } from '@utils';
 import { calculateEstimate } from '@the-collab-lab/shopping-list-utils';
 
 /**

src/api/index.js

@@ -1,2 +1,2 @@
 export * from './firebase';
-export { useAuth } from './useAuth';
+export * from './useAuth';

src/components/ButtonWithIcon.jsx → src/components/custom-components/ButtonWithIcon.jsx

@@ -1,4 +1,4 @@
-export function ButtonWithIcon({ text, handleClick, icon }) {
+const ButtonWithIcon = ({ text, handleClick, icon }) => {
 	return (
 		<button
 			onClick={handleClick}
@@ -8,4 +8,6 @@ export function ButtonWithIcon({ text, handleClick, icon }) {
 			{text}
 		</button>
 	);
-}
+};
+
+export default ButtonWithIcon;

src/components/Confirm.jsx → src/components/custom-components/Confirm.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-
-import Loading from './Loading';
+import { Loading } from '@components';
 
 const Confirm = ({ open, onClose, onConfirm, children, title, loading }) => {
 	const { t } = useTranslation();

src/components/DeleteList.jsx → src/components/home-components/DeleteList.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
-import { deleteList } from '../api/firebase';
-import Confirm from './Confirm';
+import { deleteList } from '@api';
+import { Confirm } from '@components';
 
 const DeleteList = ({ user, email, listPath, listName, setListPath }) => {
 	const { t } = useTranslation();

src/components/ListForm.jsx → src/components/home-components/ListForm.jsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
-import { createList } from '../api';
+import { createList } from '@api';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { inputHasValue } from '../utils/inputValidation';
-import { stringsHaveSameValue } from '../utils/inputValidation';
+import { stringsHaveSameValue, inputHasValue } from '@utils';
 
 const ListForm = (props) => {
 	const { setMessage, setListPath, userId, userEmail, data } = props;

src/components/SingleList.jsx → src/components/home-components/SingleList.jsx

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
-import DeleteList from './DeleteList';
+import { DeleteList } from '@components';
 
-export function SingleList({ userEmail, name, path, setListPath, userId }) {
+const SingleList = ({ userEmail, name, path, setListPath, userId }) => {
 	const navigate = useNavigate();
 	function handleClick() {
 		setListPath(path);
@@ -25,4 +25,6 @@ export function SingleList({ userEmail, name, path, setListPath, userId }) {
 			/>
 		</li>
 	);
-}
+};
+
+export default SingleList;

src/components/index.js

@@ -1,11 +1,20 @@
-export * from './ListItem';
-export * from './SingleList';
-export * from './ContainerItems';
-export * from './SearchList';
-export * from './Loading';
-export * from './ButtonWithIcon';
-export * from './ErrorMessage';
-export * from './Message';
-export * from './DeleteList';
-export * from './Confirm';
-export * from './DeleteItem';
+export { default as Loading } from './loading/Loading';
+
+export { default as ButtonWithIcon } from './custom-components/ButtonWithIcon';
+export { default as ErrorMessage } from './custom-components/ErrorMessage';
+export { default as Message } from './custom-components/Message';
+export { default as ListButtons } from './custom-components/ListButtons';
+export { default as Confirm } from './custom-components/Confirm';
+
+export { default as DeleteItem } from './list-components/DeleteItem';
+export { default as ContainerItems } from './list-components/ContainerItems';
+export { default as SearchList } from './list-components/SearchList';
+export { default as ListItem } from './list-components/ListItem';
+
+export { default as NavBar } from './nav-bar/NavBar';
+export { default as NavigationLink } from './nav-bar/NavigationLink';
+export { default as NavBarContent } from './nav-bar/NavBarContent';
+
+export { default as DeleteList } from './home-components/DeleteList';
+export { default as SingleList } from './home-components/SingleList';
+export { default as ListForm } from './home-components/ListForm';

src/components/ContainerItems.jsx → src/components/list-components/ContainerItems.jsx

@@ -1,8 +1,7 @@
-import { useEffect, useState } from 'react';
-import { ListItem } from './ListItem';
-import { Fragment } from 'react';
+import { useEffect, useState, Fragment } from 'react';
+import { ListItem } from '@components';
 
-export const ContainerItems = ({
+const ContainerItems = ({
 	category,
 	newList,
 	wasRecentlyPurchased,
@@ -48,3 +47,5 @@ export const ContainerItems = ({
 		<> </>
 	);
 };
+
+export default ContainerItems;

src/components/DeleteItem.jsx → src/components/list-components/DeleteItem.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
-import { deleteItem } from '../api/firebase';
-import Confirm from './Confirm';
+import { deleteItem } from '@api';
+import { Confirm } from '@components';
 
 const DeleteItem = ({ itemName, listPath, itemId }) => {
 	const { t } = useTranslation();

src/components/ListItem.jsx → src/components/list-components/ListItem.jsx

@@ -1,12 +1,12 @@
-import DeleteItem from './DeleteItem';
+import { DeleteItem } from '@components';
 
-export function ListItem({
+const ListItem = ({
 	isRecentlyPurchased,
 	itemId,
 	listPath,
 	name,
 	updatePurchaseDate,
-}) {
+}) => {
 	return (
 		<div
 			href="/"
@@ -51,4 +51,6 @@ export function ListItem({
 			</li>
 		</div>
 	);
-}
+};
+
+export default ListItem;

src/components/SearchList.jsx → src/components/list-components/SearchList.jsx

@@ -47,4 +47,4 @@ export const SearchList = ({ data, setNewList }) => {
 	);
 };
 
-// export default SearchList;
+export default SearchList;

src/components/NavBar/NavBar.jsx → src/components/nav-bar/NavBar.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import NavBarContent from './NavBarContent';
+import { NavBarContent } from '@components';
 
-export function NavBar({ user, lists, listPath }) {
+const NavBar = ({ user, lists, listPath }) => {
 	const [isNavOpen, setIsNavOpen] = useState(false);
 
 	return (
@@ -78,4 +78,6 @@ export function NavBar({ user, lists, listPath }) {
 			</nav>
 		</>
 	);
-}
+};
+
+export default NavBar;

src/components/NavBar/NavBarContent.jsx → src/components/nav-bar/NavBarContent.jsx

@@ -1,10 +1,9 @@
 import { useTranslation } from 'react-i18next';
-import { SignOut } from '../../api/useAuth.jsx';
-import { NavigationLink } from './NavigationLink.jsx';
+import { SignOut } from '@api';
 import { useNavigate } from 'react-router-dom';
-import { ButtonWithIcon } from '../ButtonWithIcon.jsx';
+import { ButtonWithIcon, NavigationLink } from '@components';
 
-export default function NavLinks({ listPath, lists, setIsNavOpen }) {
+const NavBarContent = ({ listPath, lists, setIsNavOpen }) => {
 	const navigate = useNavigate();
 	const { t } = useTranslation();
 
@@ -60,4 +59,6 @@ export default function NavLinks({ listPath, lists, setIsNavOpen }) {
 			/>
 		</>
 	);
-}
+};
+
+export default NavBarContent;

src/components/NavBar/NavigationLink.jsx → src/components/nav-bar/NavigationLink.jsx

@@ -1,6 +1,6 @@
 import { NavLink } from 'react-router-dom';
 
-export function NavigationLink({ text, destination, handleClick, icon }) {
+const NavigationLink = ({ text, destination, handleClick, icon }) => {
 	return (
 		<NavLink
 			onClick={handleClick}
@@ -16,4 +16,6 @@ export function NavigationLink({ text, destination, handleClick, icon }) {
 			{text}
 		</NavLink>
 	);
-}
+};
+
+export default NavigationLink;

src/i18n.js

@@ -177,7 +177,7 @@ const resources = {
 			ButtonDeleteList: 'Supprimer {{listNameUppercase}}',
 			ModalDeleteListTitle: 'Supprimer la liste {{listNameUppercase}}',
 			ModalDeleteListConfirmSuppression:
-				'Voulez-vous definitivement supprimer la liste {{listNameUppercase}} ?',
+				'Voulez-vous définitivement supprimer la liste {{listNameUppercase}} ?',
 			ModalDeleteListStopUsing:
 				"Voulez-vouz arrêter d'utiliser la liste {{listNameUppercase}} ?",
 		},

src/utils/index.js

@@ -1,2 +1,3 @@
 export * from './dates';
 export * from './hooks';
+export * from './inputValidation';

src/views/Home.jsx

@@ -1,8 +1,6 @@
-import { SingleList } from '../components';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import ListForm from '../components/ListForm';
-import ErrorMessage from '../components/ErrorMessage';
+import { ErrorMessage, ListForm, SingleList } from '@components';
 
 export function Home({ data, setListPath, userId, userEmail }) {
 	const { t } = useTranslation();

src/views/Layout.jsx

@@ -1,9 +1,8 @@
 import { Outlet } from 'react-router-dom';
 import { useTranslation, Trans } from 'react-i18next';
-import { SignIn } from '../api/useAuth.jsx';
-import { NavBar } from '../components/NavBar/NavBar.jsx';
+import { SignIn } from '@api';
+import { NavBar, Loading } from '@components';
 import Groceries from '../assets/groceries.png';
-import Loading from '../components/Loading.jsx';
 
 export function Layout({ lists, listPath, user, isLoadingUser }) {
 	const { t } = useTranslation();

src/views/List.jsx

@@ -1,18 +1,14 @@
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ContainerItems } from '../components';
-import { SearchList } from '../components';
-import { useParams, useNavigate } from 'react-router-dom';
-import { updateItem, comparePurchaseUrgency } from '../api/firebase';
-import { isMoreThanADayAgo } from '../utils';
-import Loading from '../components/Loading';
-import ListButtons from '../components/ListButtons';
+import { ContainerItems, SearchList, Loading, ListButtons } from '@components';
+import { useParams } from 'react-router-dom';
+import { updateItem, comparePurchaseUrgency } from '@api';
+import { isMoreThanADayAgo } from '@utils';
 
 export function List({ data, lists, listPath, isLoadingListData }) {
 	const [newList, setNewList] = useState([]);
 	const [sortedList, setSortedList] = useState([]);
 	const { path } = useParams();
-	const navigate = useNavigate();
 	const { t } = useTranslation();
 
 	const categoryArray = [

src/views/ManageList.jsx

@@ -1,14 +1,12 @@
 import { useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
-import { addItem } from '../api/firebase';
-import { shareList } from '../api/firebase';
-import ErrorMessage from '../components/ErrorMessage';
-import Message from '../components/Message';
+import { addItem, shareList } from '@api';
+import { ErrorMessage, Message } from '@components';
 import {
 	inputHasValue,
 	inputHasOnlyNUmbers,
 	stringsHaveSameValue,
-} from '../utils/inputValidation';
+} from '@utils';
 
 export function ManageList({ data, listPath, userId, userEmail }) {
 	const { t } = useTranslation();

vite.config.js

@@ -3,6 +3,7 @@ import eslint from '@nabla/vite-plugin-eslint';
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import { VitePWA } from 'vite-plugin-pwa';
+import path from 'path';
 
 const PWAConfig = {
 	includeAssets: ['favicon.ico', 'robots.txt'],
@@ -57,6 +58,13 @@ export default defineConfig({
 			},
 		},
 	},
+	resolve: {
+		alias: {
+			'@components': path.resolve(__dirname, 'src/components'),
+			'@api': path.resolve(__dirname, 'src/api'),
+			'@utils': path.resolve(__dirname, 'src/utils'),
+		},
+	},
 	optimizeDeps: { disabled: false },
 	plugins: [
 		eslint({ cache: false, formatter: 'stylish' }),