something presentable

.eslintrc.cjs

@@ -11,7 +11,8 @@ module.exports = createConfig({
         'import/no-default-export': 'off', // default exports are common in React
         'unicorn/prefer-object-from-entries': 'off',
         'unicorn/new-for-builtins': 'off',
-        'unicorn/prefer-set-has': 'off'
+        'unicorn/prefer-set-has': 'off',
+        'sonarjs/no-duplicate-string': 'off'
       },
     },
   ],

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext"
+  },
+  "exclude": ["node_modules"]
+}

package.json

@@ -25,6 +25,7 @@
     "react-icons": "^4.2.0",
     "react-intersection-observer": "^8.32.0",
     "react-is": "^17.0.2",
+    "react-json-view": "^1.21.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
     "react-spinners": "^0.11.0",

src/App/adapter/lib/create.js

@@ -81,6 +81,6 @@ export const createInclude = (groups) =>
 
 export const createWhere = (group = {}) => {
   const { operator, filters } = group
-  const res = filters.map(buildSimple)
+  const res = filters?.map(buildSimple)
   return addOperator(operator, res)
 }

src/App/adapter/lib/helpers.js

@@ -3,4 +3,4 @@ export const stripEmptyKeys = (obj) =>
   Object.fromEntries(Object.entries(obj).filter(([, v]) => v && !isEmpty(v)))
 
 export const addOperator = (operator, list) =>
-  list.length > 1 ? { [operator]: list } : list.length > 0 ? list[0] : {}
+  list?.length > 1 ? { [operator]: list } : list?.length > 0 ? list[0] : {}

src/App/adapter/lib/state.js

