Restructure project directory

package.json

@@ -10,6 +10,7 @@
     "bootstrap": "^5.0.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-markdown": "^2.2.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",

src/components/AddJournal.js → src/components/AddJournal/AddJournal.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-alert */
 import { React, useState } from 'react';
 import { Row, Col, Form, Button } from 'react-bootstrap';
-import { showSuccessMessage, showErrorMessage } from "../helpers/alerts"
-import { JournalValidation } from '../helpers/validate';
+import { showSuccessMessage, showErrorMessage } from "../../helpers/alerts"
+import { JournalValidation } from '../../helpers/validate';
 
 function AddJournal() {
   const [title, setTitle] = useState('');

src/pages/Login.js → src/components/Authentication/Login/Login.js

@@ -5,10 +5,10 @@
 /* eslint-disable react/no-unused-state */
 /* eslint-disable react/state-in-constructor */
 import { React, useState } from 'react';
-import '../styles/Login.css';
+import './Login.css';
 import { Col, Row, Form, Button } from 'react-bootstrap';
-import { showSuccessMessage, showErrorMessage } from '../helpers/alerts';
-import { LoginValidation } from '../helpers/validate';
+import { showSuccessMessage, showErrorMessage } from '../../../helpers/alerts';
+import { LoginValidation } from '../../../helpers/validate';
 
 function Login() {
   const [details, setDetails] = useState({

src/pages/SignUp.js → src/components/Authentication/Signup/SignUp.js

@@ -1,9 +1,9 @@
 /* eslint-disable react/function-component-definition */
 import { React, useState } from 'react';
 import { Row, Col, Form, Button } from 'react-bootstrap';
-import { showSuccessMessage, showErrorMessage } from '../helpers/alerts';
-import { SignupValidation } from '../helpers/validate';
-import '../styles/Signup.css';
+import { showSuccessMessage, showErrorMessage } from '../../../helpers/alerts';
+import { SignupValidation } from '../../../helpers/validate';
+import './Signup.css';
 
 const SignUp = () => {
   const [details, setDetails] = useState({

src/styles/Header.css → src/components/Landing/Header/Header.css

@@ -1,5 +1,5 @@
 .header {
-  background-image: url('../assets/bg.webp');
+  background-image: url('../../../assets/bg.webp');
   height: 550px;
   background-size: 150vw;
   background-repeat: no-repeat;

src/components/Header.js → src/components/Landing/Header/Header.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
-import '../styles/Header.css';
+import './Header.css';
 import { Button, Jumbotron } from 'react-bootstrap';
 import Container from 'react-bootstrap/Container';
 import {Link} from "react-router-dom";

src/components/LandingSection.js → src/components/Landing/LandingSection/LandingSection.js

@@ -1,10 +1,10 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
-import '../styles/LandingSection.css';
+import './LandingSection.css';
 import { Col, Container, Row, Image } from 'react-bootstrap';
-import Img from '../assets/section-img.webp';
-import ClockImg from '../assets/clock.webp';
-import TalkingImg from '../assets/talking.webp';
+import Img from '../../../assets/section-img.webp';
+import ClockImg from '../../../assets/clock.webp';
+import TalkingImg from '../../../assets/talking.webp';
 
 function LandingSection() {
   return (

src/components/index.js

@@ -0,0 +1,7 @@
+export * from './marginals';
+
+export { default as AddJournal} from './AddJournal/AddJournal';
+export { default as Login } from './Authentication/Login/Login';
+export { default as SignUp } from './Authentication/Signup/SignUp';
+export { default as Header } from './Landing/Header/Header';
+export { default as LandingSection } from './Landing/LandingSection/LandingSection';

src/components/Footer.js → src/components/marginals/Footer/Footer.js

@@ -1,10 +1,10 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
-import '../styles/Footer.css';
+import './Footer.css';
 import { Container, Row, Col } from 'react-bootstrap';
 import { ImTwitter, ImMail, ImGithub } from 'react-icons/im';
 import { IoLogoSlack } from 'react-icons/io';
-import RocketImg from '../assets/rocket.webp';
+import RocketImg from '../../../assets/rocket.webp';
 
 function Footer() {
   return (

src/components/Navigation.js → src/components/marginals/Navbar/Navigation.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import '../styles/Navigation.css';
+import './Navigation.css';
 import { Navbar, Nav } from 'react-bootstrap';
 import { LinkContainer } from 'react-router-bootstrap';
-import Logo from '../assets/logo.webp';
-import SearchBar from './Search';
+import Logo from '../../../assets/logo.webp';
+import { SearchBar } from '../index';
 
 function Navigation() {
   return (

src/components/Search.js → src/components/marginals/Search/Search.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FiSearch } from 'react-icons/fi';
-import '../index.css';
+import '../../../index.css';
 
 function SearchBar() {
   return (

src/components/marginals/index.js

@@ -0,0 +1,5 @@
+/* eslint-disable import/no-cycle */
+
+export { default as Footer } from "./Footer/Footer";
+export { default as Navbar } from "./Navbar/Navigation";
+export { default as SearchBar } from "./Search/Search";

src/components/AddJournal.test.js → src/components/tests/AddJournal.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import AddJournal from './AddJournal';
+import AddJournal from '../index';
 
 test('Add Journal renders the form correctly', () => {
   const { getByText, getByLabelText } = render(<AddJournal />);

src/components/Login.test.js → src/components/tests/Login.test.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import Login from '../pages/Login';
+import Login from '../index';
 
 test('Login renders the form correctly', () => {
   const { getByText, getByLabelText } = render(<Login />);

src/components/SignUp.test.js → src/components/tests/SignUp.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import SignUp from '../pages/SignUp';
+import SignUp from '../index';
 
 test('renders the form correctly', () => {
   const { getByText, getByLabelText } = render(<SignUp />);

src/index.js

@@ -3,20 +3,13 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { Route, BrowserRouter as Router, Switch, Redirect } from 'react-router-dom';
-import Navigation from './components/Navigation';
-import Home from './pages/Home';
-import Manifesto from './pages/Manifesto';
-import Journal from './pages/Journal';
-import Contact from './pages/Contact';
-import Login from './pages/Login';
-import SignUp from './pages/SignUp';
-import Footer from './components/Footer';
-import Header from './components/Header';
+import { Journal, Contact, Manifesto, Home } from './pages';
+import { Footer, Login, SignUp, Header, Navbar } from './components';
 
 function App() {
   return (
     <Router>
-      <Navigation />
+      <Navbar />
       <Switch>
         <Route path='/' exact component={Home} />
         <Route path='/manifesto' exact component={Manifesto} />

src/pages/Contact.js → src/pages/Contact/Contact.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import '../styles/Contact.css';
+import './Contact.css';
 import { Container, Row, Col, Form, Button } from 'react-bootstrap';
 import { ImTwitter, ImMail, ImGithub } from 'react-icons/im';
 import { FaGitter } from 'react-icons/fa';

src/pages/Home.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import Header from '../components/Header';
-import LandingSection from '../components/LandingSection';
-import "../styles/Header.css"
+import { Header, LandingSection } from '../components';
+import "../components/Landing/Header/Header.css"
 
 function Home() {
   return (

src/pages/Journal.js → src/pages/Journal/Journal.js

@@ -2,12 +2,11 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
 import { Col, Row, Container, Table } from 'react-bootstrap';
-import "../styles/Journal.css"
 
-import AddJournal from '../components/AddJournal';
+import { AddJournal } from '../../components';
 
 const Journal = () => (
-  <Container className='journal-padding'>
+  <Container style={{"padding-top": 130}}>
     <h1 className='text-center'>Journals</h1>
     <AddJournal />
   </Container>

src/pages/Manifesto.js → src/pages/Manifesto/Manifesto.js

@@ -2,14 +2,14 @@
 /* eslint-disable react/function-component-definition */
 /* eslint-disable import/order */
 import React from 'react';
-import '../styles/Manifesto.css';
+import './Manifesto.css';
 import { Container, Row, Col, Image } from 'react-bootstrap';
-import StandingImg from '../assets/human-2.webp';
-import SittingImg from '../assets/human-1.webp';
-import ImgOne from '../assets/manifesto-img-1.webp';
-import WalkingImg from '../assets/walking-man.webp';
-import PeersImg from '../assets/peers.webp';
-import HandsIcon from '../assets/hands-icon.webp';
+import StandingImg from '../../assets/human-2.webp';
+import SittingImg from '../../assets/human-1.webp';
+import ImgOne from '../../assets/manifesto-img-1.webp';
+import WalkingImg from '../../assets/walking-man.webp';
+import PeersImg from '../../assets/peers.webp';
+import HandsIcon from '../../assets/hands-icon.webp';
 import { ImTwitter, ImMail, ImGithub } from 'react-icons/im';
 
 const Manifesto = () => (

src/pages/index.js

@@ -0,0 +1,4 @@
+export { default as Contact } from './Contact/Contact';
+export { default as Journal } from './Journal/Journal';
+export { default as Manifesto } from './Manifesto/Manifesto';
+export { default as Home } from './Home';