DApp-1854 channel listing

[rohitmalhotra1420]

Pull Request Template

Ticket Number

• 1854

Description

• Problem/Feature:

Type of Change

• Bug fix
• New feature
• Code refactor
• Documentation update
• Other (please describe):

Checklist

• Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • Quick PR label added
• Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • DO NOT Merge PR label added

Frontend Guidelines

• Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• No errors in the build terminal
• Engineer has tested the changes on their local environment
• Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

• Before: Explain the previous behavior

• After: What's changed now

Additional Context

Review & Approvals

• Self-review completed
• Code review by at least one other engineer
• Documentation updates if applicable

Notes

[github-actions]

• You are importing FC from 'react', so make sure to use React.FC instead.
• There is a typo in 'Infrastrucuture', it should be 'Infrastructure'.
• In the Pill component inside the map function, the key should be ${cat}-${index} instead of just ${index} to ensure unique keys.
• It seems categories array is being referenced before it is defined in the file. Make sure to move the categories array declaration above the ChannelCategories component function.
• There is no check for categoryContainerRef if it is null or not before using it in the scrollBy method. You might want to add a check to prevent any potential null reference errors.

Here is the corrected part of the code:

import React, { useRef } from 'react';
import { css } from 'styled-components';
import { Filters } from '../hooks/useChannelsFilters';

export type ChannelCategoriesProps = {
  filters: Filters;
  setFilter: (filter: Partial<Filters>) => void;
};

const scrollAmount = 150;

const ChannelCategories: React.FC<ChannelCategoriesProps> = ({ filters, setFilter }) => {
  const categoryContainerRef = useRef<HTMLDivElement>(null);

  const categories = [
    'All',
    'Subscribed',
    'DEFI',
    'DAO',
    'NFT',
    'Metaverse',
    'Tooling',
    'Infrastrucuture', // Typo: should be 'Infrastructure'
    'Gaming',
    'Social',
    'Serivce', // Typo: should be 'Service'
    'DEFI',
    'DAO',
    'NFT',
  ];

  return (
    <Box
      display="flex"
      alignItems="center"
      css={css`
        flex-shrink: 0;
      `}
      gap="spacing-xs"
      maxWidth={{ ml: '346px' }}
    >
      <Button
        iconOnly={<CaretLeft />}
        circular
        variant="outline"
        size="small"
        onClick={() => {
          if (categoryContainerRef.current) {
            categoryContainerRef.current.scrollBy({
              left: -scrollAmount,
              behavior: 'smooth',
            });
          }
        }}
      />
      <Box
        display="flex"
        overflow="hidden"
        gap="spacing-xs"
        width="100%"
        ref={categoryContainerRef}
      >
        {categories.map((cat, index) => (
          <Pill
            key={`${cat}-${index}`}
            isActive={cat === filters.category}
            onClick={() => setFilter({ category: cat })}
          >
            {cat}
          </Pill>
        ))}
      </Box>

      <Button
        iconOnly={<CaretRight />}
        circular
        variant="outline"
        size="small"
        onClick={() => {
          if (categoryContainerRef.current) {
            categoryContainerRef.current.scrollBy({
              left: scrollAmount,
              behavior: 'smooth',
            });
          }
        }}
      />
    </Box>
  );
};

export { ChannelCategories };

All looks good.