Skip to content

Commit

Permalink
Added blog section
Browse files Browse the repository at this point in the history
bibek-magar committed Apr 30, 2020
1 parent 42598ee commit 3f6b200
Showing 8 changed files with 326 additions and 28 deletions.
1 change: 1 addition & 0 deletions packages/project1/package.json
Original file line number Diff line number Diff line change
@@ -26,6 +26,7 @@
"dependencies": {
"@reduxjs/toolkit": "^1.3.5",
"@types/react-redux": "^7.1.7",
"@types/redux-logger": "^3.0.7",
"firebase": "^7.14.2",
"react-redux": "^7.2.0",
"redux-logger": "^3.0.6"
33 changes: 21 additions & 12 deletions packages/project1/src/components/page/Blog.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,30 @@
import React, { useEffect, useState } from "react";
import { connect, useSelector, useDispatch } from "react-redux";

import { fetchBlogData, addBlogData } from "../../redux/blog/blog.slice";
import { BlogCollectionType, BlogType } from "../../redux/blog/blog.types";
import { connect, useSelector } from "react-redux";

import { addBlogData,fetchBlogData } from "../../redux/blog/blog.slice";
import { BlogType } from "../../redux/blog/blog.types";
import Button from "../atoms/Button";
import Card from "../atoms/Card";
import Input from "../atoms/Input";
import Spinner from "../atoms/Spinner";

const Blog = ({ fetchBlogData, addBlogData }: any) => {
useEffect(() => {
fetchBlogData();
}, []);

const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [formValue, setFormValue] = useState({ title: "", description: "" });

const { blogCollection, loading, error, message } = useSelector(
(state: any) => state.blogs
);

const inputChangeHandler = (event: React.FormEvent<HTMLInputElement>) => {
[event.target.name] : [event.target.value]
const inputChangeHandler = (event: any) => {
setFormValue({ ...formValue, [event.target.name]: event.target.value });
};

const clearFormData = () => {
setFormValue({ title: "", description: "" });
};

return (
@@ -30,24 +33,30 @@ const Blog = ({ fetchBlogData, addBlogData }: any) => {
<Input
placeholder={"Enter the title of Blog"}
size={"large"}
value={title}
value={formValue.title}
name="title"
onChange={inputChangeHandler}
/>
<Input
placeholder={"Enter the description of Blog"}
size={"large"}
value={description}
value={formValue.description}
name="description"
onChange={inputChangeHandler}
/>
<Button type="primary" onClick={addBlogData}>
<Button
type="primary"
onClick={() => {
addBlogData(formValue);
clearFormData();
}}
>
Add blog
</Button>
{message ? <h3>{message}</h3> : null}
</Card>
<Card title="Blog details">
{loading ? <h1>Loading...</h1> : null}
{loading ? <Spinner /> : null}
{error ? <h1>Error: {error.message}</h1> : null}
{blogCollection.map((singleBlog: BlogType) => {
return (
8 changes: 4 additions & 4 deletions packages/project1/src/redux/blog/blog.slice.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";

import { firestore } from "../../firebase/utils";
import { BlogType, BlogCollectionType } from "./blog.types";
import { BlogCollectionType,BlogType } from "./blog.types";

const BlogInitialState = {
blogCollection: [] as BlogType[],
@@ -25,10 +25,10 @@ export const fetchBlogData = createAsyncThunk("blog/fetchingBlog", async () => {

export const addBlogData = createAsyncThunk(
"blog/addingBlog",
async (title, description) => {
async (formValues: any) => {
await firestore.collection("blog").add({
title,
description,
title: formValues.title,
description: formValues.description,
});
}
);
File renamed without changes.
File renamed without changes.
31 changes: 29 additions & 2 deletions packages/project1/yarn.lock
Original file line number Diff line number Diff line change
@@ -351,6 +351,13 @@
"@types/prop-types" "*"
csstype "^2.2.0"

"@types/redux-logger@^3.0.7":
version "3.0.7"
resolved "https://registry.yarnpkg.com/@types/redux-logger/-/redux-logger-3.0.7.tgz#163f6f6865c69c21d56f9356dc8d741718ec0db0"
integrity sha512-oV9qiCuowhVR/ehqUobWWkXJjohontbDGLV88Be/7T4bqMQ3kjXwkFNL7doIIqlbg3X2PC5WPziZ8/j/QHNQ4A==
dependencies:
redux "^3.6.0"

[email protected]:
version "3.6.5"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
@@ -452,17 +459,27 @@ [email protected]:
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==

lodash-es@^4.2.1:
version "4.17.15"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==

lodash.camelcase@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=

lodash@^4.2.1:
version "4.17.15"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==

long@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==

loose-envify@^1.4.0:
loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -543,6 +560,16 @@ redux-thunk@^2.3.0:
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==

redux@^3.6.0:
version "3.7.2"
resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==
dependencies:
lodash "^4.2.1"
lodash-es "^4.2.1"
loose-envify "^1.1.0"
symbol-observable "^1.0.3"

redux@^4.0.0:
version "4.0.5"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
@@ -576,7 +603,7 @@ semver@^6.2.0:
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==

symbol-observable@^1.2.0:
symbol-observable@^1.0.3, symbol-observable@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
2 changes: 1 addition & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
@@ -15,5 +15,5 @@
"noEmit": false,
"jsx": "react"
},
"include": ["src"]
"include": ["packages/*/src"]
}
Loading

0 comments on commit 3f6b200

Please sign in to comment.