@@ -55,12 +55,12 @@ export const enhancePagination = (config) => {
 
 export function parseState(state, endpoint) {
   const createGroup = createGroupFor(endpoint)
-  const config = state.find(({ label }) => label === LABEL_FOR_CONFIG)
+  const config = state.find(({ label }) => label === LABEL_FOR_CONFIG) || {}
   const {
     label: _,
     name: __,
     value: ___,
-    include: included,
+    include: included = [],
     ...base
   } = enhancePagination(config)
 

src/App/adapter/lib/state.test.js

@@ -9,7 +9,6 @@ import {
   FALLBACK_GROUP_OPERATOR,
 } from './state'
 
-//bellow is also needed to test createGroupForUsing
 const map = {
   techniques: {
     datasets: [],
@@ -91,12 +90,31 @@ describe('createGroupFor(endpoint)(object)', () => {
   })
 })
 
+describe('enhancePagination(config)', () => {
+  const config = {
+    label: "config's label",
+    foo: 'bar',
+  }
+  it('strips out keys page & pageSize', () => {
+    const withPageOnly = { ...config, page: 3 }
+    const withPageSizeOnly = { ...config, pageSize: 66 }
+    expect(enhancePagination(withPageOnly)).toEqual(config)
+    expect(enhancePagination(withPageSizeOnly)).toEqual(config)
+  })
+  it('produces keys skip & limit based on pageSize and page if both are present', () => {
+    const withBoth = { ...config, page: 3, pageSize: 66 }
+    const expected = { ...config, skip: 132, limit: 66 }
+    expect(enhancePagination(withBoth)).toEqual(expected)
+  })
+})
+
 describe('mergeState(inits, diffs)', () => {
   it('Works on empty arrays', () => {
     const inits = []
     const diffs = []
     expect(mergeState(inits, diffs)).toHaveLength(0)
   })
+
   it('Merges objects with matching labels', () => {
     const inits = [
       {
@@ -132,6 +150,7 @@ describe('mergeState(inits, diffs)', () => {
     ]
     expect(mergeState(inits, diffs)).toEqual(expected)
   })
+
   it('Merges "right"', () => {
     const inits = [
       {
@@ -155,7 +174,8 @@ describe('mergeState(inits, diffs)', () => {
     ]
     expect(mergeState(inits, diffs)).toEqual(expected)
   })
-  it('Only filters found in diffs get through', () => {
+
+  it('doesnt keep inactive filters', () => {
     const inits = [
       {
         label: '1',
@@ -185,12 +205,14 @@ describe('mergeState(inits, diffs)', () => {
     ]
     expect(mergeState(inits, diffs)).toEqual(expected)
   })
-  it('Config is never filtered out', () => {
+
+  it('config is never filtered out', () => {
     const inits = [{ label: LABEL_FOR_CONFIG }]
     const diffs = []
     expect(mergeState(inits, diffs)).toEqual(inits)
   })
-  it('Objects whose labels match the group key of any object in diffs are not filtered out', () => {
+
+  it('groups targeted by active filters are not filtered out', () => {
     const inits = [{ label: 'group' }]
     const diffs = [
       {
@@ -203,4 +225,7 @@ describe('mergeState(inits, diffs)', () => {
   })
 })
 
-describe('parseState(state, endpoint)', () => {})
+describe('parseState(state, endpoint)', () => {
+  const state = []
+  const [include, where, base] = parseState(state, 'documents')
+})

src/App/adapter/targets.json

@@ -1,7 +1,5 @@
 {
-  "parameters": {
-    "documents": ["datasets"]
-  },
+  "parameters": {},
   "techniques": {
     "documents": ["datasets"]
   },

src/App/stores.js

@@ -14,10 +14,12 @@ export const useAppStore = create((set, get) => ({
   //   set(() => ({ isDark: newTheme }));
   // },
 
-  loadOnScroll: false,
+  loadOnScroll: true,
   toggleLoadOnScroll: () => {
     set(() => ({ loadOnScroll: !get().loadOnScroll }))
   },
+  query: '{}',
+  setQuery: (str) => set(() => ({ query: str })),
 }))
 
 export const useSearchStore = create((set, get) => ({

src/Document/RecView.js

@@ -0,0 +1,35 @@
+const view = (pairs) => {
+  const reducer = (acc, scope) => {
+    const [k, v] = scope
+
+    if (Array.isArray(v)) {
+      return [
+        ...acc,
+        <>
+          array {k}, {v.map(view)}
+        </>,
+      ]
+    }
+
+    if (Object(v) === v) {
+      const pairs = Object.entries(v)
+      return [
+        ...acc,
+        <>
+          nested {k} {view(pairs)}
+        </>,
+      ]
+    }
+
+    return [
+      ...acc,
+      <>
+        basic {k} {v}
+      </>,
+    ]
+  }
+
+  return pairs.reduce(reducer, [])
+}
+
+export default view

src/Explore/DocumentItem.js

@@ -31,16 +31,6 @@ function DocumentItem(props) {
 
       <Card width={[1, 2 / 3, 3 / 4]}>
         <Heading>{title}</Heading>
-        {keywords && (
-          <Flex>
-            {keywords.map((keyword) => (
-              <Text key={keyword} variant="keyword" mr={[1, 2]}>
-                {keyword.toLowerCase()}
-              </Text>
-            ))}
-          </Flex>
-        )}
-
         <Box
           as="p"
           sx={{
@@ -57,7 +47,6 @@ function DocumentItem(props) {
 
         <Flex as="footer" gap={2} mt={2} fontStyle="italic" fontSize="small">
           <Text>Created: {parseDate(releseDate)}</Text>
-          <Text>Size: {documentSize(datasets)}</Text>
         </Flex>
       </Card>
 

src/Explore/DocumentList.js

@@ -1,55 +1,61 @@
 import React, { Suspense, useEffect, useState } from 'react'
 import { useInView } from 'react-intersection-observer'
+import { translate } from '../filters'
 import { useSWRInfinite } from 'swr'
 
 import Boundary from '../App/Boundary'
 import Spinner from '../App/Spinner'
-import translate from '../App/adapter/translate'
 import { useAppStore } from '../App/stores'
 import { Flex, Card, Text, Heading, Button, Box } from '../Primitives'
-import { initialFilters, useFilters } from '../filters'
+import { useFilters } from '../filters'
 import DocumentItem from './DocumentItem'
+import Debug from './QueryDebug'
+
+const PAGE_SIZE = 5
+const QUERY_CONFIG = {
+  include: ['datasets', 'affiliation', 'person'],
+  pageSize: PAGE_SIZE,
+  label: 'c',
+}
 
-const decode = (query) => JSON.parse(decodeURIComponent(query))
 function DocumentList() {
   const loadOnScroll = useAppStore((state) => state.loadOnScroll)
-  const QUERY_CONFIG = {
-    include: ['affiliation', 'parameters', 'person'],
-    label: 'c',
-    limit: 25,
-  }
-  const test = [
-    {
-      label: 'c',
-      skip: 5,
-    },
-  ]
-  const state = useFilters()
-  const query = translate(initialFilters)('documents', [
-    ...state,
-    ...test,
-    QUERY_CONFIG,
+  const [query, setQuery] = useAppStore((state) => [
+    state.query,
+    state.setQuery,
   ])
-  console.log('query')
-  console.log(decode(query))
-  const { data, size, setSize, error } = useSWRInfinite((page, previous) => {
-    return `/documents?filter=${query}`
+  const filters = useFilters()
+
+  const { data, size, setSize, error } = useSWRInfinite((page) => {
+    const filter = translate('documents', [
+      ...filters,
+      { ...QUERY_CONFIG, page: page + 1 },
+    ])
+    if (filter !== query) {
+      setQuery(filter)
+    }
+    return `/documents?filter=${filter}`
   })
 
   // Infinite scroll
   const { ref: infiniteScrollRef, inView } = useInView()
+  useEffect(() => {
+    loadOnScroll && inView && setSize((val) => val + 1)
+  }, [loadOnScroll, inView, setSize])
+  if (error) {
+    return <>Opps</>
+  }
 
-  const documents = data?.flat() || []
-
-  const isEmpty = documents.length === 0
+  const documents = data && data.flat()
+  const isEmpty = documents?.length === 0 || !documents
   const isLoadingMore = !data[size - 1]
-  const hasReachedEnd = data[data.length - 1].length < 25
+  const hasReachedEnd = data[data.length - 1].length < PAGE_SIZE
 
   return (
     <Boundary>
       <Suspense fallback={<Spinner />}>
         <Flex column gap={[3, 3, 3, 4]}>
-          {isEmpty || error ? (
+          {isEmpty ? (
             <Card p={[3, 4]}>
               <Heading>No results</Heading>
               <Text as="p">Please adjust the search filters.</Text>
@@ -66,7 +72,13 @@ function DocumentList() {
               ) : loadOnScroll ? (
                 <Box ref={infiniteScrollRef} />
               ) : (
-                <></>
+                <Button
+                  variant="primary"
+                  alignSelf="flex-start"
+                  onClick={() => setSize((val) => val + 1)}
+                >
+                  Load more results
+                </Button>
               )}
             </>
           )}

src/Explore/ExplorePage.js

@@ -2,15 +2,17 @@ import React, { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 
 import Boundary from '../App/Boundary'
-import { useSearchStore } from '../App/stores'
+import { useSearchStore, useAppStore } from '../App/stores'
 import { Flex, Box } from '../Primitives'
 import Search from '../Search/Search'
 import DocumentList from './DocumentList'
+import Debug from './QueryDebug'
 
 function ExplorePage(props) {
   const { isDesktop } = props
   const { search } = useLocation()
   const setSearch = useSearchStore((state) => state.setSearch)
+  const query = useAppStore((state) => state.query)
 
   useEffect(() => {
     setSearch(search)
@@ -41,6 +43,7 @@ function ExplorePage(props) {
         </Box>
       )}
       <Box width={[1, 1, 3 / 4]}>
+        <Debug query={query} />
         <Boundary>
           <DocumentList name="Data" />
         </Boundary>

src/Explore/QueryDebug.js

@@ -0,0 +1,43 @@
+import { useState } from 'react'
+import { Button, Flex } from '../Primitives'
+import JSONView from 'react-json-view'
+
+const decode = (query) => JSON.parse(decodeURIComponent(query))
+
+const Debug = ({ query }) => {
+  const json = decode(query)
+  const [show, setShow] = useState(false)
+
+  return (
+    <Flex column>
+      <Button onClick={() => setShow(!show)}>
+        {show ? 'Hide query' : 'Show query'}
+      </Button>
+      {show && (
+        <JSONView
+          src={json}
+          theme={{
+            base00: 'white',
+            base01: '#ddd',
+            base02: '#ddd',
+            base03: '#444',
+            base04: 'purple',
+            base05: '#444',
+            base06: '#444',
+            base07: '#444',
+            base08: '#444',
+            base09: 'rgba(70, 70, 230, 1)',
+            base0A: 'rgba(70, 70, 230, 1)',
+            base0B: 'rgba(70, 70, 230, 1)',
+            base0C: 'rgba(70, 70, 230, 1)',
+            base0D: 'rgba(70, 70, 230, 1)',
+            base0E: 'rgba(70, 70, 230, 1)',
+            base0F: 'rgba(70, 70, 230, 1)',
+          }}
+        />
+      )}
+    </Flex>
+  )
+}
+
+export default Debug