react-feather#ArrowRight JavaScript Examples

export default function BlockHeader(props) {
  const {title = "", description = "", link, button = ""} = props;
  return (
    <header className="block-header">
      <div className="block-header__title-box">
        <p className="block-header__description">{description}</p>
        <h3 className="block-header__title">{title}</h3>
      </div>
      {link && <div className="block-header__link">
        <Link to={link}>
          see all <ArrowRight/>
        </Link>
      </div>}
      {button}
    </header>
  );
}

function PageLink({ url, children, ...rest }) {
  return (
    <Link as={BrowserLink} to={url} {...rest}>
      <Flex
        justifyContent="space-between"
        p="6"
        boxShadow="md"
        borderWidth="1px"
        rounded="lg"
      >
        <Text fontSize="lg">{children}</Text>
        <Box as={ArrowRight} />
      </Flex>
    </Link>
  );
}

Search = ({open, toggleOpen, className, ...rest}) => {
  const classes = `${open ? 'open' : ''} ${className}`;
  const [results, setResults] = useState(null);
  const docs = useDocs();

  const search = (ev) => {
    ev.preventDefault();
    const form = new FormData(ev.target);
    const q = form.get('query');
    if (!q || !q.length) {
      setResults(null);
      return;
    }
    const regex = new RegExp(q, 'i');
    const filtered = docs.filter(filter.bind(null, regex));
    setResults(filtered);
  };

  return (
    <DrawerContainer className={classes} {...rest}>
      <div>
        <Close onClick={() => toggleOpen(false)}>
          <X size={22} />
        </Close>
        <SearchContainer>
          <form action="" onSubmit={search}>
            <label
              htmlFor="searchQuery"
              aria-hidden="true"
              style={{display: 'none'}}
            >
              Search
            </label>
            <input
              id="searchQuery"
              name="query"
              type="text"
              placeholder="Type to search..."
              aria-label="Query"
            />
            <Submit type="submit" aria-label="Submit">
              <ArrowRight size={22} />
            </Submit>
          </form>
        </SearchContainer>
        {results && results.length ? (
          <Results>
            {results.map((doc, i) => (
              <Link key={i} to={doc.route}>
                <h4>{doc.name}</h4>
                <span>{doc.route}</span>
              </Link>
            ))}
          </Results>
        ) : null}
      </div>
    </DrawerContainer>
  );
}

