反応とappwriteでフォーラムを作成すること-パート2


ようこそ、このマルチパートシリーズの第2部への反応とappwriteでフォーラムを作成する.あなたがすでにそれを見なかったならば、行って、チェックアウト第1部.既に読んで?グレート.割れましょう!
この部分は、おそらく短い1つ-私はAppWrite機能を使用し始めるために独自の記事でポストを追加したい.どうぞお待ちください

データベース


まず、AppWriteコンソールに向かい、「データベース」をクリックします.我々は、カテゴリーのために我々のポストを持つ新しいコレクションを必要とするつもりです.「コレクションを追加」をクリックし、次のようにプロンプトを入力します.

属性


作成したコレクションの属性タブに頭を追加し、次の属性を追加します.
属性ID
種類
サイズ
必要
アレイ
デフォルト値
カテゴリ
文字列
255
はい
ユーザID
文字列
255
はい
タイトル
文字列
255
なし
内容
文字列
255
なし
著者
文字列
255
なし

インデックス


作成したコレクションのインデックスタブに頭を付け、次のインデックスを追加します.
インデックスキー
種類
属性
ユーザID
キー
UserID ( ASC )
カテゴリ
キー
カテゴリID ( ASC )

💾 新しいファイル


プロジェクトフォルダにいることを確認するには、次のコマンドを実行して、作成したいくつかの新しいテンプレートファイルを取得します.
git pull
次のような新しいファイルが表示されます.

これらのファイルは、カテゴリリストのリストに戻り、2つの新しいUI要素としてカテゴリリストに戻り、新しい記事を作成します.

🖱 カテゴリをクリック


最初に、それがクリックされるとき、各々のカテゴリーに『入る』ことができる機能を加える必要があります.移動するsrc/Components/Forum/Categories/Category/Category.js そして次のように更新します.
export function Category(props){
    const {id, name, description} = props;

    const navigate = useNavigate();

    return (
        <Card style={{marginTop: '1rem'}}>
            <CardActionArea onClick={() => {
                // Navigate to the 'posts' route with the 'id' property of the category ID.
                navigate(`/posts?id=${id}`);
            }} >
                <CardContent>
                    <Typography gutterBottom variant="h5" component="div">
                        {name}
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        {description}
                    </Typography>
                </CardContent>
            </CardActionArea>
        </Card>
    )
}
また、あなたに入る必要があるでしょうsrc/Components/Forum/Categories/Categories.js 次のように更新します.
return categories.map((category) => (
        <Category key={category.$id} id={category.$id} name={category.name} description={category.description} />
));
すべてを修正しました(以前に説明した新しいファイルをダウンロードするなど).

✉️ リスト投稿


“偽”の記事を見て非常に楽しいされていません-も便利です.私は先に行って、データベースにテストポストを追加しました.
ヘッドオーバーsrc/Components/Forum/Posts/Posts.js を返します.
const [searchParams, setSearchParams] = useSearchParams();
const navigate = useNavigate();

function fetchPosts(){
    api.listDocuments(REACT_APP_POSTS_COLLECTION, [Query.equal('categoryId', searchParams.get("id"))]).then((result) => {
        setPosts(result.documents);
    }))
}

useEffect(() => {
    if(searchParams.get("id")){
        fetchPosts();
    } else {
        navigate('/');
    }
}, []);

を返します.<PostItem title={'Test PostItem'} />
{posts.map((post) => (
    <PostItem title={post.title} description={post.description} author={post.author} key={post.$id}/>
))}

これで、AppWriteコンソールで追加された記事を参照することができます.

結論


この部分では、我々はカテゴリーとリスト柱をクリックする方法を経験しました.ネスト部分では、実際にフォーラムのUI aswellからまっすぐに新しい投稿を追加します.
今までのように、何かよく説明していないか、何かを逃した場合、手を差し伸べる!私の次の記事を投稿するときに目を離さない!

📚 もっと学ぶ

  • Appwrite's Docs
  • Appwrite's Discord