Initial commit

src/state/atoms.ts

@@ -0,0 +1,21 @@
+import { atom } from "recoil";
+import { IconFillStyle } from "../lib/Icon";
+
+/**
+ * ATOM
+ * An atom represents a piece of state. Atoms can be read from and written to from any component.
+ * Components that read the value of an atom are implicitly subscribed to that atom, so any atom
+ * updates will result in a re-render of all components subscribed to that atom:
+ */
+
+export type IconStyleQuery = IconFillStyle | null | undefined;
+
+export const searchQueryAtom = atom<string>({
+  key: "searchQueryAtom",
+  default: "",
+});
+
+export const styleQueryAtom = atom<IconStyleQuery>({
+  key: "styleQueryAtom",
+  default: undefined,
+});

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);
+    });
+  },
+});