Skip to content

Commit 7ca70e5

Browse files
kossiecoderkossiecoder
committed
67
1 parent f1b881d commit 7ca70e5

File tree

3 files changed

+191
-14
lines changed

3 files changed

+191
-14
lines changed

‎db.json

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -804,6 +804,174 @@
804804
"publish": false,
805805
"createdAt": 1657175359019,
806806
"id": 115
807+
},
808+
{
809+
"title": "1",
810+
"body": "1",
811+
"publish": false,
812+
"createdAt": 1657238685847,
813+
"id": 116
814+
},
815+
{
816+
"title": "1",
817+
"body": "12",
818+
"publish": false,
819+
"createdAt": 1657238687726,
820+
"id": 117
821+
},
822+
{
823+
"title": "3",
824+
"body": "3",
825+
"publish": false,
826+
"createdAt": 1657239120946,
827+
"id": 118
828+
},
829+
{
830+
"title": "3",
831+
"body": "3",
832+
"publish": false,
833+
"createdAt": 1657239122621,
834+
"id": 119
835+
},
836+
{
837+
"title": "1",
838+
"body": "1",
839+
"publish": false,
840+
"createdAt": 1657239812739,
841+
"id": 120
842+
},
843+
{
844+
"title": "1",
845+
"body": "1",
846+
"publish": false,
847+
"createdAt": 1657239814506,
848+
"id": 121
849+
},
850+
{
851+
"title": "4",
852+
"body": "4",
853+
"publish": false,
854+
"createdAt": 1657239916457,
855+
"id": 122
856+
},
857+
{
858+
"title": "4",
859+
"body": "4",
860+
"publish": false,
861+
"createdAt": 1657239917945,
862+
"id": 123
863+
},
864+
{
865+
"title": "2",
866+
"body": "2",
867+
"publish": false,
868+
"createdAt": 1657240010665,
869+
"id": 124
870+
},
871+
{
872+
"title": "2",
873+
"body": "2",
874+
"publish": false,
875+
"createdAt": 1657240012779,
876+
"id": 125
877+
},
878+
{
879+
"title": "2",
880+
"body": "2",
881+
"publish": false,
882+
"createdAt": 1657240147188,
883+
"id": 126
884+
},
885+
{
886+
"title": "2",
887+
"body": "2",
888+
"publish": false,
889+
"createdAt": 1657240162434,
890+
"id": 127
891+
},
892+
{
893+
"title": "f",
894+
"body": "f",
895+
"publish": false,
896+
"createdAt": 1657240197883,
897+
"id": 128
898+
},
899+
{
900+
"title": "f",
901+
"body": "f",
902+
"publish": false,
903+
"createdAt": 1657240200199,
904+
"id": 129
905+
},
906+
{
907+
"title": "f",
908+
"body": "f",
909+
"publish": false,
910+
"createdAt": 1657240212897,
911+
"id": 130
912+
},
913+
{
914+
"title": "f",
915+
"body": "f",
916+
"publish": false,
917+
"createdAt": 1657240407068,
918+
"id": 131
919+
},
920+
{
921+
"title": "f",
922+
"body": "f",
923+
"publish": false,
924+
"createdAt": 1657240408910,
925+
"id": 132
926+
},
927+
{
928+
"title": "f",
929+
"body": "f",
930+
"publish": false,
931+
"createdAt": 1657240415516,
932+
"id": 133
933+
},
934+
{
935+
"title": "f",
936+
"body": "f",
937+
"publish": false,
938+
"createdAt": 1657240423386,
939+
"id": 134
940+
},
941+
{
942+
"title": "f",
943+
"body": "f",
944+
"publish": false,
945+
"createdAt": 1657240424008,
946+
"id": 135
947+
},
948+
{
949+
"title": "f",
950+
"body": "f",
951+
"publish": false,
952+
"createdAt": 1657240424604,
953+
"id": 136
954+
},
955+
{
956+
"title": "f",
957+
"body": "f",
958+
"publish": false,
959+
"createdAt": 1657240424829,
960+
"id": 137
961+
},
962+
{
963+
"title": "f",
964+
"body": "f",
965+
"publish": false,
966+
"createdAt": 1657240425122,
967+
"id": 138
968+
},
969+
{
970+
"title": "f",
971+
"body": "f",
972+
"publish": false,
973+
"createdAt": 1657240426359,
974+
"id": 139
807975
}
808976
]
809977
}

