fix: #447 #451 #453 and legality alias stopping default

src/components/SearchBar/SearchBar.tsx

@@ -35,7 +35,7 @@ const SearchBar: React.FC<Props> = ({ onHomepage, className }: Props) => {
     e.preventDefault();
 
     if (typeof inputValue === "string" && inputValue.trim()) {
-      router.push(`/search/?q=${inputValue}`);
+      router.push(`/search/?q=${encodeURIComponent(inputValue)}`);
     }
   };
 

src/pages/combo/[id].tsx

@@ -112,7 +112,7 @@ const Combo = ({ combo }: Props) => {
         useCropDimensions
       />
       <CardHeader cardsArt={cardArts} title={title} subtitle={subtitle} />
-      {loaded && <CardGroup cards={cards} />}
+      {loaded && <CardGroup key={combo.id} cards={cards} />}
       <div className="container md:flex flex-row">
         <div className="w-full md:w-2/3">
           <div className="md:hidden pt-4">

src/pages/search.tsx

@@ -176,16 +176,25 @@ export default Search;
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   let query = `${context.query.q}`
-  if (!query.includes('legal:')) query = `${query} legal:commander`
-
+  if (!query.includes('legal:') && !query.includes('banned:') && !query.includes('format:')) query = `${query} legal:commander`
   const requestService = new RequestService(context)
   const order = context.query.order || DEFAULT_ORDER
   const sort = context.query.sort || DEFAULT_SORT
   const ordering = order === 'auto' ? `${AUTO_SORT_MAP[sort as string] || ''}${sort}` : `${order === 'asc' ? '' : '-'}${sort}`
-  const results = await requestService.get<PaginatedResponse<Variant>>(`${process.env.NEXT_PUBLIC_EDITOR_BACKEND_URL}/variants/?q=${query}&limit=${PAGE_SIZE}&offset=${((Number(context.query.page) || 1) - 1) * PAGE_SIZE}&ordering=${ordering}`)
+  const url = `${process.env.NEXT_PUBLIC_EDITOR_BACKEND_URL}/variants/?q=${query}&limit=${PAGE_SIZE}&offset=${((Number(context.query.page) || 1) - 1) * PAGE_SIZE}&ordering=${ordering}`
+  const results = await requestService.get<PaginatedResponse<Variant>>(url)
 
   const backendCombos = results ? results.results : []
 
+  if (backendCombos.length === 1) {
+    return {
+      redirect: {
+        destination: `/combo/${backendCombos[0].id}`,
+        permanent: false,
+      },
+    }
+  }
+
   return {
     props: {
       combos: backendCombos,

src/pages/submit-a-combo.tsx

@@ -17,6 +17,8 @@ import requestService from "../services/request.service";
 import Loader from "../components/layout/Loader/Loader";
 import ErrorMessage from "../components/submission/ErrorMessage/ErrorMessage";
 import {ComboSubmissionErrorType} from "../lib/types";
+import Alert from "components/layout/Alert/Alert";
+import {GetServerSideProps} from "next";
 
 
 type Props = {};
@@ -76,13 +78,6 @@ const SubmitACombo: React.FC<Props> = ({}: Props) => {
     setKeyId(keyId + 1)
   }
 
-  useEffect(() => {
-    if (!cookies.csbUsername || !cookies.csbJwt) {
-      router.push('/login?final=submit-a-combo')
-    }
-  }, [cookies.csbJwt, cookies.csbUsername])
-
-
   const handleSubmit = async () => {
     const submission = {
       uses: cards,
@@ -230,6 +225,16 @@ const SubmitACombo: React.FC<Props> = ({}: Props) => {
         </div>
         <button className="button" onClick={handleAddFeature}>Add Feature</button>
 
+        {cards.length > 5 &&
+          <Alert type="warning" icon="triangleExclamation" title="Warning">
+            This combo might be denied because it is over our five-card maximum. These tips will increase the chances of the combo making it onto Commander Spellbook:
+            <ul className="list-disc list-inside">
+              <li>If a card has many replacements in this combo’s color identity, cut it and use the generic card template instead. For example, “A Dragon creature” or “A way to give indestructible” can replace a specific card.</li>
+              <li>Cut any cards that are not required to keep the combo going, even if they are needed to win the game. We don’t need to list Blood Artist or Impact Tremors on every page.”</li>
+            </ul>
+          </Alert>
+        }
+
         <div className="flex justify-center">
           <button disabled={submitting} className="button" onClick={handleSubmit}>{submitting ? <Loader/> : 'Submit Combo'}</button>
         </div>
@@ -247,3 +252,17 @@ const SubmitACombo: React.FC<Props> = ({}: Props) => {
 };
 
 export default SubmitACombo;
+
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const cookies = context.req.cookies
+  if (!cookies.csbUsername || !cookies.csbJwt) {
+    return {
+      redirect: {
+        destination: '/login?final=submit-a-combo',
+        permanent: false,
+      }
+    }
+  }
+  return {props: {}}
+}