fix search mobile;

build/640.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkchaoticbackup=self.webpackChunkchaoticbackup||[]).push([[640],{8640:(e,t,n)=>{n.r(t),n.d(t,{default:()=>u});var a=n(7462),l=n(1721),r=n(7294),o=n(3727),c=n(9637),i=(n(2188),function(){return r.createElement("a",{href:"https://github.com/chaoticbackup",className:"name",rel:"noreferrer noopener",target:"_blank"},"Chaotic Backup Project")}),s=function(e){var t=e.block,n=e.text,a=e.sets;return r.createElement("div",{className:"lore"},r.createElement("div",{className:"block"},t),n.map((function(e,t){return r.createElement("div",{key:t,dangerouslySetInnerHTML:{__html:e}})})),a.map((function(e,t){if(e.text&&e.text.length>0)return r.createElement("div",{className:"set",key:t},r.createElement("div",{className:"title"},e.title),e.text.map((function(e,t){return r.createElement("div",{key:t},e)})))})))},u=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),l=0;l<n;l++)a[l]=arguments[l];return(t=e.call.apply(e,[this].concat(a))||this).state={lore:[]},t}(0,l.Z)(t,e);var n=t.prototype;return n.componentDidMount=function(){var e=this;fetch("/public/json/starter_lore.json").then((function(e){return e.json()})).then((function(t){e.setState({lore:t})})).catch((function(){e.setState({lore:[{block:"Unable to load lore...",text:[]}]})}))},n.render=function(){return r.createElement("div",null,r.createElement("br",null),r.createElement("div",{className:"with-love"},r.createElement("div",null,"Welcome to the ",r.createElement(i,null),"."),r.createElement("span",null,"Built by fans for fans."),r.createElement("br",null),r.createElement("br",null),r.createElement("div",null,"Made with ",r.createElement("span",{className:"heart"},"♥")," by",r.createElement("br",null),"Danude Sandstorm (Project Lead)",r.createElement("br",null),"Chiodosin1 and IvanArial98 (Data Contributions)",r.createElement("br",null),"Blitser, Afjak, and Chiodosin1 (Art and Knowledge)"),r.createElement("div",null,"Do you like the site? You can donate to support it!"),r.createElement("div",{className:"donate"},r.createElement(c.U9,null)),r.createElement("div",{className:"lore"},"We were unsatisfied with the options on how to search for cards. I took the design of the old Chaotic website and added my own modernizations.  With an extensive lists of search options in the ",r.createElement(o.rU,{to:"/collection"},"collection"),", you'll find deck building mores streamlined than ever before.  Chaotic is full of rich lore, but unfortunately the best database of official lore disapeared when the ",r.createElement(o.rU,{to:"/portal"},"Portal to Perim")," disapeared along with the official site. You can again explore the official lore and information!"),r.createElement("br",null),this.state.lore.length>0?this.state.lore.map((function(e,t){return r.createElement(s,(0,a.Z)({key:t},e))})):"Loading lore entries..."))},t}(r.Component)}}]);

build/vendor.js.LICENSE.txt

@@ -26,6 +26,28 @@ See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
 
+/**
+ * React Router DOM v6.2.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.2.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
 /**
  * Tone.js
  * @author Yotam Mann
@@ -33,7 +55,7 @@ and limitations under the License.
  * @copyright 2014-2019 Yotam Mann
  */
 
