<commit_before>/* @jsx jsx */

import { useQuery, gql, useMutation, TypedDocumentNode } from '../../apollo';
import { Button } from '@keystone-ui/button';
import { Box, H1, jsx, Stack, useTheme } from '@keystone-ui/core';
import { Fragment, HTMLAttributes, ReactNode, useMemo, useState } from 'react';
import { ArrowRightCircleIcon } from '@keystone-ui/icons/icons/ArrowRightCircleIcon';
import { PageContainer } from '../../components/PageContainer';
import { useList } from '../../context';
import { useRouter, Link } from '../../router';
import { CellLink } from '../../components';
import { getPaginationLabel, Pagination } from './pagination';
import { useFilters } from './useFilters';
import { useSelectedFields } from './useSelectedFields';
import { CheckboxControl } from '@keystone-ui/fields';
import { DataGetter, DeepNullable, makeDataGetter } from '../../utils/dataGetter';
import { getRootGraphQLFieldsFromFieldController } from '../../utils/getRootGraphQLFieldsFromFieldController';
import { CreateItemDrawer } from '../../components/CreateItemDrawer';
import { FieldSelection } from './FieldSelection';
import { FilterAdd } from './FilterAdd';
import { FilterList } from './FilterList';
import { ListMeta } from '@keystone-spike/types';
import { AlertDialog, DrawerController } from '@keystone-ui/modals';
import { useToasts } from '@keystone-ui/toast';
import { LoadingDots } from '@keystone-ui/loading';
import { useSort } from './useSort';
import { SortSelection } from './SortSelection';

type ListPageProps = {
  listKey: string;
};

let listMetaGraphqlQuery: TypedDocumentNode<
  {
    keystone: {
      adminMeta: {
        list: {
          hideCreate: boolean;
          hideDelete: boolean;

          fields: {
            path: string;
            listView: {
              fieldMode: 'read' | 'hidden';
            };
          }[];
        } | null;
      };
    };
  },
  { listKey: string }
> = gql`
  query($listKey: String!) {
    keystone {
      adminMeta {
        list(key: $listKey) {
          hideDelete
          hideCreate
          fields {
            path
            listView {
              fieldMode
            }
          }
        }
      }
    }
  }
`;

