pushkar100

import React, { useState } from "react";

const ProductSearchFilter = ({
  products = [],
  colors = [],
  sizes = [],
  onSearch = () => {}
}) => {
  const [product, setProduct] = useState(null);
  const [selectedColors, setSelectedColors] = useState([]);

pushkar100

import React, { useState, useCallback } from "react";

const readStyle = { backgroundColor: "grey" };
const unreadStyle = { backgroundColor: "white" };

const useReadStatusUpdater = (hasRead, onReset) => {
  const [read, setRead] = useState(hasRead || false);

  const resetRead = useCallback(() => {
    setRead(hasRead);

pushkar100

import React, { useState, useCallback } from "react";

const readStyle = { backgroundColor: "grey" };
const unreadStyle = { backgroundColor: "white" };

const EmailsListItem = ({ hasRead, onReadStatusChange }) => {
  const [read, setRead] = useState(hasRead || false);
  const resetRead = useCallback(() => {
    setRead(hasRead);
    // Handle side effects during a reset!

pushkar100

import React, { useState, useCallback } from "react";

const readStyle = { backgroundColor: "grey" };
const unreadStyle = { backgroundColor: "white" };

const EmailsListItem = ({ hasRead }) => {
  const [read, setRead] = useState(hasRead || false);
  const resetRead = useCallback(() => setRead(hasRead), [hasRead]);

  const style = read ? readStyle : unreadStyle;

pushkar100

const logClick = () => console.log("button clicked");

const callAll = (...fns) => (...args) => fns.forEach((fn) => fn(...args));

export const buttonPropsGetter = ({ customOnClick, ...props }) => ({
  onClick: callAll(logClick, customOnClick), // Extensible
  tabIndex: 0,
  role: "button",
  "aria-disabled": false,
  text: "Button",

pushkar100

const buttonAriaPropCollection = {
  tabIndex: 0,
  role: "button",
  "aria-disabled": false
};

const Button = ({ text, onClick, tabIndex, role, 'aria-disabled': ariaDisabled }) => {
  return (
    <button onClick={onClick} tabIndex={tabIndex} role={role} aria-disabled={ariaDisabled}>
      {text}

pushkar100

const Button = ({ text, onClick, tabIndex, ariaDisabled }) => {
  return (
    <button
      onClick={onClick}
      tabIndex={tabIndex}
      role="button"
      aria-disabled={ariaDisabled}
    >
      {text}
    </button>

pushkar100

import Menu from "./Menu";
import MenuButton from "./MenuButton";
import MenuItem from "./MenuItem";

export default () => (
  <Menu hideButtons>
    <MenuButton text="Exit" action={() => console.log("Exiting")} />
    <MenuButton text="Settings" action={() => console.log("settings")} />
    <MenuItem text="News" />
    <MenuItem text="Serials" />

pushkar100

import React from "react";

const MenuItem = ({ text }) => <div key={text}>{text}</div>;

export default MenuItem;

pushkar100

import React, { useContext } from "react";
import { MenuContext } from "./Menu";

const MenuButton = ({ text, action }) => {
  const { hideButtons } = useContext(MenuContext);

  if (hideButtons) {
    return null;
  }