From 22e7f04eb68e600da926d9636514b822c84c55a3 Mon Sep 17 00:00:00 2001
From: salamca <tomaz.bevk@gmail.com>
Date: Sun, 31 Dec 2023 17:44:26 +0100
Subject: [PATCH] Crags page wip.

---
 src/app/[lang]/crags/[countrySlug]/page.tsx   |   2 +
 .../crags/components/filtered-crags.tsx       | 351 ++++++++++++++++++
 src/app/[lang]/crags/page.tsx                 |  58 +++
 src/app/sandbox/nested-filters-test/page.tsx  | 125 +++++++
 src/components/content-header.tsx             |  23 ++
 src/graphql/generated.ts                      |  15 +
 6 files changed, 574 insertions(+)
 create mode 100644 src/app/[lang]/crags/components/filtered-crags.tsx
 create mode 100644 src/app/[lang]/crags/page.tsx
 create mode 100644 src/app/sandbox/nested-filters-test/page.tsx
 create mode 100644 src/components/content-header.tsx

diff --git a/src/app/[lang]/crags/[countrySlug]/page.tsx b/src/app/[lang]/crags/[countrySlug]/page.tsx
index 618e34bb..cee5ef88 100644
--- a/src/app/[lang]/crags/[countrySlug]/page.tsx
+++ b/src/app/[lang]/crags/[countrySlug]/page.tsx
@@ -15,6 +15,8 @@ type Params = {
   countrySlug: string;
 };
 