export const ListPage = ({ listKey }: ListPageProps) => {
  const list = useList(listKey);

  const { query } = useRouter();

  let currentPage =
    typeof query.page === 'string' && !Number.isNaN(parseInt(query.page)) ? Number(query.page) : 1;
  let pageSize =
    typeof query.pageSize === 'string' && !Number.isNaN(parseInt(query.pageSize))
      ? parseInt(query.pageSize)
      : list.pageSize;

  const sort = useSort(list);

  const filters = useFilters(list);

  let metaQuery = useQuery(listMetaGraphqlQuery, { variables: { listKey } });

  let listViewFieldModesByField = useMemo(() => {
    let listViewFieldModesByField: Record<string, 'read' | 'hidden'> = {};
    metaQuery.data?.keystone.adminMeta.list?.fields.forEach(field => {
      listViewFieldModesByField[field.path] = field.listView.fieldMode;
    });
    return listViewFieldModesByField;
  }, [metaQuery.data?.keystone.adminMeta.list?.fields]);

  let selectedFields = useSelectedFields(list, listViewFieldModesByField);

  let { data: newData, error: newError, refetch, loading } = useQuery(<commit_msg>Store list page state in local storage in new interfaces (#3988)<commit_after>/* @jsx jsx */

import { useQuery, gql, useMutation, TypedDocumentNode } from '../../apollo';
import { Button } from '@keystone-ui/button';
import { Box, H1, jsx, Stack, useTheme } from '@keystone-ui/core';
import { Fragment, HTMLAttributes, ReactNode, useEffect, useMemo, useState } from 'react';
import { ArrowRightCircleIcon } from '@keystone-ui/icons/icons/ArrowRightCircleIcon';
import { PageContainer } from '../../components/PageContainer';
import { useList } from '../../context';
import { useRouter, Link } from '../../router';
import { CellLink } from '../../components';
import { getPaginationLabel, Pagination } from './pagination';
import { useFilters } from './useFilters';
import { useSelectedFields } from './useSelectedFields';
import { CheckboxControl } from '@keystone-ui/fields';
import { DataGetter, DeepNullable, makeDataGetter } from '../../utils/dataGetter';
import { getRootGraphQLFieldsFromFieldController } from '../../utils/getRootGraphQLFieldsFromFieldController';
import { CreateItemDrawer } from '../../components/CreateItemDrawer';
import { FieldSelection } from './FieldSelection';
import { FilterAdd } from './FilterAdd';
import { FilterList } from './FilterList';
import { ListMeta } from '@keystone-spike/types';
import { AlertDialog, DrawerController } from '@keystone-ui/modals';
import { useToasts } from '@keystone-ui/toast';
import { LoadingDots } from '@keystone-ui/loading';
import { useSort } from './useSort';
import { SortSelection } from './SortSelection';

type ListPageProps = {
  listKey: string;
};

let listMetaGraphqlQuery: TypedDocumentNode<
  {
    keystone: {
      adminMeta: {
        list: {
          hideCreate: boolean;
          hideDelete: boolean;

          fields: {
            path: string;
            listView: {
              fieldMode: 'read' | 'hidden';
            };
          }[];
        } | null;
      };
    };
  },
  { listKey: string }
> = gql`
  query($listKey: String!) {
    keystone {
      adminMeta {
        list(key: $listKey) {
          hideDelete
          hideCreate
          fields {
            path
            listView {
              fieldMode
            }
          }
        }
      }
    }
  }
`;

function useQueryParamsFromLocalStorage(listKey: string) {
  const router = useRouter();
  const localStorageKey = `keystone.list.${listKey}.list.page.info`;
  useEffect(() => {
    let hasSomeQueryParamsWhichAreAboutListPage = Object.keys(router.query).some(
      x => x.startsWith('!') || x === 'page' || x === 'pageSize' || x === 'fields'
    );
    if (!hasSomeQueryParamsWhichAreAboutListPage) {
      const queryParamsFromLocalStorage = localStorage.getItem(localStorageKey);
      let parsed;
      try {
        parsed = JSON.parse(queryParamsFromLocalStorage!);
      } catch (err) {}
      if (parsed) {
        router.replace({
          query: {
            ...router.query,
            ...parsed,
          },
        });
      }
    }
  }, [localStorageKey]);
  useEffect(() => {
    let queryParamsToSerialize: Record<string, string> = {};
    Object.keys(router.query).forEach(key => {
      if (key.startsWith('!') || key === 'page' || key === 'pageSize' || key === 'fields') {
        queryParamsToSerialize[key] = router.query[key] as string;
      }
    });
    if (Object.keys(queryParamsToSerialize).length) {
      localStorage.setItem(
        `keystone.list.${listKey}.list.page.info`,
        JSON.stringify(queryParamsToSerialize)
      );
    } else {
      localStorage.removeItem(`keystone.list.${listKey}.list.page.info`);
    }
  }, [localStorageKey, router]);
}

export const ListPage = ({ listKey }: ListPageProps) => {
  const list = useList(listKey);

  const { query } = useRouter();

  useQueryParamsFromLocalStorage(listKey);

  let currentPage =
    typeof query.page === 'string' && !Number.isNaN(parseInt(query.page)) ? Number(query.page) : 1;
  let pageSize =
    typeof query.pageSize === 'string' && !Number.isNaN(parseInt(query.pageSize))
      ? parseInt(query.pageSize)
      : list.pageSize;

  const sort = useSort(list);

  const filters = useFilters(list);

  let metaQuery = useQuery(listMetaGraphqlQuery, { variables: { listKey } });

  let listViewFieldModesByField = useMemo(() => {
    let listViewFieldModesByField: Record<string, 'read' | 'hidden'> = {};
    metaQuery.data?.keystone.adminMeta.list?.fields.forEach(field => {
      listViewFieldModesByField[field.path] = field.listView.fieldMode;
    });
    return listViewFieldModesByField;
  }, [metaQuery.data?.keystone.adminMeta.list?.fields]);

  let selectedFields = useSelectedFields(list, listViewFieldModesByField);

  let { data: newData, error: newError, refetch, loading } = useQuery(
{'fraction_non_alphanumeric': 0.1460061919504644, 'fraction_numerical': 0.0009907120743034056, 'mean_word_length': 3.0726172465960664, 'pattern_counts': {'":': 0, '<': 8, '<?xml version=': 0, '>': 18, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6032166', 'n_tokens_mistral': 2410, 'n_tokens_neox': 2396, 'n_words': 518}