Initial commit

src/state/selectors.ts

@@ -0,0 +1,41 @@
+import { selector } from "recoil";
+import { searchQueryAtom, styleQueryAtom, IconStyleQuery } from "./atoms";
+import { ICON_LIST as list } from "../data/iconList";
+import { Icon } from "../lib/Icon";
+
+/**
+ * SELECTOR
+ * A selector represents a piece of derived state. Derived state is a transformation of state.
+ * You can think of derived state as the output of passing state to a pure function that
+ * modifies the given state in some way:
+ */
+
+const isQueryMatch = (icon: Icon, query: string): boolean => {
+  return (
+    icon.name.includes(query) ||
+    icon.tags.some((tag) => tag.toLowerCase().includes(query)) ||
+    icon.categories.some((category) =>
+      category.toLowerCase().includes(query)
+    ) ||
+    icon.style.type.toString().includes(query) ||
+    !!icon.style.weight?.includes(query)
+  );
+};
+
+const isStyleMatch = (icon: Icon, style: IconStyleQuery): boolean => {
+  return !style || icon.style.type === style;
+};
+
+export const filteredQueryResultsSelector = selector({
+  key: "filteredQueryResultsSelector",
+  get: ({ get }) => {
+    const query = get(searchQueryAtom).trim().toLowerCase();
+    const style = get(styleQueryAtom);
+
+    if (!query && !style) return list;
+
+    return list.filter((icon) => {
+      return isStyleMatch(icon, style) && isQueryMatch(icon, query);
+    });
+  },
+});