redeciding directory structure for last time hopefully (#74)

jest.config.js

@@ -1,8 +1,8 @@
 module.exports = {
     clearMocks: true,
     moduleNameMapper: {
-        '\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/__mocks__/fileMock.js',
-        '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
+        '\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/src/common/testMocks/fileMock.js',
+        '\\.(css|less)$': '<rootDir>/src/common/testMocks/styleMock.js',
     },
 
     transform: {

src/App.js

@@ -2,17 +2,17 @@ import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { EventsProvider } from './contexts/EventsContext';
 import { CitiesProvider } from './contexts/CitiesContext';
-import Home from './components/Home';
-import EventsPage from './components/EventsPage';
-import AboutUs from './components/AboutUs';
-import NavBar from './components/NavBar';
+import Home from './components/Home/Home';
+import EventsPage from './components/EventsPage/EventsPage';
+import AboutUs from './components/AboutUs/AboutUs';
+import Navbar from './components/Navbar/Navbar';
 import './index.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 function App() {
   return (
     <Router>
-      <NavBar />
+      <Navbar />
 
       <CitiesProvider>
         <EventsProvider>

src/components/AboutUs.js → src/components/AboutUs/AboutUs.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import jona from "../assets/pictures/jona.png";
-import court from "../assets/pictures/court.png";
-import andrew from "../assets/pictures/andrew.png";
-import cam from "../assets/pictures/cam.png";
-import hannah from "../assets/pictures/hannah.png";
-import "../index.css"; // Import index.css from App.js
+import jona from "./jona.png";
+import court from "./court.png";
+import andrew from "./andrew.png";
+import cam from "./cam.png";
+import hannah from "./hannah.png";
 
 function AboutUs() {
   const teamMembers = [

__tests__/components/AboutUs.test.js → src/components/AboutUs/AboutUs.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import AboutUs from '../../src/components/AboutUs';
+import AboutUs from './AboutUs';
 
 describe('AboutUs Component', () => {
   beforeEach(() => {

src/components/EventMap.js → src/components/EventMap/EventMap.js

@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react';
 import { MapContainer, TileLayer, useMap } from 'react-leaflet';
 import L from 'leaflet';
-import { createCustomIcon } from '../assets/icons';
+import { createCustomIcon } from '../../utils/icons';
 import 'leaflet.markercluster/dist/leaflet.markercluster';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
-import MapCenterUpdater from './MapCenterUpdater';
-import useCurrentPosition from '../hooks/useCurrentPosition';
+import MapCenterUpdater from '../MapCenterUpdater/MapCenterUpdater';
+import useCurrentPosition from '../../hooks/useCurrentPosition';
 
 function ClusteredMarkers({ filteredEvents, customIcon }) {
   const map = useMap();

src/components/EventsPage.js → src/components/EventsPage/EventsPage.js

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from 'react';
-import EventsContext from '../contexts/EventsContext';
-import filterEvents from '../hooks/filterEvents';
-import Searchbar from './Searchbar';
+import EventsContext from '../../contexts/EventsContext';
+import filterEvents from '../../hooks/filterEvents';
+import Searchbar from '../Searchbar/Searchbar';
 
 function EventsPage() {
   const { events } = useContext(EventsContext);

src/components/Home.js → src/components/Home/Home.js

@@ -1,9 +1,9 @@
 import React, { useState, useContext } from 'react';
-import EventsContext from '../contexts/EventsContext';
-import filterEvents from '../hooks/filterEvents';
-import Searchbar from './Searchbar';
-import EventMap from './EventMap';
-import Sidebar from './Sidebar';
+import EventsContext from '../../contexts/EventsContext';
+import filterEvents from '../../hooks/filterEvents';
+import Searchbar from '../Searchbar/Searchbar';
+import EventMap from '../EventMap/EventMap';
+import Sidebar from '../Sidebar/Sidebar';
 
 import 'leaflet/dist/leaflet.css';
 

src/components/NavBar.js → src/components/Navbar/Navbar.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import logo from '../assets/logo.svg';
+import logo from '../../common/logo.svg';
 
-function NavBar() {
+function Navbar() {
   const getNavLinkClass = ({ isActive }) => isActive ? 'nav-link active' : 'nav-link';
 
   return (
@@ -29,4 +29,4 @@ function NavBar() {
   );
 }
 
-export default NavBar;
+export default Navbar;

src/components/Searchbar.js → src/components/Searchbar/Searchbar.js

@@ -1,9 +1,8 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
 import DatePicker from 'react-datepicker';
-import CitiesContext from '../contexts/CitiesContext';
-import Sidebar from './Sidebar';
-
 import 'react-datepicker/dist/react-datepicker.css';
+import Sidebar from '../Sidebar/Sidebar';
+import CitiesContext from '../../contexts/CitiesContext';
 
 function Searchbar({ searchStart, setStartDate, searchEnd, setEndDate, setSearchLocation }) {
   const cities = useContext(CitiesContext);

src/contexts/EventsContext.js

@@ -1,5 +1,5 @@
 import React, { createContext, useState, useEffect } from 'react';
-import { transformEvents } from '../assets/transformEvents';
+import { transformEvents } from '../utils/transformEvents';
 
 const EventsContext = createContext();
 

__tests__/hooks/useCurrentPosition.test.js → src/hooks/useCurrentPosition.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, act } from '@testing-library/react';
-import useCurrentPosition from '../../src/hooks/useCurrentPosition';
+import useCurrentPosition from './useCurrentPosition';
 
 // Mock component that uses the hook
 function MockComponent({ defaultPosition }) {

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
+import './index.css';
 
 const rootElement = document.getElementById('root');
 const root = ReactDOM.createRoot(rootElement);

src/assets/icons.js → src/utils/icons.js

@@ -1,5 +1,5 @@
 import L from 'leaflet';
-import mapMarkerSvg from './mapMarker.svg';
+import mapMarkerSvg from '../common/mapMarker.svg';
 
 export const createCustomIcon = () => {
   return new L.Icon({

__tests__/assets/transformEvents.test.js → src/utils/transformEvents.test.js

@@ -1,5 +1,5 @@
-import { transformEvents } from '../../src/assets/transformEvents';
-import Event, { Artist, Venue } from '../../src/models/Event';
+import { transformEvents } from './transformEvents';
+import Event, { Artist, Venue } from '../models/Event';
 
 const mockEvents = [
   {