+// TODO: Do we need this page at all?
+
 async function CragsPage({ params }: { params: Params }) {
   const { data } = await urqlServer().query(CountryBySlugWithCragsDocument, {
     country: params.countrySlug,
diff --git a/src/app/[lang]/crags/components/filtered-crags.tsx b/src/app/[lang]/crags/components/filtered-crags.tsx
new file mode 100644
index 00000000..681cecae
--- /dev/null
+++ b/src/app/[lang]/crags/components/filtered-crags.tsx
@@ -0,0 +1,351 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/breadcrumbs";
+import ContentHeader from "@/components/content-header";
+import Button from "@/components/ui/button";
+import Checkbox from "@/components/ui/checkbox";
+import IconClose from "@/components/ui/icons/close";
+import IconCollapse from "@/components/ui/icons/collapse";
+import IconColumns from "@/components/ui/icons/columns";
+import IconExpand from "@/components/ui/icons/expand";
+import IconFilter from "@/components/ui/icons/filter";
+import IconMap from "@/components/ui/icons/map";
+import IconMore from "@/components/ui/icons/more";
+import IconSearch from "@/components/ui/icons/search";
+import IconSort from "@/components/ui/icons/sort";
+import Link from "@/components/ui/link";
+import TextField from "@/components/ui/text-field";
+import { Country, Crag } from "@/graphql/generated";
+import {
+  parseAsArrayOf,
+  parseAsString,
+  useQueryStates,
+} from "next-usequerystate";
+import { useState } from "react";
+
+type TFilteredCragsProps = {
+  crags: Crag[];
+  countries: Country[];
+};
+
+// TODO:
+/**
+ * what should happen when none in the filter group is selected??
+ * - show all, or show none?
+ * - could be show none and default to all selected, but then we will get giant urls imediately...
+ */
+
+function FilteredCragsNEW({ crags, countries }: TFilteredCragsProps) {
+  const [filters, setFilters] = useQueryStates({
+    countries: parseAsArrayOf(parseAsString),
+    areas: parseAsArrayOf(parseAsString),
+  });
+
+  // const [filters, setFilters] = useState<{
+  //   countries: string[];
+  //   areas: string[];
+  // }>({
+  //   countries: [],
+  //   areas: [],
+  // });
+
+  // null in useQueryState value means no value, but we need empty array
+  function nullToEmpty(filters: Record<string, string[] | null>) {
+    const eFilters: Record<string, string[]> = {};
+    Object.entries(filters).forEach(([key, value]) => {
+      eFilters[key] = value || [];
+    });
+    return eFilters;
+  }
+
+  // We need null in useQueryState value instead of empty array
+  function emptyToNull(filters: Record<string, string[]>) {
+    const nFilters: Record<string, string[] | null> = {};
+    Object.entries(filters).forEach(([key, value]) => {
+      nFilters[key] = value.length ? value : null;
+    });
+    return nFilters;
+  }
+
+  // Filter crags based on filters state
+  const eFilters = nullToEmpty(filters);
+  const filteredCrags = crags.filter(
+    (crag: Crag) =>
+      eFilters.countries.includes(crag.country.slug) &&
+      crag.area &&
+      eFilters.areas.includes(crag.area.slug)
+  );
+
+  // A list of countries to choose from in the filter pane (all countries)
+  const shownCountries: Record<string, string> = {};
+  crags.forEach(
+    (crag) => (shownCountries[crag.country.slug] = crag.country.name)
+  );
+
+  // A list of areas to choose from in the filter pane (only areas of countries currently visible)
+  const shownAreas: Record<string, string> = {};
+  filters.countries?.forEach((country) => {
+    countries
+      .find((c) => c.slug === country)
+      ?.areas.forEach((area) => {
+        shownAreas[area.slug] = area.name;
+      });
+  });
+
+  // TODO: dummy, until we determine how to handle this (divide crags or not)
+  const routeTypes = {
+    sport: "športne",
+    boulder: "balvani",
+    multipitch: "večraztežajne",
+  };
+
+  function handleCountryFilterChange(checked: boolean, country: string) {
+    setFilters((filters) => {
+      const eFilters = nullToEmpty(filters);
+
+      if (checked) {
+        // add country
+        return emptyToNull({
+          ...eFilters,
+          countries: [...eFilters.countries, country],
+        });
+      } else {
+        // remove country
+        return emptyToNull({
+          ...eFilters,
+          countries: eFilters.countries.filter((c) => c != country),
+
+          // when a country is removed, we should also remove all (possibly selected) areas of this country
+          areas: eFilters.areas.filter(
+            (area) =>
+              !countries
+                .filter((c) => c.slug === country)[0]
+                .areas.map((a) => a.slug)
+                .includes(area)
+          ),
+        });
+      }
+    });
+  }
+
+  function handleAreaFilterChange(checked: boolean, area: string) {
+    setFilters((filters) => {
+      const eFilters = nullToEmpty(filters);
+      if (checked) {
+        // add area
+        return emptyToNull({ ...eFilters, areas: [...eFilters.areas, area] });
+      } else {
+        // remove area
+        return emptyToNull({
+          ...eFilters,
+          areas: eFilters.areas.filter((a) => a != area),
+        });
+      }
+    });
+  }
+
+  // On smaller screens filter pane can be collapsed
+  const [filtersPaneOpened, setFiltersPaneOpened] = useState(false);
+  const handleToggleFilterPane = () => {
+    setFiltersPaneOpened(!filtersPaneOpened);
+  };
+
+  return (
+    <>
+      <ContentHeader
+        heading="Plezališča"
+        breadcrumbs={
+          <Breadcrumbs
+            items={[
+              { label: "Plezanje.net", link: "/" },
+              { label: "Plezališča", link: "" },
+            ]}
+          />
+        }
+      />
+
+      {/* Actions row */}
+      {/* 
+        for <sm: all icons, including search are displayed centered.
+        for >=sm: search icon becomes search text field and sticks right, all other icons stick left
+        for <md: filter pane is triggered by filter icon
+        for >=md: filter pane is always visible, filter icon dissapears
+      */}
+      <div className="mx-auto flex items-center justify-center px-4 py-4 2xl:container xs:px-8 sm:justify-between">
+        <div className="flex justify-center">
+          <div className="">
+            <IconMap />
+          </div>
+          <div className="ml-4 border-l border-neutral-300 pl-4 md:hidden">
+            <Button renderStyle="icon" onClick={handleToggleFilterPane}>
+              <IconFilter />
+            </Button>
+          </div>
+          <div className="ml-4 border-l border-neutral-300 pl-4">
+            <IconColumns />
+          </div>
+          <div className="ml-4 border-l border-neutral-300 pl-4">
+            <IconSort />
+          </div>
+          <div className="ml-4 border-l border-neutral-300 pl-4 sm:hidden">
+            <IconSearch />
+          </div>
+          <div className="ml-4 border-l border-neutral-300 pl-4">
+            <IconMore />
+          </div>
+        </div>
+
+        <div className="hidden min-w-0 xs:ml-8 xs:w-80 xs:border-none sm:block">
+          <TextField
+            // ref={searchFieldRef}
+            prefix={<IconSearch />}
+            placeholder="Poišči po imenu"
+            aria-label="Poišči po imenu"
+            // onChange={handleSearchFieldChange}
+            // value={}
+            suffix={
+              <span className="flex">
+                <Button renderStyle="icon" onClick={() => {}}>
+                  <IconClose />
+                </Button>
+              </span>
+            }
+          />
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className="mx-auto flex items-start px-4 2xl:container xs:px-8">
+        {/* Filters pane */}
+        {/* on >=md pane is always visible and is displayed as a card
+            on <md pane slides in from the side when filters are being changed */}
+        <div
+          className={`absolute left-0 w-80 shrink-0 rounded-r-lg bg-neutral-100 transition-transform md:relative md:block md:rounded-lg ${
+            filtersPaneOpened
+              ? "translate-x-0"
+              : "-translate-x-80 md:translate-x-0"
+          }`}
+        >
+          <div className="flex px-8 pb-1 pt-6">
+            <div>
+              <IconFilter />
+            </div>
+            <div className="ml-4">Filtriraj</div>
+          </div>
+
+          <FilterGroup
+            title="Država"
+            options={shownCountries}
+            // TODO: tweak this
+            nrShown={3}
+            checkedOptions={filters.countries || []}
+            onChange={handleCountryFilterChange}
+          />
+          <FilterGroup
+            title="Območje"
+            options={shownAreas}
+            // TODO: tweak this
+            nrShown={3}
+            checkedOptions={filters.areas || []}
+            onChange={(checked, area) => {
+              handleAreaFilterChange(checked, area);
+            }}
+          />
+
+          <div className="mt-5 border-t border-neutral-200 px-8 pt-5">
+            <Checkbox label="Prikaži samo vidna na zemljevidu" />
+          </div>
+
+          <FilterGroup
+            title="Tip smeri"
+            options={routeTypes}
+            // TODO: tweak this
+            nrShown={2}
+            checkedOptions={[]}
+            onChange={() => {
+              console.log("dummy");
+            }}
+          />
+        </div>
+
+        {/* List of crags */}
+        <div className="md:ml-5">
+          {filteredCrags.map((crag: Crag) => (
+            <div key={crag.id}>{crag.name}</div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
+
+// TODO: export component to own file?
+type TFilterGroupProps = {
+  title: string;
+  nrShown: number;
+  options: Record<string, string>;
+  checkedOptions: string[];
+  onChange: (checked: boolean, optionValue: string) => void;
+};
+
+function FilterGroup({
+  title,
+  options,
+  nrShown,
+  checkedOptions,
+  onChange,
+}: TFilterGroupProps) {
+  const [expanded, setExpanded] = useState(true);
+  const [showAll, setShowAll] = useState(false);
+
+  function handleToggleExpanded() {
+    setExpanded(!expanded);
+  }
+
+  function handleToggleShowAll() {
+    setShowAll(!showAll);
+  }
+
+  return (
+    <div className="mt-5 border-t border-neutral-200 px-8 pt-5">
+      {/* Header that can collapse the filter group */}
+      <div className="-mx-1">
+        <button
+          className="w-full rounded px-1 outline-none ring-blue-100 focus-visible:ring"
+          onClick={handleToggleExpanded}
+        >
+          <div className="flex items-start justify-between">
+            <div>{title}</div>
+            {expanded ? <IconCollapse /> : <IconExpand />}
+          </div>
+        </button>
+      </div>
+
+      {/* Filter group content/options(checkboxes) */}
+      {expanded && (
+        <div className="mt-2">
+          {Object.entries(options)
+            .slice(0, showAll ? Object.keys(options).length : nrShown)
+            .map(([optionValue, optionLabel], index) => (
+              <div key={optionValue} className={`${index > 0 ? "mt-1" : ""}`}>
+                <Checkbox
+                  label={optionLabel}
+                  onChange={(checked) => {
+                    onChange(checked, optionValue);
+                  }}
+                  checked={checkedOptions.includes(optionValue)}
+                />
+              </div>
+            ))}
+          <div className="mt-1">
+            <Link onPress={handleToggleShowAll}>
+              {showAll ? "Prikaži manj" : "Prikaži vse"}
+            </Link>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default FilteredCragsNEW;
diff --git a/src/app/[lang]/crags/page.tsx b/src/app/[lang]/crags/page.tsx
new file mode 100644
index 00000000..7859570c
--- /dev/null
+++ b/src/app/[lang]/crags/page.tsx
@@ -0,0 +1,58 @@
+import urqlServer from "@/graphql/urql-server";
+import { gql } from "urql";
+import { AllCountriesDocument, AllCragsDocument } from "@/graphql/generated";
+import FilteredCrags from "./components/filtered-crags";
+
+async function CragsPage() {
+  const cragsDataPromise = urqlServer().query(AllCragsDocument, {});
+  const countriesDataPromise = urqlServer().query(AllCountriesDocument, {});
+  const [{ data: cragsData }, { data: countriesData }] = await Promise.all([
+    cragsDataPromise,
+    countriesDataPromise,
+  ]);
+
+  return (
+    <FilteredCrags
+      crags={cragsData.crags}
+      countries={countriesData.countries}
+    />
+  );
+}
+
+export default CragsPage;
+
+gql`
+  query AllCrags {
+    crags {
+      id
+      slug
+      name
+      country {
+        id
+        name
+        slug
+      }
+      area {
+        id
+        name
+        slug
+        country {
+          slug
+        }
+      }
+    }
+  }
+`;
+
+gql`
+  query AllCountries {
+    countries {
+      name
+      slug
+      areas {
+        name
+        slug
+      }
+    }
+  }
+`;
diff --git a/src/app/sandbox/nested-filters-test/page.tsx b/src/app/sandbox/nested-filters-test/page.tsx
new file mode 100644
index 00000000..ac720e8c
--- /dev/null
+++ b/src/app/sandbox/nested-filters-test/page.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { useState } from "react";
+
+const crags = [
+  { name: "massone", country: "italy", area: "arco" },
+  { name: "ceredo", country: "italy", area: "verona" },
+  { name: "osp", country: "slovenia", area: "primorska" },
+  { name: "bitnje", country: "slovenia", area: "gorenjska" },
+];
+
+const countries = ["italy", "slovenia"];
+
+const countryToArea = {
+  italy: ["arco", "verona"],
+  slovenia: ["primorska", "gorenjska"],
+};
+
+// Some tests for dependent filter groups.
+// TODO: delete this page after testing done
+
+function NestedFilteredTestPage() {
+  const [selectedFilters, setSelectedFilters] = useState({
+    countries: ["slovenia"],
+    areas: ["gorenjska"],
+  });
+
+  const shownAreas = selectedFilters.countries
+    .flatMap((country) => countryToArea[country as keyof typeof countryToArea])
+    .sort((a1, a2) => a1.localeCompare(a2));
+
+  const filteredCrags = crags.filter(
+    (crag) =>
+      selectedFilters.countries.includes(crag.country) &&
+      selectedFilters.areas.includes(crag.area)
+  );
+
+  function handleCountryChange(
+    e: React.ChangeEvent<HTMLInputElement>,
+    country: string
+  ) {
+    setSelectedFilters((selectedFilters) => {
+      if (e.target.checked) {
+        return {
+          ...selectedFilters,
+          countries: [...selectedFilters.countries, country],
+        };
+      } else {
+        // need to uncheck also all areas of the country that has been unchecked
+        // TODO:
+        const selectedAreas = selectedFilters.areas.filter(
+          (a) =>
+            !countryToArea[country as keyof typeof countryToArea].includes(a)
+        );
+
+        return {
+          ...selectedFilters,
+          areas: selectedAreas,
+          countries: selectedFilters.countries.filter((c) => c != country),
+        };
+      }
+    });
+  }
+
+  function handleAreaChange(
+    e: React.ChangeEvent<HTMLInputElement>,
+    area: string
+  ) {
+    setSelectedFilters((selectedFilters) => {
+      if (e.target.checked) {
+        return { ...selectedFilters, areas: [...selectedFilters.areas, area] };
+      } else {
+        return {
+          ...selectedFilters,
+          areas: selectedFilters.areas.filter((a) => a != area),
+        };
+      }
+    });
+  }
+
+  return (
+    <div>
+      <div>Filters:</div>
+      <div>Country</div>
+      {countries.map((country) => (
+        <div key={country}>
+          <input
+            type="checkbox"
+            id={country}
+            checked={selectedFilters.countries.includes(country)}
+            onChange={(e) => handleCountryChange(e, country)}
+          />
+          <label htmlFor={country}>{country}</label>
+        </div>
+      ))}
+
+      <br />
+
+      <div>Area</div>
+      {shownAreas.map((area) => (
+        <div key={area}>
+          <input
+            type="checkbox"
+            id={area}
+            checked={selectedFilters.areas.includes(area)}
+            onChange={(e) => handleAreaChange(e, area)}
+          />
+          <label htmlFor={area}>{area}</label>
+        </div>
+      ))}
+
+      <br />
+
+      <br />
+      <br />
+
+      <div>Filtered crags:</div>
+      {filteredCrags.map((crag) => (
+        <div key={crag.name}>{crag.name}</div>
+      ))}
+    </div>
+  );
+}
+
+export default NestedFilteredTestPage;
diff --git a/src/components/content-header.tsx b/src/components/content-header.tsx
new file mode 100644
index 00000000..a80a7358
--- /dev/null
+++ b/src/components/content-header.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+
+type ContentHeaderProps = {
+  heading: string;
+  breadcrumbs: ReactNode;
+};
+
+function ContentHeader({ heading, breadcrumbs }: ContentHeaderProps) {
+  return (
+    <>
+      <div className="bg-neutral-100">
+        <div className="mx-auto px-4 2xl:container xs:px-8">
+          <div className="pt-4">
+            {breadcrumbs}
+            <h1 className="pb-8 pt-12 text-3xl">{heading}</h1>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ContentHeader;
diff --git a/src/graphql/generated.ts b/src/graphql/generated.ts
index 28693299..2863e7ba 100644
--- a/src/graphql/generated.ts
+++ b/src/graphql/generated.ts
@@ -870,6 +870,7 @@ export type Query = {
   countryBySlug: Country;
   crag: Crag;
   cragBySlug: Crag;
+  crags: Array<Crag>;
   dryRunCreateActivity: Array<SideEffect>;
   dryRunUpdateActivity: Array<SideEffect>;
   exposedWarnings: Array<Comment>;
@@ -1332,6 +1333,8 @@ export const CragHeaderDocument = {"kind":"Document","definitions":[{"kind":"Ope
 export const CragSectorsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CragSectors"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"crag"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cragBySlug"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"crag"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"sectors"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"publishStatus"}},{"kind":"Field","name":{"kind":"Name","value":"routes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"difficulty"}},{"kind":"Field","name":{"kind":"Name","value":"defaultGradingSystem"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"isProject"}},{"kind":"Field","name":{"kind":"Name","value":"length"}},{"kind":"Field","name":{"kind":"Name","value":"routeType"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"comments"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"pitches"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"difficulty"}},{"kind":"Field","name":{"kind":"Name","value":"isProject"}},{"kind":"Field","name":{"kind":"Name","value":"number"}},{"kind":"Field","name":{"kind":"Name","value":"height"}}]}},{"kind":"Field","name":{"kind":"Name","value":"nrTicks"}},{"kind":"Field","name":{"kind":"Name","value":"nrTries"}},{"kind":"Field","name":{"kind":"Name","value":"nrClimbers"}},{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"starRating"}},{"kind":"Field","name":{"kind":"Name","value":"publishStatus"}},{"kind":"Field","name":{"kind":"Name","value":"sector"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"bouldersOnly"}}]}}]}}]}}]} as unknown as DocumentNode<CragSectorsQuery, CragSectorsQueryVariables>;
 export const MyCragSummaryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MyCragSummary"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"FindActivityRoutesInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"myCragSummary"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"ascentType"}},{"kind":"Field","name":{"kind":"Name","value":"route"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<MyCragSummaryQuery, MyCragSummaryQueryVariables>;
 export const CountryBySlugWithCragsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CountryBySlugWithCrags"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"country"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"FindCragsInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"countryBySlug"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"country"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"crags"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"nrRoutes"}},{"kind":"Field","name":{"kind":"Name","value":"orientation"}},{"kind":"Field","name":{"kind":"Name","value":"lon"}},{"kind":"Field","name":{"kind":"Name","value":"lat"}},{"kind":"Field","name":{"kind":"Name","value":"minDifficulty"}},{"kind":"Field","name":{"kind":"Name","value":"maxDifficulty"}},{"kind":"Field","name":{"kind":"Name","value":"defaultGradingSystem"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"areas"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"hasCrags"},"value":{"kind":"BooleanValue","value":true}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<CountryBySlugWithCragsQuery, CountryBySlugWithCragsQueryVariables>;
+export const AllCragsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AllCrags"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"crags"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"country"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"Field","name":{"kind":"Name","value":"area"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"country"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]}}]} as unknown as DocumentNode<AllCragsQuery, AllCragsQueryVariables>;
+export const AllCountriesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AllCountries"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"countries"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"areas"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<AllCountriesQuery, AllCountriesQueryVariables>;
 export const LoginDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"Login"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"email"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"password"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"login"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"email"},"value":{"kind":"Variable","name":{"kind":"Name","value":"email"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"password"},"value":{"kind":"Variable","name":{"kind":"Name","value":"password"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"token"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"fullName"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}},{"kind":"Field","name":{"kind":"Name","value":"gender"}},{"kind":"Field","name":{"kind":"Name","value":"roles"}}]}}]}}]}}]} as unknown as DocumentNode<LoginMutation, LoginMutationVariables>;
 export const CragDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Crag"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"crag"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cragBySlug"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"crag"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"sectors"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"routes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"difficulty"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"defaultGradingSystem"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<CragQuery, CragQueryVariables>;
 export const CragActivitiesByMonthDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CragActivitiesByMonth"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"crag"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cragBySlug"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"crag"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"activityByMonth"}}]}}]}}]} as unknown as DocumentNode<CragActivitiesByMonthQuery, CragActivitiesByMonthQueryVariables>;
