User: # Inputs

## Current File
Here is the file I'm looking at. It might be truncated from above and below and, if so, is centered around my cursor.
```src/components/post/Templates.tsx
import { AIRTABLE_API_KEY } from "@@/config";
import airtable from "airtable";
import { useGetUserShapesQuery } from "api/graphql_user";
import { useAuth } from "auth/AuthProvider";
import useTranslation from "lang/useTranslation";
import { useEffect, useMemo, useState } from "react";
import useCurrentChannelStore from "src/store/useCurrentChannelStore";
import ToggleInput from "../common/ToggleInput";
import TemplateCards from "./TemplateCards";
import useLanguageStore from "src/store/useLanguageStore";
import { spheres_and_shapes } from "src/utils/commonUtils";

const base = new airtable({ apiKey: AIRTABLE_API_KEY }).base("app4nme0HD7rRdTua");

type Props = {};
const Templates = (props: Props) => {
  const [contentPool, setContentPool] = useState([]);
  const [query, setQuery] = useState("");
  const [searchResult, setSearchResult] = useState(null);
  const { currentLanguage } = useLanguageStore();
  // const [field, setField] = useState("title");
  const [showAll, setShowAll] = useState(false);
  const [loading, setLoading] = useState(false);
  const currentChannel = useCurrentChannelStore((state) => state.currentChannel);
  const isAdmin = useCurrentChannelStore((state) => state.isAdmin);
  const { t } = useTranslation();
  const { user } = useAuth();
  const [userShapes] = useGetUserShapesQuery({
    variables: {
      channel_id: currentChannel?.channel?.id || "",
      user_id: user?.uid ?? "",
    },
  });
  const data_user_shapes = userShapes?.data?.user_shape;

  const filterStrings = useMemo(() => {
    if (data_user_shapes?.length) {

      // Gets german eqivalent of user shapes.
      const user_shapes = data_user_shapes?.map((sh) => {
        const shapeNameEn = sh?.shape?.name;
        const matchedSphere = spheres_and_shapes
          .flatMap((sphere) => sphere.shapes)
          .find((shape) => shape.name_en === shapeNameEn);
        return matchedSphere ? matchedSphere.name : shapeNameEn;
      });

      return user_shapes;
    }
    return [];
  }, [data_user_shapes]);

  useEffect(() => {
    if (userShapes.fetching) {
      return;
    }

    setLoading(true);
    let records: any[] = [];

  
    const filterFormula = showAll
      ? ``
      : `OR(${filterStrings.map((str) => `FIND("${str}", {manager_role_new}) > 0`).join(", ")})`;
    
    const baseName = currentLanguage === "de-DE" ? "Overall" : "overall_eng";
    base(baseName)
      .select({
        view: "zwopr-web",
        filterByFormula: filterFormula,
      })
      .eachPage(
        function page(partialRecords, fetchNextPage) {
          const res = partialRecords.map(function (record) {
            return { id: record.id, ...record.fields };
          });
          records = [...records, ...res];
          //@ts-ignore
          setContentPool(records);
          fetchNextPage();
        },
        function done(err: any) {
          setLoading(false);
          if (err) {
            console.error(err);
            return;
          }
        }
      );
  }, [currentChannel, isAdmin, filterStrings, showAll, userShapes.fetching, currentLanguage]);

  return (
    <div>
      <div className="relative pt-16 pb-20 lg:pb-28 ">
        <div className="absolute inset-0">
          <div className="bg-white h-1/3 sm:h-2/3" />
        </div>
        <div className="relative max-w-7xl">
          <div className="flex flex-col-reverse mt-4 md:mt-0 md:flex-row justify-between items-center">
            <h2 className="text-2xl tracking-tight ml-4 font-bold text-gray-900 sm:text-3xl">
              {t("CreatePostScreen.select_from_pool")}
            </h2>

            <ToggleInput
              enabled={showAll}
              setEnabled={(value) => {
                setQuery("");
                setSearchResult(null);
                setShowAll(value);
              }}
              rightLabel={t("CreatePostScreen.show_all")}
              leftLabel={filterStrings.join(", ") || t("CreatePostScreen.no_category")}
            />
          </div>

          <TemplateCards posts={query && searchResult ? searchResult : contentPool} loading={loading} />
        </div>
      </div>
    </div>
  );
};

export default Templates;


```


User: ```typescript:src/components/post/Templates.tsx
      // Gets german eqivalent of user shapes.
      const user_shapes = data_user_shapes?.map((sh) => {
        const shapeNameEn = sh?.shape?.name;
        const matchedSphere = spheres_and_shapes
          .flatMap((sphere) => sphere.shapes)
          .find((shape) => shape.name_en === shapeNameEn);
        return matchedSphere ? matchedSphere.name : shapeNameEn;
      });
```


Match the spheres for filtering with German names but display the english names finally
Assistant: