techomoro

// assets/scss/style.scss

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

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

// 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

// store/posts/saga.js

import { takeLatest, put, call } from "redux-saga/effects";

import { GET_POSTS, GET_POST_DETAILS } from "./actionTypes";

import {
  getPostsSuccess,
  getPostsFail,
  getPostDetailsSuccess,

techomoro

// store/posts/reducer.js

import {
  GET_POSTS,
  GET_POSTS_SUCCESS,
  GET_POSTS_FAIL,
  GET_POST_DETAILS,
  GET_POST_DETAILS_SUCCESS,
  GET_POST_DETAILS_FAIL,
} from "./actionTypes";

techomoro

// store/posts/actions.js

import {
  GET_POSTS,
  GET_POSTS_SUCCESS,
  GET_POSTS_FAIL,
  GET_POST_DETAILS,
  GET_POST_DETAILS_SUCCESS,
  GET_POST_DETAILS_FAIL,
} from "./actionTypes";

techomoro

// pages/Home.js

import { Container } from "react-bootstrap";
import Posts from "../components/Posts";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { getPosts } from "../store/posts/actions";

export default function Home() {
  let dispatch = useDispatch();

techomoro

// pages/SinglePost.js

import { useEffect } from "react";
import { Container } from "react-bootstrap";
import PostDetails from "../components/PostDetails";
import { useDispatch } from "react-redux";
import { getPostDetails } from "../store/posts/actions";
import { useParams } from "react-router-dom";

function SinglePost() {

techomoro

// components/Posts.js

import React from "react";
import { Card, Container, Row, Col } from "react-bootstrap";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
import Loader from "react-loader-spinner";

export default function Posts() {
  const { posts, loadingPosts } = useSelector((state) => state.PostReducer);

techomoro

// components/PostDetails.js

import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import { useSelector } from "react-redux";
import Loader from "react-loader-spinner";

export default function PostDetails() {
  const { post, loadingPostDetails } = useSelector(
    (state) => state.PostReducer