first commit

package.json

@@ -6,9 +6,14 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.1",
+    "axios": "^0.21.1",
+    "normalize.css": "^8.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-icons": "^4.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
+    "react-toast-notifications": "^2.4.3",
     "web-vitals": "^1.1.0"
   },
   "scripts": {
@@ -17,6 +22,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
+  "proxy": "http://localhost:5000/",
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -34,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "node-sass": "^5.0.0"
   }
 }

src/App.js

@@ -1,24 +1,41 @@
-import logo from './logo.svg';
-import './App.css';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Routes from './core/routes/Routes';
+import Header from "./core/components/Header/Header";
+import Footer from './core/components/Footer/Footer';
+import { ToastProvider } from 'react-toast-notifications';
+import { IsLoggedContext } from './shared/contexts/IsLoggedContext';
+import { useEffect, useState } from 'react';
+import Loader from './core/components/Loader/Loader';
+import { LoaderContext } from './core/components/Loader/context/LoaderContext';
+
+
 
 function App() {
+  const [ isLogged, setIsLogged ] = useState(false);
+  const [ loggedUser, setLoggedUser ] = useState(null);
+  const [ isLoading, setIsLoading ] = useState(false);
+  const checkLoggedState = () => {
+    const token = localStorage.getItem('token');
+    const user = localStorage.getItem('user');
+    if (token && token !== '') {
+      setIsLogged(true); 
+      setLoggedUser(JSON.parse(user)); 
+    }
+  }
+  useEffect(checkLoggedState, []);
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <IsLoggedContext.Provider value={{isLogged, setIsLogged, loggedUser, setLoggedUser}}>
+        <LoaderContext.Provider value={{isLoading, setIsLoading}}>
+          <Header />
+          <Loader />
+          <ToastProvider>
+            <Routes />
+          </ToastProvider>
+          {isLogged && <Footer />}
+        </LoaderContext.Provider>
+      </IsLoggedContext.Provider>
+    </Router>
   );
 }
 

src/core/components/Footer/Footer.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IconContext } from 'react-icons/lib';
+import { BiHomeAlt, BiSearch, BiMessageAdd, BiHeart} from 'react-icons/bi';
+import { NavLink } from 'react-router-dom';
+
+export default function Footer() {
+
+    return (
+        <footer className="footer">
+            <IconContext.Provider value={{ className: 'icon' }}>
+                <NavLink className="link" to="/"><BiHomeAlt /></NavLink>
+                {/* <BiHomeAlt /> */}
+                <BiSearch />
+                <NavLink className="link" to="/addpost"><BiMessageAdd /></NavLink>
+                <NavLink className="link" to="/following"><BiHeart /></NavLink>
+            </IconContext.Provider>
+        </footer>
+    )
+}

src/core/components/Header/Header.jsx

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import { NavLink } from 'react-router-dom';
+import { BiUser } from 'react-icons/bi';
+import { IconContext } from 'react-icons/lib';
+import { IsLoggedContext } from '../../../shared/contexts/IsLoggedContext';
+
+
+export default function Header() {
+
+    const { isLogged } = useContext(IsLoggedContext);
+
+    return (
+        <header className="header">
+            <h1 className="header__logo">inBlog</h1>
+            <nav className="header__nav nav">
+                {isLogged && <IconContext.Provider value={{ className: 'nav__icon icon' }}>
+                    <NavLink to="/me"><BiUser /></NavLink>
+                </IconContext.Provider>}
+            </nav>
+        </header>
+    )
+}

src/core/components/Loader/Loader.jsx

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+import { LoaderContext } from './context/LoaderContext';
+
+
+export default function Loader() {
+
+    const {isLoading} = useContext(LoaderContext);
+
+    return (
+        isLoading && <div className="c-loader">
+            <div className="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+        </div>
+    )
+}

src/core/components/Loader/context/LoaderContext.jsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const LoaderContext = React.createContext();

src/core/routes/Routes.jsx

@@ -0,0 +1,41 @@
+import React, { useContext } from 'react';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import HomePage from '../../pages/HomePage/HomePage';
+import UserPage from '../../pages/UserPage/UserPage';
+import SignInPage from '../../pages/SignInPage/SignInPage';
+import SignUpPage from '../../pages/SignUpPage/SignUpPage';
+import LandingPage from '../../pages/LandingPage/LandingPage';
+import AddPost from '../../pages/AddPost/AddPost';
+import Following from '../../pages/Following/Following';
+import Error404 from '../../pages/Error404/Error404';
+import { IsLoggedContext } from '../../shared/contexts/IsLoggedContext';
+
+export default function Routes() {
+
+    const { isLogged } = useContext(IsLoggedContext);
+    return (
+        <Switch>
+            <Route path="/following">
+                { !isLogged ? <LandingPage /> : <Following />}
+            </Route>
+            <Route path="/addpost">
+                { !isLogged ? <LandingPage /> : <AddPost />}
+            </Route>
+            <Route path="/signup">
+                <SignUpPage />
+            </Route>
+            <Route path="/signin">
+                <SignInPage />
+            </Route>
+            <Route path="/me">
+                { !isLogged ? <LandingPage /> : <UserPage />}
+            </Route>
+            <Route exact path="/">
+                { isLogged ? <HomePage /> : <LandingPage />}
+            </Route>
+            <Route>
+                <Error404 />
+            </Route>
+        </Switch>
+    )
+}