‎src/components/BlogForm.js

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useState } from 'react';
1+
import { useEffect, useState, useRef } from 'react';
22
import axios from 'axios';
33
import { useHistory, useParams } from 'react-router';
44
import propTypes from 'prop-types';
@@ -17,7 +17,8 @@ const BlogForm = ({ editing }) => {
1717
const [originalPublish, setOriginalPublish] = useState(false);
1818
const [titleError, setTitleError] = useState(false);
1919
const [bodyError, setBodyError] = useState(false);
20-
const [toasts, setToasts] = useState([]);
20+
const [, setToastRerender] = useState(false);
21+
const toasts = useRef([]);
2122

2223
useEffect(() => {
2324
if (editing) {
@@ -63,12 +64,12 @@ const BlogForm = ({ editing }) => {
6364
}
6465

6566
const deleteToast = (id) => {
66-
console.log(toasts);
67-
const filteredToasts = toasts.filter(toast => {
67+
const filteredToasts = toasts.current.filter(toast => {
6868
return toast.id !== id;
6969
});
7070

71-
setToasts(filteredToasts);
71+
toasts.current = filteredToasts;
72+
setToastRerender(prev => !prev);
7273
}
7374

7475
const addToast = (toast) => {
@@ -77,8 +78,10 @@ const BlogForm = ({ editing }) => {
7778
...toast,
7879
id
7980
}
80-
setToasts(prev => [...prev, toastWithId]);
81-
console.log('add', toasts);
81+
82+
toasts.current = [...toasts.current, toastWithId];
83+
setToastRerender(prev => !prev);
84+
8285
setTimeout(() => {
8386
deleteToast(id);
8487
}, 5000);
@@ -121,7 +124,7 @@ const BlogForm = ({ editing }) => {
121124
return (
122125
<div>
123126
<Toast
124-
toasts={toasts}
127+
toasts={toasts.current}
125128
deleteToast={deleteToast}
126129
/>
127130
<h1>{editing ? 'Edit' : 'Create'} a blog post</h1>

‎src/components/BlogList.js

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import axios from 'axios';
2-
import { useState, useEffect, useCallback } from 'react';
2+
import { useState, useEffect, useCallback, useRef } from 'react';
33
import Card from '../components/Card';
44
import { useHistory } from 'react-router';
55
import LoadingSpinner from '../components/LoadingSpinner';
@@ -20,7 +20,8 @@ const BlogList = ({ isAdmin }) => {
2020
const [numberOfPosts, setNumberOfPosts] = useState(0);
2121
const [numberOfPages, setNumberOfPages] = useState(0);
2222
const [searchText, setSearchText] = useState('');
23-
const [toasts, setToasts] = useState([]);
23+
const [, setToastRerender] = useState(false);
24+
const toasts = useRef([]);
2425
const limit = 5;
2526

2627
useEffect(() => {
@@ -61,11 +62,12 @@ const BlogList = ({ isAdmin }) => {
6162
}, []);
6263

6364
const deleteToast = (id) => {
64-
const filteredToasts = toasts.filter(toast => {
65+
const filteredToasts = toasts.current.filter(toast => {
6566
return toast.id !== id;
6667
});
6768

68-
setToasts(filteredToasts);
69+
toasts.current = filteredToasts;
70+
setToastRerender(prev => !prev);
6971
}
7072

7173
const addToast = (toast) => {
@@ -74,7 +76,11 @@ const BlogList = ({ isAdmin }) => {
7476
...toast,
7577
id
7678
}
77-
setToasts(prev => [...prev, toastWithId]);
79+
toasts.current = [
80+
...toasts.current,
81+
toastWithId
82+
];
83+
setToastRerender(prev => !prev);
7884

7985
setTimeout(() => {
8086
deleteToast(id);
@@ -131,7 +137,7 @@ const BlogList = ({ isAdmin }) => {
131137
return (
132138
<div>
133139
<Toast
134-
toasts={toasts}
140+
toasts={toasts.current}
135141
deleteToast={deleteToast}
136142
/>
137143
<input

0 commit comments

Comments
 (0)