Polarisのタブに情報を表示させる方法

[daikussi]

いつもお世話になっております。

アプリ開発を行っており、現在は管理画面のところを作成しております。

Polarisのタブを使用してカテゴリ別で分けておりますが、このように

すべてのレビューまで表示が出来ています。

行いたいことといたしましては、公開、非公開のフラグの状態に応じて公開レビュー、

非公開レビューのタブを選択することで該当するレビューを出したいと考えております。

私の書き方が悪い可能性がありますので、下記にコードを添付いたします。

※長いコードのため少々読みづらいと思いますが、よろしくお願いいたします。

★すべてのレビュー処理

let rowMarkup = reviews.map(
    (
      { id, productid, name, email, evaluation, title, content, created_at,flag},
      index
    ) => (
      <IndexTable.Row
        id={id}
        key={id}
        selected={selectedResources.includes(id)}
        position={index}
      >
        <IndexTable.Cell>
          <Link
            id={"link" + index}
            classnames={"link-class" + index}
            dataPrimaryLink
            url={"/reviewdetail?id=" + id}
          >
            <span
              id={"span" + index}
              class="star5_rating"
              data-rate={evaluation}
            ></span>
          </Link>
        </IndexTable.Cell>
        <IndexTable.Cell>{name}</IndexTable.Cell>
        <IndexTable.Cell>{title}</IndexTable.Cell>
        <IndexTable.Cell>{created_at}</IndexTable.Cell>
        <IndexTable.Cell>
        {
        flag ? <Badge status="success">公開</Badge>:<Badge status="attention">非公開</Badge>
        }
        </IndexTable.Cell>
      </IndexTable.Row>
    )
  );

★公開済みレビュー、非公開レビューの処理

//タブのどれを選択しているのか
if (selected == 0){
    console.log("すべてのレビュー")
    } else if(selected == 1) {
    console.log("公開済みレビュー")
    reviews.map(
      (
        { id, productid, name, email, evaluation, title, content, created_at,flag},
        index
      )  => {
        if(flag == 1){
          rowMarkup = <IndexTable.Row
          id={id}
          key={id}
          selected={selectedResources.includes(id)}
          position={index}
        >
          <IndexTable.Cell>
            <Link
              id={"link" + index}
              classnames={"link-class" + index}
              dataPrimaryLink
              url={"/reviewdetail?id=" + id}
            >
              <span
                id={"span" + index}
                class="star5_rating"
                data-rate={evaluation}
              ></span>
            </Link>
          </IndexTable.Cell>
          <IndexTable.Cell>{name}</IndexTable.Cell>
          <IndexTable.Cell>{title}</IndexTable.Cell>
          <IndexTable.Cell>{created_at}</IndexTable.Cell>
          <IndexTable.Cell>
          {
          flag ? <Badge status="success">公開</Badge>:<Badge status="attention">非公開</Badge>
          }
          </IndexTable.Cell>
        </IndexTable.Row>
        }
      }
    );
  } else {
    reviews.map(
      (
        { id, productid, name, email, evaluation, title, content, created_at,flag},
        index
      ) => {
        if(flag == 0){
          rowMarkup = <IndexTable.Row
          id={id}
          key={id}
          selected={selectedResources.includes(id)}
          position={index}
        >
          <IndexTable.Cell>
            <Link
              id={"link" + index}
              classnames={"link-class" + index}
              dataPrimaryLink
              url={"/reviewdetail?id=" + id}
            >
              <span
                id={"span" + index}
                class="star5_rating"
                data-rate={evaluation}
              ></span>
            </Link>
          </IndexTable.Cell>
          <IndexTable.Cell>{name}</IndexTable.Cell>
          <IndexTable.Cell>{title}</IndexTable.Cell>
          <IndexTable.Cell>{created_at}</IndexTable.Cell>
          <IndexTable.Cell>
          {
          flag ? <Badge status="success">公開</Badge>:<Badge status="attention">非公開</Badge>
          }
          </IndexTable.Cell>
        </IndexTable.Row>
        openreview.push(reviews);
        }
      }
    );
  }

review.mapはObjectになります。

ヒントをお持ちの方がいらっしゃいましたらご教授いただければ幸いです。

情報が足りなければ追加いたします。

何卒、よろしくお願いいたします。

[株式会社フルバランス · Accepted solution]

Daikussi　様

お世話になっております。

フルバランスの道家と申します。

ご質問確認いたしました。

例えばになりますが、

UI表示のロジックは1つにして（現在のすべてのレビューを表示されているものを使用）、

タブのクリックに応じて、データをfilterで絞り込むのはいかがでしょうか。

// すべてのレビューデータをdataと定義します
const data = すべてのレビューデータ
const [reviews, setReviews] = useState(data);

// 公開済みレビュータブをクリックしたとき、dataから公開済みのものを絞り込む
// この関数を公開済みタブのonClickに与えてください
const filterPublicReview = () => {
  const publicReviews = data.filter(item => item.flag === 1)
  setReviews(publicReviews)
}

// 非公開済みレビュータブをクリックしたとき、dataから非公開済みのものを絞り込む
// この関数を非公開済みタブのonClickに与えてください
const filterPrivateReview = () => {
  const privateReviews = data.filter(item => item.flag === 0)
  setReviews(privateReviews)
}


// 表示ロジック
reviews.map(...)

直接試したわけではないのですが、useStateとfilterで上手くできそうな気がしました。

なにかヒントになれば幸いです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

フルバランス　道家

[daikussi]

お世話になっております。

質問に回答いただきありがとうございます。

返信で頂きましたコードを試したところうまくいきませんでしたが、

fliterで情報の絞り込みを行い無事に実装することが出来ました！

ありがとうございます！

今後もShopifyに関する質問をするかと思いますが、

何卒よろしくお願いいたします。