@@ -1348,6 +1351,8 @@ export const namedOperations = {
     CragSectors: 'CragSectors',
     MyCragSummary: 'MyCragSummary',
     CountryBySlugWithCrags: 'CountryBySlugWithCrags',
+    AllCrags: 'AllCrags',
+    AllCountries: 'AllCountries',
     Crag: 'Crag',
     CragActivitiesByMonth: 'CragActivitiesByMonth',
     Profile: 'Profile'
@@ -1452,6 +1457,16 @@ export type CountryBySlugWithCragsQueryVariables = Exact<{
 
 export type CountryBySlugWithCragsQuery = { __typename?: 'Query', countryBySlug: { __typename?: 'Country', id: string, name: string, slug: string, code: string, crags: Array<{ __typename?: 'Crag', id: string, slug: string, name: string, nrRoutes: number, orientation?: string | null, lon?: number | null, lat?: number | null, minDifficulty?: number | null, maxDifficulty?: number | null, defaultGradingSystem?: { __typename?: 'GradingSystem', id: string } | null }>, areas: Array<{ __typename?: 'Area', id: string, name: string, slug: string }> } };
 
+export type AllCragsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type AllCragsQuery = { __typename?: 'Query', crags: Array<{ __typename?: 'Crag', id: string, slug: string, name: string, country: { __typename?: 'Country', id: string, name: string, slug: string }, area?: { __typename?: 'Area', id: string, name: string, slug: string, country: { __typename?: 'Country', slug: string } } | null }> };
+
+export type AllCountriesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type AllCountriesQuery = { __typename?: 'Query', countries: Array<{ __typename?: 'Country', name: string, slug: string, areas: Array<{ __typename?: 'Area', name: string, slug: string }> }> };
+
 export type LoginMutationVariables = Exact<{
   email: Scalars['String'];
   password: Scalars['String'];