add: social; include information about page

This commit is contained in:
hsjobeki 2022-12-18 18:28:04 +01:00
parent 380d8d75a8
commit e4313c7843
2 changed files with 21 additions and 3 deletions

View File

@ -1,4 +1,4 @@
import React, { useState, useMemo } from "react"; import React, { useState, useMemo, useEffect } from "react";
import { import {
Box, Box,
IconButton, IconButton,
@ -23,6 +23,7 @@ import ClearIcon from "@mui/icons-material/Clear";
import { NixType, nixTypes } from "../../types/nix"; import { NixType, nixTypes } from "../../types/nix";
import { Filter } from "../searchInput/searchInput"; import { Filter } from "../searchInput/searchInput";
import { useRouter } from "next/router";
export type BasicListItem = { export type BasicListItem = {
item: React.ReactNode; item: React.ReactNode;
@ -46,7 +47,19 @@ export function BasicList(props: BasicListProps) {
// const [from, setFrom] = useState<NixType>("any"); // const [from, setFrom] = useState<NixType>("any");
// const [to, setTo] = useState<NixType>("any"); // const [to, setTo] = useState<NixType>("any");
const [page, setPage] = useState(1); const [page, setPage] = useState<number>(1);
const router = useRouter();
useEffect(() => {
const { query } = router;
if (query?.page) {
if (typeof query.page === "string") {
const page = Number(query.page);
setPage(page);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [router]);
const pageItems = useMemo(() => { const pageItems = useMemo(() => {
const startIdx = (page - 1) * itemsPerPage; const startIdx = (page - 1) * itemsPerPage;
@ -80,6 +93,7 @@ export function BasicList(props: BasicListProps) {
handleFilter={_handleFilter} handleFilter={_handleFilter}
placeholder="search nix functions" placeholder="search nix functions"
handleSearch={_handleSearch} handleSearch={_handleSearch}
page={page}
clearSearch={() => _handleSearch("")} clearSearch={() => _handleSearch("")}
/> />

View File

@ -87,10 +87,11 @@ export interface SearchInputProps {
handleFilter: (filter: Filter | ((curr: Filter) => Filter)) => void; handleFilter: (filter: Filter | ((curr: Filter) => Filter)) => void;
clearSearch: () => void; clearSearch: () => void;
placeholder: string; placeholder: string;
page: number;
} }
export function SearchInput(props: SearchInputProps) { export function SearchInput(props: SearchInputProps) {
const { handleSearch, clearSearch, placeholder, handleFilter } = props; const { handleSearch, clearSearch, placeholder, handleFilter, page } = props;
const { enqueueSnackbar } = useSnackbar(); const { enqueueSnackbar } = useSnackbar();
const [term, setTerm] = useState(""); const [term, setTerm] = useState("");
const [to, setTo] = useState<NixType>("any"); const [to, setTo] = useState<NixType>("any");
@ -128,6 +129,9 @@ export function SearchInput(props: SearchInputProps) {
if (term) { if (term) {
queries.push(`search=${term}`); queries.push(`search=${term}`);
} }
queries.push(`page=${page}`);
queries.push(`to=${to}&from=${from}`); queries.push(`to=${to}&from=${from}`);
const handle = `https://noogle.dev?${queries.join("&")}`; const handle = `https://noogle.dev?${queries.join("&")}`;
navigator.clipboard.writeText(handle); navigator.clipboard.writeText(handle);