最近読んだ記事のリストを実装

機能実装

ユーザーが最近読んだ記事ディレクトリを提供します.

strapiを使用して、最近読んだ後dbモデルを設計します.

2intersection observerを使用して、ユーザーが文章を読み終えたかどうかを確認します.

の最新の順序で情報を提供します.(例えば、ユーザがa、b、cの順に文章を読む場合、c-b-aの順に表示し、ユーザが再び文章を読む場合、a-c-bの順に表示する.

.

2postmanを使用してapiテストが行われる.

1.最近読んだ後DBモデル

🏷 relation

Relation関連strapi公式ドキュメント

最近読んだ文章には2つの情報が必要です.どのプレイヤーがどの文章を読んだか.想定されるデータモデルは次のとおりです.

[
  {
   user: 유저 정보,
   post: 포스트 정보,
   updatedAt: 읽은 시각,
  },
  {
   user: 유저 정보,
   post: 포스트 정보,
   updatedAt: 읽은 시각,
  },
  ....
]

そこで,ユーザデータと最近読んだ文章データを結びつける.
関係には6種類ある.

oneway(一方向):エンティティAにエンティティBがあります.

onetoone(一対一):エンティティAにエンティティBがあります.

oneto multi(一対多):エンティティAにはBに属するエンティティがたくさんあります.

multi to one(多対一):エンティティBにはAに属するエンティティがたくさんあります.

multi to multi(マルチペアマルチ):エンティティAには多くのエンティティBがあり、複数のエンティティBに属する.

マルチパス(多方面):シンボルAには多くのシンボルBがある.

これらのデータ間の関連関係を設定するには、3つの側面を考慮する必要があります.
1.方向2.リレーショナルボディ多重性には、最近読んだ文章、文章、
最近読んだ文章、文章、ユーザーの関係を設定します.

🏷 n/a.方向

一方向と双方向があります.たとえば、参照フィールドを持つオブジェクトのみが異なるオブジェクトを参照する場合、一方向オブジェクトと2つのオブジェクトにはそれぞれ1つの参照型フィールドがあり、相互参照する場合は双方向関係になります.

最近読んだ文章
最近読んだ文章データは、その文章がどのような文章であるかのデータを参考にする必要があります.
ポストデータは、最近読み込んだポストデータを参照する必要はありません.
そのため、彼らは一方向関係に適しています.

最近読んだ記事<>ユーザー
最近読んだ文章データは、その文章を読んだユーザーが誰なのかを参考にする必要があります.
著者は自分が最近読んだ文章を参照する必要がある.
そのため、彼らは双方向関係に適しています.

🏷 たじゅうせい

最近読んだ文章1:文章1
最近読んだ文章データには、1つの文章データしか含まれていません.そのため、一対一の関係がぴったりです.

最近読んだ記事1:ユーザN
1人のプレイヤー(1)が最近読んだ文章(N)を複数持っている可能性がある.
そのため、多くの対日関係は非常に適している.

🏷 関係の最終設定

最近読んだ文章1->文章1

最近読んだ文章1<->ユーザN

🤔 最近読み込んだPost Collectionを個別に作成する理由

最初は,ユーザ集合,後集合ともに接続して機能を実現しようとした.

プレイヤー(1)は複数の文章(N)を記入できる.
プレイヤー(1)は複数の文章(N)を読むことができる.
ユーザー・コレクションとポスト・コレクションを接続する場合は、異なる名前のみが使用されます.
一つは.
ユーザデータにユーザが書いた文章を格納するように,最近読んだ文章もリストに格納すればよい.問題は更新時間です.
たとえば、ユーザーは、書いた文章を最新の順序でロードしやすくなります.入力後のデータに格納されている発行時間順(publishedAt,createdAt)でよい.
しかし、最近読んだ文章は違います.ユーザーは「いつ文章を読んだか」、データが必要です.したがって,ユーザ−文章を複数対多に接続するのではなく,「最近読んだ文章」集合を中心に,ユーザ−「最近読んだ文章」−文章を接続する.

2.最近読んだ文章機能の実施

次のAPIを使用してユーザーの動作を検出します。

これは,従来,木業データを用いて無限スクロールを実現する際に用いられていたIntersectionObserver APIである.要約すると、ターゲット要素がアプライアンスビューポートと交差すると、イベントのWeb APIが非同期でトリガーされます.(IntersectionObserver APIの詳細については、前のむげんスクロールカラムを参照してください.)

このAPIを利用すると,ユーザがポストリンクに接続されたときだけでなく,ユーザが最後に文章を読んだときにイベントが発生し,「最近読んだ文章」データが追加される.事前にIntersectionObserver APIを使用してuseioフックを作成し、useioによって生成されたターゲット要素をpostコンテンツの下に直接配置します.以降、すべての記事の下部にIntersectionObserverAPIのターゲットが貼られます.

const { setTarget } = useIO({
    root: null,
    rootMargin: '0px',
    threshold: 1,
    onIntersect,
  });

<MDviewer title="" contents={postObj.contents} />
<div ref={setTarget}></div>

ネットユーザーに読まれた文章かどうか:querystringでフィルタリング

例えば、あるユーザがa,b,cという文章を読んだと仮定する.このときユーザはc文章を読み返し,a,b,c,cを提供せず,順序を変えるだけでc,a,bを提供する.したがって,パブリッシュデータを再作成するか,パブリッシュデータを変更するかを決定するには,以前のユーザが文章を読んだことがあるかどうかを調べる必要がある.Qsモジュールを使用して、「最近読んだ文章」データ>ログインしたユーザーIDと現在の文章IDをフィルタリングし、データを取得します.

    const query = qs.stringify({
    filters: {
      user: {
        userid: userName,
      },
      post: {
        id: postId,
      },
    },
  });

  const response = await axios({
    method: 'get',
    url: `${API_ENDPOINT}/readingposts?${query}`,
  });

コンソールには、次のようにresponseが表示されます.このときdataはnullが初めて読む文章であり,dataはユーザが既に読んだ文章である.したがって、data.lengthを基準としてfalse面postを行い、true面データのid値とともにput面を行えばよい.

🐛 setStateを使用してaxiosメソッドを管理しないでください

const [method, setMethod] = useState('post') ;
axiosメソッドはpost,putなど動的に変化する値と考えられるため,usStateとして作成する誤りを犯した.「1.24579142をチェックし、ステータス値を2.24579142に更新し、3.apiリクエストを送信します!」このようにコードを記述します.しかしながら、data.lengthおよびsetStateは非同期処理であり、setState要求の優先度が高いため、更新値を反映することもできない.したがって,以下に示すように,3つの演算子により関数のパラメータを異なる伝達コードに変換する.

  data.length
    ? postReadingData('put', `${data[0].id}`, userId, postId)
    : postReadingData('post', '', userId, postId);
};

const postReadingData = async (
  method: string,
  putid: string = '',
  userId: number | undefined,
  postId: number
) => {
  const res = await axios({
    method: method as Method,
    url: `${API_ENDPOINT}/readingposts/${putid}`,
    data: {
      data: {
        userid: userId,
        postid: postId,
      },
    },
  });
};

もう一度setStateを使うかどうか考えてみましょう

📸 機能実装画面

読んだ文章を読み直すと、最新の順序でよく更新されていることを確認できます.