@uncinc/uncinc-react-kitchen-sink 2.1.12 → 2.1.13

package/dist/components/SearchKit/Query/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { gql, useQuery } from '@apollo/client';
 import { useSearchkitVariables } from '@searchkit/client';
 import SearchPage from '../SearchPage';
@@ -21,13 +21,21 @@ function Query({
     loading
   } = useQuery(graphQuery, {
     variables
-  });
+  }); // In between searches, Searchkit will empty it's results, resulting
+  // in a re-render with an empty screen. Use a local state to prevent this.
+
+  const [dataLoaded, setDataLoaded] = useState(null);
+  useEffect(() => {
+    if (data) {
+      setDataLoaded(data);
+    }
+  }, [data]);
 
   if (!useRouting) {
-    return /*#__PURE__*/React.createElement("div", null, children(data, loading));
+    return /*#__PURE__*/React.createElement("div", null, children(dataLoaded, loading));
   }
 
-  return /*#__PURE__*/React.createElement(SearchPage, null, children(data, loading));
+  return /*#__PURE__*/React.createElement(SearchPage, null, children(dataLoaded, loading));
 }
 
 export default Query;

package/dist/components/SearchKit/SearchField/index.js

@@ -26,7 +26,8 @@ const SearchField = ({
     initialValues: {
       query: query
     },
-    displayRequiredIndicator: "required"
+    displayRequiredIndicator: "required",
+    enableReinitialize: true
   }, /*#__PURE__*/React.createElement(TextField, {
     fieldName: "query",
     title: "Search",

package/dist/components/SearchKit/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import Query from './Query';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { SearchkitProvider, SearchkitClient } from '@searchkit/client';
@@ -24,19 +24,39 @@ const defaultChildren = (data, loading) => /*#__PURE__*/React.createElement(Reac
 const SearchKit = ({
   query,
   uri,
-  children,
-  pageSize = 5,
-  useRouting = true
+  pageSize = 10,
+  useRouting = true,
+  defaultFilters = {},
+  defaultQuery = '',
+  children
 }) => {
-  const client = new ApolloClient({
-    uri: uri,
-    cache: new InMemoryCache()
-  });
-  const skClient = new SearchkitClient();
+  const client = useMemo(() => {
+    return new ApolloClient({
+      uri: uri,
+      cache: new InMemoryCache()
+    });
+  }, [uri]);
+  const skClient = useMemo(() => {
+    const skClient = new SearchkitClient();
+
+    if (!useRouting) {
+      skClient.updateBaseSearchState({
+        filters: defaultFilters,
+        query: defaultQuery,
+        page: {
+          size: pageSize,
+          from: 0
+        }
+      });
+    }
+
+    return skClient;
+  }, [useRouting, defaultFilters, defaultQuery, pageSize]);
   return /*#__PURE__*/React.createElement(ApolloProvider, {
     client: client
   }, /*#__PURE__*/React.createElement(SearchkitProvider, {
-    client: skClient
+    client: skClient,
+    key: `${defaultQuery}-${defaultFilters.toString()}`
   }, /*#__PURE__*/React.createElement(Query, {
     query: query,
     useRouting: useRouting
@@ -45,6 +65,10 @@ const SearchKit = ({
 
 SearchKit.propTypes = {
   queryString: PropTypes.string,
-  uri: PropTypes.string
+  uri: PropTypes.string,
+  pageSize: PropTypes.number,
+  useRouting: PropTypes.bool,
+  defaultFilters: PropTypes.object,
+  defaultQuery: PropTypes.string
 };
 export default SearchKit;

package/dist/components/SearchKit/stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSearchkit } from '@searchkit/client';
 import classNames from 'classnames';
 import SearchKit from '.';
@@ -46,7 +46,7 @@ const query = `
         }
         query
       }
-      hits(page: $page, sortBy: "relevance") {
+      hits(page: $page) {
         sortedBy
         page {
           total
@@ -178,4 +178,41 @@ export const CustomFacets = () => {
   }), /*#__PURE__*/React.createElement(SearchPagination, {
     data: data
   })));
+};
+export const Test = () => {
+  const [q, setQ] = useState(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    onChange: e => setQ(e.target.value),
+    value: q
+  }), /*#__PURE__*/React.createElement(SearchKit, {
+    uri: "http://localhost:4000/api/graphql",
+    query: query,
+    useRouting: false,
+    filters: [{
+      identifier: 'type',
+      value: 'article'
+    }],
+    searchQuery: q
+  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResults, {
+    data: data,
+    renderItem: SearchItem,
+    renderHeader: SearchHeader
+  }), /*#__PURE__*/React.createElement(SearchPagination, {
+    data: data
+  }))), /*#__PURE__*/React.createElement(SearchKit, {
+    uri: "http://localhost:4000/api/graphql",
+    query: query,
+    useRouting: false,
+    filters: [{
+      identifier: 'type',
+      value: 'landing_page'
+    }],
+    searchQuery: q
+  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResults, {
+    data: data,
+    renderItem: SearchItem,
+    renderHeader: SearchHeader
+  }), /*#__PURE__*/React.createElement(SearchPagination, {
+    data: data
+  }))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.1.12",
+  "version": "2.1.13",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -35,30 +35,13 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@babel/cli": "^7.0.0-beta.44",
-    "@babel/helper-define-map": "^7.14.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/runtime": "^7.9.6",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "^40.0.0",
     "@loadable/component": "^5.15.0",
     "@searchkit/client": "^3.0.0-canary.45",
     "@searchkit/elastic-ui": "^3.0.0-canary.45",
-    "@storybook/addon-actions": "^6.2.8",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.2.8",
-    "@storybook/addons": "^6.2.8",
-    "@storybook/react": "^6.2.8",
-    "@storybook/theming": "^6.2.8",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
     "apollo-server-micro": "^3.4.0",
     "bootstrap": "^4.3.1",
-    "chai": "^4.2.0",
-    "cross-env": "^7.0.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "formik": "^2.2.6",
     "graphql": "^15.7.0",
@@ -84,11 +67,9 @@
     "react-redux": "^7.2.4",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
-    "react-scripts": "3.4.1",
     "react-select": "^3.1.0",
     "react-share": "^4.3.1",
     "react-slick": "^0.27.14",
-    "react-test-renderer": "^16.13.1",
     "redux": "^4.0.5",
     "sass-loader": "^8.0.2",
     "slick-carousel": "^1.8.1"
@@ -115,7 +96,6 @@
     "react-test-renderer": "^16.13.1",
     "sinon": "^9.0.2",
     "sinon-chai": "^3.5.0",
-    "slick-carousel": "^1.8.1",
     "storybook-addon-export-stories": "^1.0.0"
   },
   "eslintConfig": {

package/dist/pages/api/graphql.js

@@ -1,25 +0,0 @@
-import { ApolloServer, gql } from 'apollo-server-micro';
-export const config = {
-  api: {
-    bodyParser: false
-  }
-};
-const typeDefs = [gql`
-    type Query {
-      root: String
-    }
-
-    type Mutation {
-      root: String
-    }
-  `];
-const server = new ApolloServer({
-  typeDefs,
-  resolvers: {},
-  introspection: true,
-  playground: true,
-  context: {}
-});
-export default server.createHandler({
-  path: '/api/graphql'
-});