Merge pull request #98 from Mayank0255/refactor/style-format-1

Restructure The File Structure And Adopt Atomic Design

Author: Mayank0255

package.json

@@ -31,6 +31,7 @@
     "redux-thunk": "^2.4.1",
     "reselect": "^4.1.5",
     "sass": "^1.45.2",
+    "styled-system": "^5.1.5",
     "uuid": "^8.3.2"
   },
   "scripts": {

src/App.js

@@ -1,12 +1,26 @@
 import React, {useEffect} from 'react';
 import {Provider} from 'react-redux';
+import {Switch} from 'react-router-dom';
+
 import store from './redux/store';
 import setAuthToken from './redux/auth/auth.utils';
 import {loadUser} from './redux/auth/auth.actions';
-import RoutesTree from './RoutesTree';
 
-import Header from './components/Header/Header.component';
+import Header from './components/organisms/Header/Header.component';
 import Alert from './components/Alert/Alert.component';
+import HomePage from './modules/HomePage/HomePage.component';
+import QuestionsPage from './modules/QuestionsPage/QuestionsPage.component';
+import AllTagsPage from './modules/AllTagsPage/AllTagsPage.component';
+import AllUsersPage from './modules/AllUsersPage/AllUsersPage.component';
+import Register from './modules/Register/Register.component';
+import Login from './modules/Login/Login.component';
+import Post from './modules/Post/Post.component';
+import PostForm from './modules/PostForm/PostForm.component';
+import TagPage from './modules/TagPage/TagPage.component';
+import ProfilePage from './modules/ProfilePage/ProfilePage.component';
+import NotFound from './modules/NotFound/NotFound.component';
+
+import { BaseRoute, LayoutRoute } from './Router';
 
 import './App.css';
 
@@ -24,7 +38,84 @@ const App = () => {
       <div className='App'>
         <Header />
         <Alert />
-        <RoutesTree />
+        <Switch>
+          <LayoutRoute
+            exact
+            path='/'
+            title='CLONE Stack Overflow - Where Developers Learn, Share, & Build Careers'
+          >
+            <HomePage/>
+          </LayoutRoute>
+          <LayoutRoute
+            exact
+            path='/questions'
+            title='All Questions - CLONE Stack Overflow'
+          >
+            <QuestionsPage/>
+          </LayoutRoute>
+          <LayoutRoute
+            exact
+            path='/tags'
+            title='Tags - CLONE Stack Overflow'
+          >
+            <AllTagsPage/>
+          </LayoutRoute>
+          <LayoutRoute
+            exact
+            path='/users'
+            title='Users - CLONE Stack Overflow'
+          >
+            <AllUsersPage/>
+          </LayoutRoute>
+          <BaseRoute
+            exact
+            path='/register'
+            title='Sign Up - CLONE Stack Overflow'
+          >
+            <Register/>
+          </BaseRoute>
+          <BaseRoute
+            exact
+            path='/login'
+            title='Log In - CLONE Stack Overflow'
+          >
+            <Login/>
+          </BaseRoute>
+          <LayoutRoute
+            exact
+            path='/questions/:id'
+            title='Users - CLONE Stack Overflow'
+          >
+            <Post/>
+          </LayoutRoute>
+          <LayoutRoute
+            exact
+            path='/users/:id'
+            title='Users - CLONE Stack Overflow'
+          >
+            <ProfilePage/>
+          </LayoutRoute>
+          <LayoutRoute
+            exact
+            path='/tags/:tagname'
+            title='Users - CLONE Stack Overflow'
+          >
+            <TagPage/>
+          </LayoutRoute>
+          <BaseRoute
+            exact
+            path='/add/question'
+            title='Ask a Question - CLONE Stack Overflow'
+          >
+            <PostForm/>
+          </BaseRoute>
+          <BaseRoute
+            path='*'
+            title='Error 404'
+          >
+            <NotFound/>
+          </BaseRoute>
+        </Switch>
       </div>
     </Provider>
   );

src/Router.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+import LayoutWrapper from './components/organisms/LayoutWrapper/LayoutWrapper.component';
+
+import usePageTitle from './hooks/usePageTitle';
+
+export const LayoutRoute = ({ title, children, ...props }) => {
+  usePageTitle(title);
+
+  return (
+    <Route {...props}>
+      <LayoutWrapper>
+        {children}
+      </LayoutWrapper>
+    </Route>
+  )
+}
+
+export const BaseRoute = ({ title, children, ...props }) => {
+  usePageTitle(title);
+
+  return (
+    <Route {...props}>
+      {children}
+    </Route>
+  )
+}

src/RoutesTree.js

@@ -0,0 +1,25 @@
+import axios from 'axios';
+
+import {
+  allAnswersData as _allAnswersData,
+  createSingleAnswer as _createSingleAnswer,
+  deleteSingleAnswer as _deleteSingleAnswer
+} from './urls';
+
+export const allAnswersData = (id) => {
+  return axios.get(_allAnswersData.replace('{id}', id));
+}
+
+export const createSingleAnswer = (postId, formData) => {
+  const config_headers = {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  };
+
+  return axios.post(_createSingleAnswer.replace('{postId}', postId), formData, config_headers);
+}
+
+export const deleteSingleAnswer = (AnswerId) => {
+  return axios.delete(_deleteSingleAnswer.replace('{AnswerId}', AnswerId));
+}

src/api/answersApi.js

@@ -0,0 +1,33 @@
+import axios from 'axios';
+
+import {loadUserData as _loadUserData, registerUser as _registerUser, loginUser as _loginUser} from './urls';
+
+export const loadUserData = () => {
+  return axios.get(_loadUserData);
+};
+
+export const registerUser = (username, password) => {
+  const config_headers = {
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: "application/json",
+    },
+  };
+
+  const body = JSON.stringify({ username, password });
+
+  return axios.post(_registerUser, body, config_headers);
+};
+
+export const loginUser = (username, password) => {
+  const config_headers = {
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: "application/json",
+    },
+  };
+
+  const body = JSON.stringify({username, password});
+
+  return axios.post(_loginUser, body, config_headers);
+};

