add Category Icon List

client/package-lock.json

@@ -1358,6 +1358,21 @@
         "@fortawesome/fontawesome-common-types": "^0.2.32"
       }
     },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.35",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+          "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
+        }
+      }
+    },
     "@fortawesome/free-solid-svg-icons": {
       "version": "5.15.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",

client/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@auth0/auth0-react": "^1.2.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.13",
     "@material-ui/core": "^4.11.2",

client/src/components/Settings/Settings.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Navbar from "../Navbar";
 import { useTranslation } from "react-i18next";
 import Profile from "./Profile";
-import { Box, Checkbox, InputBase, Chip, MenuItem, Select, Table, TableBody, TableCell, TableContainer, TableRow, Typography, useTheme } from '@material-ui/core';
+import { Box, Checkbox, InputBase, MenuItem, Select, Table, TableBody, TableCell, TableRow, Typography, useTheme } from '@material-ui/core';
 import { useAuth0 } from "@auth0/auth0-react";
 import { getSettingsOfUser, getUserById, updateUserMetadata, updateUserSettingsForCategory } from "./settings.util";
 import { makeStyles } from "@material-ui/styles";
@@ -15,8 +15,10 @@ import EditProfile from "./EditProfile";
 import ProfilePlaceholder from "./ProfilePlaceholder";
 import { func } from "prop-types";
 import EditMealTags from "./EditMealTags";
-import SelectMealTags from "./SelectMealTags";
 import EditMealCategories from "./EditMealCategories";
+import categoryIcons from "../util/CategoryIcons";
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const useStyles = makeStyles(theme => ({
   settings: {
@@ -52,6 +54,7 @@ const Settings = (props) => {
   const { user } = useAuth0();
   const theme = useTheme();
   const { palette } = theme;
+  console.log('catIcons', categoryIcons);
 
   const [userData, setUserData] = useState(null);
   const [categories, setCategories] = useState([]);
@@ -163,6 +166,8 @@ const Settings = (props) => {
             </TableRow>}
           </TableBody>
         </Table>
+
+        {categoryIcons.map(i => <FontAwesomeIcon icon={i} />)}
         <EditMealCategories onUpdateSettings={getSettings} />
         <br />
         <EditMealTags onUpdateSettings={getSettings} />

client/src/components/util/CategoryIcons.jsx

@@ -0,0 +1,45 @@
+import * as SolidIcons from "@fortawesome/free-solid-svg-icons";
+import { faFacebook, faYoutube, faPinterest, faGoogle } from '@fortawesome/free-brands-svg-icons';
+
+const solidIconNames = [
+  'apple-alt',
+  'carrot',
+  'pepper-hot',
+  'lemon',
+  'fish', 'bacon', 'drumstick-bite', 'hamburger', 'hotdog', 'bone',
+  'pizza-slice',
+  'bread-slice', 'cheese', 'egg',
+  'ice-cream', 'birthday-cake', 'cookie', 'cookie-bite', 'candy-cane', 'stroopwafel',
+  'coffee', 'mug-hot', 'wine-bottle', 'wine-glass-alt', 'beer', 'cocktail', 'glass-martini-alt', 'glass-cheers', 'glass-whiskey',
+  'mortar-pestle', 'blender', 'utensils',
+  'concierge-bell',
+  'seedling', 'leaf', 'holly-berry',
+  'heart', 'heartbeat',
+  'grin-tongue-squint', 'grin-stars', 'grin-tongue', 'grin-hearts', 'grin-beam-sweat',
+  'crown',
+  'brain',
+  'balance-scale', 'balance-scale-right', 'weight',
+  'shopping-cart', 'shopping-basket', 'shopping-bag',
+  'globe-africa', 'globe-americas', 'globe-asia', 'globe-europe',
+  'suitcase-rolling', 'suitcase',
+  'snowflake', 'fire', 'thermometer-empty', 'thermometer-full', 'thermometer-half', 'thermometer-quarter', 'thermometer-three-quarters',
+  'book', 'bookOpen',
+  'disease',
+  'tag', 'tags', 'thumbtack',
+  '-percent',
+  'user-friends', 'users', 'user', 'user-tie', 'user-nurse', 'user-graduate', 'user-check',
+  'hands-helping',
+  'houseUser', 'home', 'caravan',
+  'newspaper',
+  'baby-carriage', 'baby',
+  'dog', 'cat'];
+
+function sortFunction(a, b) { // icons will get sorted in the order they appear in the list above
+  return solidIconNames.indexOf(a.iconName) < solidIconNames.indexOf(b.iconName) ? -1 : 1;
+}
+
+const categoryIcons = Object.values(SolidIcons)
+                            .filter(i => solidIconNames.includes(i.iconName))
+                            .sort(sortFunction);
+categoryIcons.push(faYoutube, faPinterest, faGoogle, faFacebook);
+export default categoryIcons;