質問編集履歴
2
修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -159,4 +159,53 @@
|
|
159
159
|
setDirection("left");
|
160
160
|
};
|
161
161
|
}
|
162
|
+
|
163
|
+
//以下はあまり関係のない実装です。
|
164
|
+
|
165
|
+
const handleDelete = useCallback(
|
166
|
+
(uid: string, recordId: string) => {
|
167
|
+
const isPost = confirm("本当に投稿を削除してよろしいでしょうか?");
|
168
|
+
if (isPost) {
|
169
|
+
const newPosts = selector.filter((ele: UserRecord) => ele.recordId !== recordId);
|
170
|
+
const query = {
|
171
|
+
uid,
|
172
|
+
recordId,
|
173
|
+
newPosts,
|
174
|
+
};
|
175
|
+
dispatch(deleteUserRecord(query));
|
176
|
+
}
|
177
|
+
},
|
178
|
+
[selector]
|
179
|
+
);
|
180
|
+
|
181
|
+
return (
|
182
|
+
<>
|
183
|
+
<Head>
|
184
|
+
<title>STUDIOUS 学習記録</title>
|
185
|
+
</Head>
|
186
|
+
{selector?.length !== 0 ? (
|
187
|
+
<>
|
188
|
+
<section className={`c-section-wrapping--main`}>
|
189
|
+
{selector?.map((post) => (
|
190
|
+
<PostCard handleDelete={handleDelete} key={post.recordId} post={post} />
|
191
|
+
))}
|
192
|
+
<IconButton onClick={handlePrev}>
|
193
|
+
<FontAwesomeIcon icon={["fas", "chevron-left"]} />
|
194
|
+
</IconButton>
|
195
|
+
<IconButton onClick={handleNext}>
|
196
|
+
<FontAwesomeIcon icon={["fas", "chevron-right"]} />
|
197
|
+
</IconButton>
|
198
|
+
</section>
|
199
|
+
</>
|
200
|
+
) : (
|
201
|
+
<div className={`${classes.noPostRoot} c-section-container`}>
|
202
|
+
<h1>投稿がありません。作成してみよう!</h1>
|
203
|
+
<div className="module-spacer--medium" />
|
204
|
+
<Link href="/record/edit">
|
205
|
+
<a>投稿作成ページへ</a>
|
206
|
+
</Link>
|
207
|
+
</div>
|
208
|
+
)}
|
209
|
+
</>
|
210
|
+
);
|
162
211
|
```
|
1
修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
SNSをつくっています。使用技術は、firebaseとReactです。
|
3
3
|
firebaseのonSnapshotを使用してリアルタイムに更新したいです。
|
4
4
|
|
5
|
-
具体的には、今現在表示しているページだけをリッスンして、ページを左右のボタンで切り替えるたびにリッスンの対象を切り替えることを実現したいです!
|
5
|
+
具体的には、今現在表示しているページだけをリッスンして、ページを左右のボタンで切り替えるたびにリッスンの対象を切り替えて投稿を表示することを実現したいです!
|
6
6
|
|
7
7
|
今、実装しようと試みてますが大苦戦中です。うまく動いてくれません。
|
8
8
|
ソースコードにコメントで実装の説明を書いてます。
|