src/api/authApi.js

@@ -0,0 +1,25 @@
+import axios from 'axios';
+
+import {
+  allCommentsData as _allCommentsData,
+  createSingleComment as _createSingleComment,
+  deleteSingleComment as _deleteSingleComment
+} from './urls';
+
+export const allCommentsData = (id) => {
+  return axios.get(_allCommentsData.replace('{id}', id));
+}
+
+export const createSingleComment = (postId, formData) => {
+  const config_headers = {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  };
+
+  return axios.post(_createSingleComment.replace('{postId}', postId), formData, config_headers);
+}
+
+export const deleteSingleComment = (CommentId) => {
+  return axios.delete(_deleteSingleComment.replace('{CommentId}', CommentId));
+}

src/api/commentsApi.js

@@ -0,0 +1,35 @@
+import axios from 'axios';
+
+import {
+  allPostsData as _allPostsData,
+  singlePostData as _singlePostData,
+  allTagPostsData as _allTagPostsData,
+  createSinglePost as _createSinglePost,
+  deleteSinglePost as _deleteSinglePost
+} from './urls';
+
+export const allPostsData = () => {
+  return axios.get(_allPostsData);
+}
+
+export const singlePostData = (id) => {
+  return axios.get(_singlePostData.replace('{id}', id));
+}
+
+export const allTagPostsData = (tagName) => {
+  return axios.get(_allTagPostsData.replace('{tagName}', tagName));
+}
+
+export const createSinglePost = (formData) => {
+  const config_headers = {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  };
+
+  return axios.post(_createSinglePost, formData, config_headers);
+}
+
+export const deleteSinglePost = (id) => {
+  return axios.delete(_deleteSinglePost.replace('{id}', id));
+}

src/api/postsApis.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+import { allTagsData as _allTagsData, singleTagData as _singleTagData } from './urls';
+
+export const allTagsData = () => {
+  return axios.get(_allTagsData);
+}
+
+export const singleTagData = (tagName) => {
+  return axios.get(_singleTagData.replace('{tagName}', tagName));
+}