src/fixMobileHeight.js

@@ -0,0 +1,10 @@
+export function fixHeight () {
+    const section$$ = document.querySelector('.section');
+    const height = window.innerHeight;
+    if (section$$) {
+        section$$.style.minHeight = `${ height - 120 }px`;
+        section$$.style.transition = `min-height 0.5s`;
+    }
+    window.addEventListener('resize', fixHeight)
+}
+

src/index.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './index.scss';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
+
     <App />
-  </React.StrictMode>,
+  ,
   document.getElementById('root')
 );
 

src/index.scss

@@ -0,0 +1,4 @@
+@import './styles/imports/settings.import';
+@import './styles/imports/generics.import';
+@import './styles/imports/elements.import';
+@import './styles/imports/blocks.import';

src/pages/AddPost/AddPost.jsx

@@ -0,0 +1,79 @@
+import axios from 'axios';
+import React, { useState } from 'react';
+import { useToasts } from 'react-toast-notifications';
+import { useHistory } from 'react-router-dom';
+
+
+export default function AddPost() {
+
+    const [ title, setTitle ] = useState('');
+    const [ body, setBody ] = useState('');
+    const [ photo, setPhoto ] = useState('');
+
+    const { addToast } = useToasts();
+    const history = useHistory();
+
+    const path = 'assets/images/default-image.jpg';
+
+    const post = {
+        title: title,
+        body: body,
+        photo: photo
+    }
+
+    const config = {headers: {Authorization: `Bearer ${localStorage.getItem('token')}`}}
+
+    const handleImageError = (el) => {
+        el.src = path;
+    }
+
+    const handleImageUplaod = (e) => {
+        const image = e.target.files[0];
+        const data = new FormData();
+        data.append('file', image);
+        data.append('upload_preset', 'inBlog');
+        data.append('cloud_name', 'tamasigerald');
+        axios.post('https://api.cloudinary.com/v1_1/tamasigerald/image/upload', data)
+        .then(function(res) {
+            setPhoto(res.data.secure_url);
+        })
+        .catch(function(err) {
+            console.log(err);
+        })
+    }
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        axios.post('/createpost', post, config)
+        .then(function(res) {
+                addToast(res.data.message, { appearance: 'success', autoDismiss: true });
+                setTimeout(() => { history.push('/') }, 1500)
+        })
+        .catch(function(err) {
+            if(err.response) {
+                addToast(err.response.data.error, { appearance: 'error', autoDismiss: true });
+            }
+        })
+    }
+
+    return (
+        <section className="section section--addpost">
+            <header className="section__header section__header--addpost">
+                <figure className="section__figure">
+                    <img className="section__photo section__photo--addpost" onError={(e) => {handleImageError(e.target)}} src={post.photo || path} alt="test"/>
+                </figure>
+            </header>
+            <article className="section__content section__content--addpost">
+                <form className="section__form" onSubmit={(e) => {handleSubmit(e)}}>
+                    <input className="section__form__input" type="text" name="title" placeholder="title" onChange={(e) => {setTitle(e.target.value)}}/>
+                    <div className="upload">
+                        <input className="section__form__input section__form__input--file upload--file" type='file' name="photo" placeholder="photo" onChange={(e) => {handleImageUplaod(e)}}/>
+                        <button type="button" className="btn btn--primary btn--file">Upload file</button>
+                    </div>
+                    <textarea className="section__form__input" type="text" name="body" placeholder="body" onChange={(e) => {setBody(e.target.value)}}/>
+                    <button type="submit" className="btn btn--success btn--form">Post</button>
+                </form>
+            </article>
+        </section>
+    )
+}

src/pages/Error404/Error404.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+export default function Error404() {
+
+    const history = useHistory();
+
+    const handleClick = (route) => {
+        history.push(route);
+    }
+
+    return (
+        <section className="section section--error">
+            <header className="section__header">
+                <h2 className="section__title">Welcome to <span className="section__logo">inBlog</span></h2>
+                <h3 className="section__subt">Made for real bloggers</h3>
+                <p className="section__text">The page you are trying to reach was not found! Please, visit home page!</p>
+                <div className="section__btns">
+                    <button className="btn btn--primary" onClick={() => {handleClick('/')}}>Home</button>
+                </div>
+            </header>
+        </section>
+    )
+}