techomoro

// store/posts/actionTypes.js

export const GET_POSTS = "GET_POSTS";
export const GET_POSTS_SUCCESS = "GET_POSTS_SUCCESS";
export const GET_POSTS_FAIL = "GET_POSTS_FAIL";

export const GET_POST_DETAILS = "GET_POST_DETAILS";
export const GET_POST_DETAILS_SUCCESS = "GET_POST_DETAILS_SUCCESS";
export const GET_POST_DETAILS_FAIL = "GET_POST_DETAILS_FAIL";

techomoro

// App.js

import React from "react";
import Home from "./pages/Home";
import Singlepost from "./pages/SinglePost";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import Navigation from "./components/Navigation";

function App() {

techomoro

// assets/scss/style.scss

a {
  text-decoration: none !important;
}
.home {
  margin-top: 2rem;
  .posts {
    display: flex;
    justify-content: center;

techomoro

// components/Navigation.js

import React from "react";
import { Link } from "react-router-dom";

function Navigation() {
  return (
    <div className="navigation">
      <nav class="navbar navbar-expand navbar-dark bg-dark">
        <div class="container">

techomoro

// store/index.js

import { createStore, applyMiddleware, compose } from "redux";
import createSagaMiddleware from "redux-saga";

import rootReducer from "./reducers";
import rootSaga from "./sagas";

const sagaMiddleware = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

techomoro

// index.js

import React from "react";
import ReactDOM from "react-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/scss/style.scss";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";

techomoro

.profile-link {
  cursor: pointer;
}
.profile-menu {
  display: block;
  right: 0;
  left: auto;
}

techomoro

import Navigation from "./components/Navigation";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Navigation />
    </div>
  );
}

techomoro

import React from "react";
import DropdownLink from "./DropdownLink";

export default function Navigation() {
  return (
    <nav class="navbar navbar-light bg-light justify-content-between">
      <a class="navbar-brand">Navbar</a>
      <form class="form-inline">
        <DropdownLink />
      </form>

techomoro

import React, { useState } from "react";
import onClickOutside from "react-onclickoutside";
import DropdownList from "./DropDownList";

function DropdownLink(props) {
  const [showDropdown, setShowDropdown] = useState(false);

  DropdownLink.handleClickOutside = () => {
    setShowDropdown(false);
  };