diff --git a/public/index.html b/public/index.html index aa069f2..72a8b72 100644 --- a/public/index.html +++ b/public/index.html @@ -24,6 +24,8 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + React App diff --git a/src/lib/icons.ts b/src/lib/icons.ts index b30499f..40467ab 100644 --- a/src/lib/icons.ts +++ b/src/lib/icons.ts @@ -318,325 +318,3 @@ export const icons: Readonly = [ Icon: Icon.WifiMedium, }, ]; - -// export const iconList: Icon[] = [ -// { -// name: "6-square", -// categories: [IconCategory.DESIGN], -// tags: ["number", "digit", "six", "box"], -// Icon: require("../Icons/6-square.svg"), -// }, -// { -// name: "6-square-sharp", -// categories: [IconCategory.DESIGN], -// tags: ["number", "digit", "six", "box"], -// Icon: require("../Icons/6-square-sharp.svg"), -// }, -// { -// name: "8-circle", -// categories: [IconCategory.DESIGN], -// tags: ["number", "digit", "eight", "round"], -// Icon: require("../Icons/8-circle.svg"), -// }, -// { -// name: "arrow-right-circle", -// categories: [IconCategory.DESIGN], -// tags: ["pointer", "direction", "round"], -// Icon: require("../Icons/arrow-right-circle.svg"), -// }, -// { -// name: "basketball", -// categories: [IconCategory.BRAND, IconCategory.HEALTH, IconCategory.OTHER], -// tags: ["sports", "games", "athletics", "dribbble"], -// Icon: require("../Icons/basketball.svg"), -// }, -// { -// name: "battery-half", -// categories: [IconCategory.DEVICE, IconCategory.SYSTEM], -// tags: ["charged", "charger", "charging", "power"], -// Icon: require("../Icons/battery-half.svg"), -// }, -// { -// name: "battery-half-hash", -// categories: [IconCategory.DEVICE, IconCategory.SYSTEM], -// tags: ["charged", "charger", "charging", "power"], -// Icon: require("../Icons/battery-half-hash.svg"), -// }, -// { -// name: "book-open", -// categories: [IconCategory.DOCUMENT, IconCategory.OTHER], -// tags: ["reading", "reader", "novel", "story"], -// Icon: require("../Icons/book-open.svg"), -// }, -// { -// name: "calendar-6", -// categories: [IconCategory.BUSINESS, IconCategory.SYSTEM], -// tags: ["dates", "times", "events", "schedule", "six"], -// Icon: require("../Icons/calendar-6.svg"), -// }, -// { -// name: "check-circle", -// categories: [IconCategory.BUSINESS, IconCategory.SYSTEM], -// tags: ["todo", "to-do", "list", "checkbox", "round"], -// Icon: require("../Icons/check-circle.svg"), -// }, -// { -// name: "clock", -// categories: [IconCategory.SYSTEM], -// tags: ["times", "timer", "alarm", "schedule", "events", "watch"], -// Icon: require("../Icons/clock.svg"), -// }, -// { -// name: "cloud", -// categories: [ -// IconCategory.BUSINESS, -// IconCategory.SYSTEM, -// IconCategory.WEATHER, -// ], -// tags: ["serverless", "backup", "storage"], -// Icon: require("../Icons/cloud.svg"), -// }, -// { -// name: "cube", -// categories: [IconCategory.DESIGN, IconCategory.OTHER], -// tags: ["square", "box", "3d", "volume", "blocks"], -// Icon: require("../Icons/cube.svg"), -// }, -// { -// name: "delete", -// categories: [IconCategory.SYSTEM], -// tags: ["keyboard", "remove", "backspace"], -// Icon: require("../Icons/delete.svg"), -// }, -// { -// name: "doc", -// categories: [IconCategory.DOCUMENT, IconCategory.EDITOR], -// tags: ["documents", "files", "save"], -// Icon: require("../Icons/doc.svg"), -// }, -// { -// name: "doc-text", -// categories: [IconCategory.DOCUMENT, IconCategory.EDITOR], -// tags: ["documents", "files", "save", "write"], -// Icon: require("../Icons/doc-text.svg"), -// }, -// { -// name: "doc-x", -// categories: [IconCategory.DOCUMENT, IconCategory.EDITOR], -// tags: ["documents", "files", "cancel", "discard", "close"], -// Icon: require("../Icons/doc-x.svg"), -// }, -// { -// name: "do-not-disturb", -// categories: [ -// IconCategory.SYSTEM, -// IconCategory.USERS, -// IconCategory.WEATHER, -// IconCategory.OTHER, -// ], -// tags: ["forbidden", "disallowed", "blocked", "spam"], -// Icon: require("../Icons/do-not-disturb.svg"), -// }, -// { -// name: "droid", -// categories: [ -// IconCategory.BRAND, -// IconCategory.COMMUNICATION, -// IconCategory.DEVELOPMENT, -// IconCategory.DEVICE, -// IconCategory.SYSTEM, -// ], -// tags: ["android", "google", "mobile", "phone", "cellular", "cellphone"], -// Icon: require("../Icons/droid.svg"), -// }, -// { -// name: "folder", -// categories: [ -// IconCategory.DOCUMENT, -// IconCategory.EDITOR, -// IconCategory.SYSTEM, -// ], -// tags: ["directory", "directories", "files"], -// Icon: require("../Icons/folder.svg"), -// }, -// { -// name: "folder-dip", -// categories: [ -// IconCategory.DOCUMENT, -// IconCategory.EDITOR, -// IconCategory.SYSTEM, -// ], -// tags: ["directory", "directories", "files"], -// Icon: require("../Icons/folder-dip.svg"), -// }, -// { -// name: "heart", -// categories: [ -// IconCategory.COMMUNICATION, -// IconCategory.DESIGN, -// IconCategory.HEALTH, -// IconCategory.OTHER, -// ], -// tags: ["wellness", "love", "healthy", "like"], -// Icon: require("../Icons/heart.svg"), -// }, -// { -// name: "horse", -// categories: [IconCategory.HEALTH, IconCategory.OTHER], -// tags: ["animals", "equestrian", "chess", "knight", "games", "sports"], -// Icon: require("../Icons/horse.svg"), -// }, -// { -// name: "intersect", -// categories: [IconCategory.DESIGN], -// tags: ["merge", "join", "intersection", "layers"], -// Icon: require("../Icons/intersect.svg"), -// }, -// { -// name: "mail", -// categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION], -// tags: ["email", "messages", "messaging", "send", "sent"], -// Icon: require("../Icons/mail.svg"), -// }, -// { -// name: "medium", -// categories: [IconCategory.BRAND], -// tags: ["publish", "writing", "write"], -// Icon: require("../Icons/medium.svg"), -// }, -// { -// name: "meh", -// categories: [ -// IconCategory.COMMUNICATION, -// IconCategory.DESIGN, -// IconCategory.OTHER, -// ], -// tags: ["face", "smiley", "emoji", "unimpressed"], -// Icon: require("../Icons/meh.svg"), -// }, -// { -// name: "mic", -// categories: [ -// IconCategory.COMMUNICATION, -// IconCategory.DEVICE, -// IconCategory.MEDIA, -// IconCategory.SYSTEM, -// ], -// tags: ["microphone", "audio", "recording", "music", "sound", "podcast"], -// Icon: require("../Icons/mic.svg"), -// }, -// { -// name: "music-beam-angled", -// categories: [IconCategory.MEDIA, IconCategory.SYSTEM], -// tags: ["songs", "audio", "playlist", "albums"], -// Icon: require("../Icons/music-beam-angled.svg"), -// }, -// { -// name: "music-beam-straight", -// categories: [IconCategory.MEDIA, IconCategory.SYSTEM], -// tags: ["songs", "audio", "playlist", "albums"], -// Icon: require("../Icons/music-beam-straight.svg"), -// }, -// { -// name: "pencil-line", -// categories: [IconCategory.DESIGN, IconCategory.EDITOR], -// tags: ["write", "writing", "editing", "sign", "signature"], -// Icon: require("../Icons/pencil-line.svg"), -// }, -// { -// name: "pen-nib", -// categories: [IconCategory.DESIGN, IconCategory.EDITOR], -// tags: [ -// "write", -// "writing", -// "editing", -// "sign", -// "signature", -// "fountain pen", -// "illustrator", -// ], -// Icon: require("../Icons/pen-nib.svg"), -// }, -// { -// name: "profile-round", -// categories: [IconCategory.USERS], -// tags: ["person", "users", "account", "login", "circle"], -// Icon: require("../Icons/profile-round.svg"), -// }, -// { -// name: "rewind", -// categories: [IconCategory.MEDIA, IconCategory.SYSTEM], -// tags: ["backwards", "reverse", "audio", "recording", "music", "sound"], -// Icon: require("../Icons/rewind.svg"), -// }, -// { -// name: "send", -// categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION], -// tags: ["mail", "email", "messages", "up", "arrow", "pointer", "direction"], -// Icon: require("../Icons/chevron.svg"), -// }, -// { -// name: "star", -// categories: [ -// IconCategory.COMMUNICATION, -// IconCategory.MAP, -// IconCategory.OTHER, -// ], -// tags: ["rate", "ratings", "favorites"], -// Icon: require("../Icons/star.svg"), -// }, -// { -// name: "table", -// categories: [IconCategory.EDITOR, IconCategory.OTHER], -// tags: ["tabular", "spreadsheet", "excel"], -// Icon: require("../Icons/table.svg"), -// }, -// { -// name: "trash", -// categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM], -// tags: ["garbage", "delete", "destroy", "recycle", "recycling"], -// Icon: require("../Icons/trash.svg"), -// }, -// { -// name: "trash-duo", -// categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM], -// tags: ["garbage", "delete", "destroy", "recycle", "recycling"], -// Icon: require("../Icons/trash-duo.svg"), -// }, -// { -// name: "trash-solid", -// categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM], -// tags: ["garbage", "delete", "destroy", "recycle", "recycling"], -// Icon: require("../Icons/trash-solid.svg"), -// }, -// { -// name: "volume-off", -// categories: [IconCategory.DEVICE, IconCategory.MEDIA, IconCategory.SYSTEM], -// tags: ["speakers", "audio", "recording", "music", "sound"], -// Icon: require("../Icons/volume-off.svg"), -// }, -// { -// name: "warning", -// categories: [IconCategory.SYSTEM], -// tags: ["alert", "danger", "dangerous", "caution"], -// Icon: require("../Icons/warning.svg"), -// }, -// { -// name: "wifi-full", -// categories: [IconCategory.SYSTEM], -// tags: ["wireless", "internet", "network", "connection", "connectivity"], -// Icon: require("../Icons/wifi-full.svg"), -// }, -// { -// name: "wifi-low", -// categories: [IconCategory.SYSTEM], -// tags: ["wireless", "internet", "network", "connection", "connectivity"], -// Icon: require("../Icons/wifi-low.svg"), -// }, -// { -// name: "wifi-none", -// categories: [IconCategory.SYSTEM], -// tags: ["wireless", "internet", "network", "connection", "connectivity"], -// Icon: require("../Icons/wifi-none.svg"), -// }, -// ]; diff --git a/src/state/atoms.ts b/src/state/atoms.ts index 4e906ef..8aeacd4 100644 --- a/src/state/atoms.ts +++ b/src/state/atoms.ts @@ -1,13 +1,6 @@ import { atom } from "recoil"; import { IconStyle } from "../lib"; -/** - * 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 const searchQueryAtom = atom({ key: "searchQueryAtom", default: "", diff --git a/src/state/selectors.ts b/src/state/selectors.ts index 55aa58b..ac3a09e 100644 --- a/src/state/selectors.ts +++ b/src/state/selectors.ts @@ -4,13 +4,6 @@ import { searchQueryAtom, styleQueryAtom } from "./atoms"; import { IconEntry, IconCategory } from "../lib"; import { icons } from "../lib/icons"; -/** - * 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: IconEntry, query: string): boolean => { return ( icon.name.includes(query) || @@ -39,15 +32,19 @@ export const categorizedQueryResultsSelector = selector< Readonly >({ key: "categorizedQueryResultsSelector", - get: ({ get }) => { + get: async ({ get }) => { const filteredResults = get(filteredQueryResultsSelector); - return filteredResults.reduce((acc, curr) => { - curr.categories.forEach((category) => { - if (!acc[category]) acc[category] = []; - acc[category]!!.push(curr); - }); - return acc; - }, {}); + return await new Promise((resolve) => + resolve( + filteredResults.reduce((acc, curr) => { + curr.categories.forEach((category) => { + if (!acc[category]) acc[category] = []; + acc[category]!!.push(curr); + }); + return acc; + }, {}) + ) + ); }, }); @@ -56,8 +53,12 @@ export const singleCategoryQueryResultsSelector = selectorFamily< IconCategory >({ key: "singleCategoryQueryResultsSelector", - get: (category: IconCategory) => ({ get }) => { + get: (category: IconCategory) => async ({ get }) => { const filteredResults = get(filteredQueryResultsSelector); - return filteredResults.filter((icon) => icon.categories.includes(category)); + return await new Promise((resolve) => + resolve( + filteredResults.filter((icon) => icon.categories.includes(category)) + ) + ); }, });