-/** @license MUI v5.0.2
+/** @license MUI v5.2.5
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -48,15 +70,6 @@ and limitations under the License.
  * LICENSE file in the root directory of this source tree.
  */
 
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 /** @license React v16.14.0
  * react-dom.production.min.js
  *

package-lock.json

@@ -3242,23 +3242,6 @@
       "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
       "dev": true
     },
-    "@loadable/component": {
-      "version": "5.15.2",
-      "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.15.2.tgz",
-      "integrity": "sha512-ryFAZOX5P2vFkUdzaAtTG88IGnr9qxSdvLRvJySXcUA4B4xVWurUNADu3AnKPksxOZajljqTrDEDcYjeL4lvLw==",
-      "requires": {
-        "@babel/runtime": "^7.7.7",
-        "hoist-non-react-statics": "^3.3.1",
-        "react-is": "^16.12.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
-      }
-    },
     "@mui/base": {
       "version": "5.0.0-alpha.61",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.61.tgz",

src/components/_mobile/collection/Search.tsx

@@ -40,7 +40,7 @@ const initInput = (() => {
     sets: cardSets,
     types: { attack: false, battlegear: false, creature: false, location: false, mugic: false },
     rarity: { common: false, uncommon: false, rare: false, 'super rare': false, 'ultra rare': false, promo: false },
-    tribes: { danian: false, 'm\'arrillian': false, mipedian: false, overworld: false, underworld: false, generic: false },
+    tribes: { danian: false, ['m\'arrillian']: false, mipedian: false, overworld: false, underworld: false, generic: false },
     elements: { fire: false, air: false, earth: false, water: false, none: false, and: false },
     disciplines: { courage: '', power: '', wisdom: '', speed: '', max: false },
     energy: { min: '', max: '' },
@@ -93,13 +93,15 @@ function Search ({ setContent, setInfo }) {
 
   useEffect(() => {
     if (location.search != prevSearch.current) {
+      setOpen(false);
       prevSearch.current = location.search;
       dispatchInput(parseQuery(initInput, location));
+      handleSearch();
     }
   }, [location.search]);
 
   const cleanInput = () => {
-    dispatchInput({ ...initInput });
+    dispatchInput(initInput);
   };
 
   const handleSearch = (event?: FormEvent) => {
@@ -108,8 +110,9 @@ function Search ({ setContent, setInfo }) {
       event.stopPropagation();
       
       const queryString = updateQuery(input);
-      prevSearch.current = `?${queryString}`;
-      navigate(`/collection/?${queryString}`);
+
+      prevSearch.current = queryString;
+      navigate(`/collection/${queryString}`);
       setOpen(false);
     }
 
@@ -141,8 +144,8 @@ function Search ({ setContent, setInfo }) {
   const handleClose = () => {setOpen(false)};
 
   const generate = (type: string, row: boolean, label: (item: string) => string | number | React.ReactElement) => {
-    return Object.keys(input[type]).map((item, i) => (
-      <FormControlLabel style={{ display: "inline" }} key={i} control={
+    return Object.keys(input[type]).map((item) => (
+      <FormControlLabel style={{ display: "inline" }} key={item} control={
         <Checkbox checked={input[type][item]} onChange={handleChange(item, type)} />
       } label={label(item)} />
     ));
@@ -359,7 +362,7 @@ function Search ({ setContent, setInfo }) {
 }
 
 const parseQuery = (init: typeof initInput, location) => {
-  const input = Object.assign({}, init);
+  const input = JSON.parse(JSON.stringify(init));
   const queryString = location.search.toLowerCase();
 
   const query = {} as any;
@@ -369,32 +372,34 @@ const parseQuery = (init: typeof initInput, location) => {
     query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
   }
 
-  // query -> input
-  queryList.forEach((d) => {
-    if (query[d]) {
-      query[d].split(',').map(item => {
-        input[d][item] = true;
-      });
-    }
-  });
+  if (Object.keys(query).length > 0) {
+    // query -> input
+    queryList.forEach((d) => {
+      if (query[d]) {
+        query[d].split(',').map(item => {
+          if (item) input[d][item] = true;
+        });
+      }
+    });
 
-  if (query.hasOwnProperty('name')) input.name = query.name;
-  if (query.hasOwnProperty('text')) input.text = query.text;
-  if (query.hasOwnProperty('subtypes')) input.subtypes = query.subtypes;
-  if (query.hasOwnProperty('courage')) input.disciplines.courage = query.courage;
-  if (query.hasOwnProperty('power')) input.disciplines.power = query.power;
-  if (query.hasOwnProperty('wisdom')) input.disciplines.wisdom = query.wisdom;
-  if (query.hasOwnProperty('speed')) input.disciplines.speed = query.speed;
-  if (query.hasOwnProperty('disc_max')) input.disciplines.max = !!query.disc_max;
-  if (query.hasOwnProperty('energy')) {
-    const q = query.energy.split(',');
-    if (q[0] >= 0) input.energy.min = q[0];
-    if (q[1] >= 0) input.energy.max = q[1];
-  }
-  if (query.hasOwnProperty('mcbp')) {
-    const q = query.mcbp.split(',');
-    if (q[0] >= 0) input.mcbp.min = q[0];
-    if (q[1] >= 0) input.mcbp.max = q[1];
+    if (query.hasOwnProperty('name')) input.name = query.name;
+    if (query.hasOwnProperty('text')) input.text = query.text;
+    if (query.hasOwnProperty('subtypes')) input.subtypes = query.subtypes;
+    if (query.hasOwnProperty('courage')) input.disciplines.courage = query.courage;
+    if (query.hasOwnProperty('power')) input.disciplines.power = query.power;
+    if (query.hasOwnProperty('wisdom')) input.disciplines.wisdom = query.wisdom;
+    if (query.hasOwnProperty('speed')) input.disciplines.speed = query.speed;
+    if (query.hasOwnProperty('disc_max')) input.disciplines.max = !!query.disc_max;
+    if (query.hasOwnProperty('energy')) {
+      const q = query.energy.split(',');
+      if (q[0] >= 0) input.energy.min = q[0];
+      if (q[1] >= 0) input.energy.max = q[1];
+    }
+    if (query.hasOwnProperty('mcbp')) {
+      const q = query.mcbp.split(',');
+      if (q[0] >= 0) input.mcbp.min = q[0];
+      if (q[1] >= 0) input.mcbp.max = q[1];
+    }
   }
 
   return input;
@@ -406,7 +411,7 @@ const updateQuery = (input) => {
   queryList.forEach(query => {
     let temp = "";
     Object.keys(input[query]).forEach((item) => {
-      if (input[query][item] == true) temp += `${item},`;
+      if (input[query][item] == true) temp += `${encodeURIComponent(item)},`;
     });
     if (temp.length > 0) {
       queryString += `${query}=${temp.replace(/\,$/, '&')}`;
@@ -437,7 +442,10 @@ const updateQuery = (input) => {
   }
 
   // Strip trailing &
-  queryString = queryString.replace(/\&$/, '');
+  // uriEncode single quote
+  queryString = queryString.replace(/\&$/, '').replace(/'/, "%27");
+
+  if (queryString.length > 0) queryString = `?${queryString}`;
 
   return queryString;
 };