function TransactionHistoryTable({ data }) {
  const breakpoint = useBreakpoints();
  const isMobile = breakpoint === 'isMobile';

  const columns = useMemo(
    () => [
      {
        Header: 'Kimden',
        accessor: 'from.name',
        Cell: ({ value }) => (
          <div className="person with-icon">
            <div>{value || 'Anonim'}</div>
            <div className="icon">
              <ArrowRight />
            </div>
          </div>
        ),
      },

      {
        Header: 'Kime',
        accessor: 'to.name',
        Cell: ({
          value,
          row: {
            original: { to },
          },
        }) => {
          let Element = 'div';
          let linkProps;
          if (to.campaignCode && to.campaignCode !== 'donate-all') {
            Element = 'a';
            linkProps = {
              href: `https://www.ucurtmaprojesi.com/campaign/${to.campaignCode}`,
            };
          }
          return (
            <Element className="person" {...linkProps}>
              {value}
            </Element>
          );
        },
      },
      {
        Header: 'Ne Zaman',
        accessor: 'when',
        id: 'when',
        Cell: ({ value }) => <div>{dayjs().to(dayjs(value * 1000))}</div>,
      },
      {
        Header: 'Ne Kadar',
        accessor: 'amount',
        Cell: ({
          value,
          row: {
            original: { tokenName },
          },
        }) => (
          <div className="amount">{`${
            typeof value === 'number' ? Math.floor(value) : value
          } ${tokenName}`}</div>
        ),
      },
    ],
    []
  );

  const defaultSort = useMemo(() => [{ id: 'when', desc: true }], []);

  const tableInstance = useTable(
    {
      columns,
      data,
      initialState: { sortBy: defaultSort, pageSize: 10, pageIndex: 0 },
      disableMultiSort: true,
      disableSortRemove: true,
    },
    useFlexLayout,
    useSortBy,
    usePagination
  );
  const {
    getTableProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    state: { pageIndex },
  } = tableInstance;

  return (
    <div className="table-wrapper">
      <div {...(!isMobile && getTableProps())} className="table">
        {!isMobile &&
          headerGroups.map(headerGroup => (
            <div {...headerGroup.getHeaderGroupProps({})} className="tr">
              {headerGroup.headers.map(column => (
                <div
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                  className="th title"
                >
                  {column.render('Header')}
                  {column.isSorted ? (
                    column.isSortedDesc ? (
                      <ChevronDown />
                    ) : (
                      <ChevronUp />
                    )
                  ) : (
                    ''
                  )}
                </div>
              ))}
            </div>
          ))}
        <div className="tbody">
          {page.map(row => {
            prepareRow(row);
            return (
              <div {...row.getRowProps()} className="tr">
                {row.cells.map(cell => {
                  return (
                    <div {...cell.getCellProps()} className="td">
                      {isMobile && (
                        <div className="td-header">{cell.render('Header')}</div>
                      )}
                      <div className="td-content">{cell.render('Cell')}</div>
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>
      <div className="pagination">
        <div>
          <button
            className="button icon-button"
            type="button"
            onClick={() => gotoPage(0)}
            disabled={!canPreviousPage}
          >
            <ChevronsLeft />
          </button>
          <button
            className="button icon-button"
            type="button"
            onClick={() => previousPage()}
            disabled={!canPreviousPage}
          >
            <ChevronLeft />
          </button>
          <button
            className="button icon-button"
            type="button"
            onClick={() => nextPage()}
            disabled={!canNextPage}
          >
            <ChevronRight />
          </button>
          <button
            className="button icon-button"
            type="button"
            onClick={() => gotoPage(pageCount - 1)}
            disabled={!canNextPage}
          >
            <ChevronsRight />
          </button>
        </div>
        <span>
          Toplam {pageOptions.length} sayfadan
          <strong>{pageIndex + 1}.</strong>
          sayfayı görüntülüyorsunuz.
        </span>
      </div>
    </div>
  );
}

function Capacity({ filterDistrict, filterFacilityTypes, date }) {
  const [forecast, setForecast] = useState(false);
  const { data } = useSWR(
    ["Capacity", date, filterDistrict.id],
    (url, date, district) =>
      careSummary(
        "facility",
        dateString(getNDateBefore(date, 1)),
        dateString(getNDateAfter(date, 1)),
        district
      )
  );
  const { facilitiesTrivia, exported, todayFiltered, capacityCardData } =
    useMemo(() => {
      const filtered = processFacilities(data.results, filterFacilityTypes);
      const facilitiesTrivia = filtered.reduce(
        (a, c) => {
          const key = c.date === dateString(date) ? "current" : "previous";
          a[key].count += 1;
          a[key].oxygen += c.oxygenCapacity || 0;
          a[key].actualLivePatients += c.actualLivePatients || 0;
          a[key].actualDischargedPatients += c.actualDischargedPatients || 0;
          Object.keys(AVAILABILITY_TYPES).forEach((k) => {
            a[key][k].used += c.capacity[k]?.current_capacity || 0;
            a[key][k].total += c.capacity[k]?.total_capacity || 0;
          });

          AVAILABILITY_TYPES_TOTAL_ORDERED.forEach((k) => {
            const current_covid = c.capacity[k.covid]?.current_capacity || 0;
            const current_non_covid =
              c.capacity[k.non_covid]?.current_capacity || 0;
            const total_covid = c.capacity[k.covid]?.total_capacity || 0;
            const total_non_covid =
              c.capacity[k.non_covid]?.total_capacity || 0;
            a[key][k.id].used += current_covid + current_non_covid;
            a[key][k.id].total += total_covid + total_non_covid;
          });

          return a;
        },
        {
          current: JSON.parse(JSON.stringify(initialFacilitiesTrivia)),
          previous: JSON.parse(JSON.stringify(initialFacilitiesTrivia)),
        }
      );
      const exported = {
        data: filtered.reduce((a, c) => {
          if (c.date !== dateString(date)) {
            return a;
          }
          return [
            ...a,
            {
              "Govt/Pvt": GOVT_FACILITY_TYPES.includes(c.facilityType)
                ? "Govt"
                : "Pvt",
              "Hops/CFLTC":
                c.facilityType === "First Line Treatment Centre"
                  ? "CFLTC"
                  : "Hops",
              "Hospital/CFLTC Address": c.address,
              "Hospital/CFLTC Name": c.name,
              Mobile: c.phoneNumber,
              ...AVAILABILITY_TYPES_ORDERED.reduce((t, x) => {
                const y = { ...t };
                y[`Current ${AVAILABILITY_TYPES[x]}`] =
                  c.capacity[x]?.current_capacity || 0;
                y[`Total ${AVAILABILITY_TYPES[x]}`] =
                  c.capacity[x]?.total_capacity || 0;
                return y;
              }, {}),
            },
          ];
        }, []),
        filename: "capacity_export.csv",
      };

      const capacityCardData = filtered.reduce((acc, facility) => {
        const covidData = getCapacityBedData([30, 120, 110, 100], facility);
        const nonCovidData = getCapacityBedData([1, 150, 10, 20], facility);
        const finalTotalData = getFinalTotalData(covidData, nonCovidData);
        const noCapacity = finalTotalData.every((item) => item.total === 0);
        if (facility.date !== dateString(date) || noCapacity) {
          return acc;
        }
        return [
          ...acc,
          {
            facility_name: facility.name,
            facility_id: facility.id,
            facility_type: facility.facilityType,
            phone_number: facility.phoneNumber,
            last_updated: dayjs(facility.modifiedDate).fromNow(),
            patient_discharged: `${facility.actualLivePatients || 0}/${
              facility.actualDischargedPatients || 0
            }`,
            covid: covidData,
            non_covid: nonCovidData,
            final_total: finalTotalData,
          },
        ];
      }, []);

      const todayFiltered = filtered.filter((f) => f.date === dateString(date));
      return {
        facilitiesTrivia,
        exported,
        todayFiltered,
        capacityCardData,
      };
    }, [data, filterFacilityTypes]);

  const transitions = useTransition(forecast, null, {
    enter: { opacity: 1 },
    from: { opacity: 0 },
    leave: { opacity: 0 },
  });

  const [filteredData, setFilteredData] = useState(capacityCardData);
  const [tableData, setTableData] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");

  const [page, setPage] = useState(0);
  const resultsPerPage = 10;

  useEffect(() => {
    const debounce_timer = setTimeout(() => {
      setFilteredData(
        searchTerm
          ? fuzzysort
              .go(searchTerm, capacityCardData, { key: "facility_name" })
              .map((v) => v.obj)
          : capacityCardData
      );
      setPage(0);
    }, 1000);
    return () => clearTimeout(debounce_timer);
  }, [searchTerm, capacityCardData]);

  useEffect(() => {
    setTableData(
      filteredData.slice(page * resultsPerPage, (page + 1) * resultsPerPage)
    );
  }, [filteredData, page]);

  return transitions.map(({ item, key, props }) =>
    item ? (
      <animated.div key={key} style={props}>
        <CapacityForecast
          filterDistrict={filterDistrict}
          filterFacilityTypes={filterFacilityTypes}
          date={date}
          setForecast={setForecast}
        />
      </animated.div>
    ) : (
      <animated.div key={key} style={props}>
        <div className="grid gap-1 grid-rows-none mb-8 sm:grid-flow-col-dense sm:grid-rows-1 sm:place-content-end">
          <ValuePill
            title="Facility Count"
            value={facilitiesTrivia.current.count}
          />
          <ValuePill
            title="Oxygen Capacity"
            value={facilitiesTrivia.current.oxygen}
          />
          <ValuePill
            title="Live Patients"
            value={facilitiesTrivia.current.actualLivePatients}
          />
          <ValuePill
            title="Discharged Patients"
            value={facilitiesTrivia.current.actualDischargedPatients}
          />
          <Pill title="Forecast">
            <Button
              size="small"
              onClick={() => setForecast(true)}
              className="w-full bg-transparent shadow-xs"
            >
              <ArrowRight className="h-4" />
            </Button>
          </Pill>
        </div>

        <div className="grid-col-1 grid gap-6 mb-8 md:grid-cols-4">
          {AVAILABILITY_TYPES_TOTAL_ORDERED.map((k) => (
            <RadialCard
              label={k.name}
              count={facilitiesTrivia.current.count}
              current={facilitiesTrivia.current[k.id]}
              previous={facilitiesTrivia.previous[k.id]}
              key={k.name}
            />
          ))}
        </div>

        <div className="grid-col-1 grid gap-6 mb-8 md:grid-cols-4">
          {AVAILABILITY_TYPES_ORDERED.map((k) => (
            <RadialCard
              label={AVAILABILITY_TYPES[k]}
              count={facilitiesTrivia.current.count}
              current={facilitiesTrivia.current[k]}
              previous={facilitiesTrivia.previous[k]}
              key={k}
            />
          ))}
        </div>

        <div id="facility-capacity-cards" className="mb-16 mt-16">
          <div className="flex flex-col items-center justify-between md:flex-row">
            <SectionTitle>Facilities</SectionTitle>
            <div className="flex max-w-full space-x-4">
              {exported && (
                <CSVLink data={exported.data} filename={exported.filename}>
                  <Button block>Export</Button>
                </CSVLink>
              )}
              <Input
                className="sw-40 rounded-lg sm:w-auto"
                placeholder="Search Facility"
                value={searchTerm}
                onChange={(event) => setSearchTerm(event.target.value)}
              />
            </div>
          </div>

          {tableData.map((data, index) => (
            <CapacityCard data={data} key={index} />
          ))}

          <Pagination
            resultsPerPage={resultsPerPage}
            totalResults={filteredData.length}
            currentPage={page}
            currentResults={tableData.length}
            handlePageClick={setPage}
          />
        </div>
        <div id="capacity-map">
          <SectionTitle>Map</SectionTitle>
        </div>
        <Suspense fallback={<ThemedSuspense />}>
          <GMap
            className="mb-8"
            facilities={todayFiltered}
            district={filterDistrict}
          />
        </Suspense>
      </animated.div>
    )
  );
}