Feature/s 10 user settings

client/package.json

@@ -19,6 +19,7 @@
     "coverage": "jest --coverage --config=./src/jest.config.js"
   },
   "dependencies": {
+    "@types/react-color": "^2.17.4",
     "algolia-places-react": "^1.5.1",
     "antd": "^4.6.6",
     "axios": "~0.20.0",
@@ -32,6 +33,7 @@
     "qs": "^6.9.4",
     "react": "~16.13.1",
     "react-chartjs-2": "^2.9.0",
+    "react-color": "^2.19.3",
     "react-dom": "~16.13.1",
     "react-gauge-chart": "git+https://github.com/BossBele/react-gauge-chart.git",
     "react-masonry-css": "^1.0.14",

client/src/components/Header.tsx

@@ -4,6 +4,7 @@ import { GithubAvatar } from 'components/GithubAvatar';
 import css from 'styled-jsx/css';
 
 import { EyeOutlined, EditOutlined, LogoutOutlined, SaveTwoTone } from '@ant-design/icons';
+import UserSettings from './UserSettings/UserSettings';
 
 type Props = {
   username: string;
@@ -67,6 +68,7 @@ export function Header(props: Props) {
         <b>{props.title}</b> {props.courseName}
       </div>
       <div className="profile">
+        {props.title === 'Schedule' && <UserSettings />}
         {isSaveButtonVisible && (
           <Button danger ghost size="large" style={{ marginRight: 16, height: 38 }} onClick={props.onSaveClick}>
             <SaveTwoTone twoToneColor={['#f5222d', '#fff1f0']} />

client/src/components/UserSettings/SettingsTagColor.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Collapse, Tag } from 'antd';
+import { BgColorsOutlined } from '@ant-design/icons';
+import { GithubPicker } from 'react-color';
+import { pickerColors, mockedTags as tags, setTagColor, getTagColor, DEFAULT_COLOR } from './userSettingsHandlers';
+import { useLocalStorage } from 'react-use';
+
+const SettingsTagColor: React.FC = () => {
+  const { Panel } = Collapse;
+  const defaultTagColor = JSON.stringify({ default: DEFAULT_COLOR });
+  const [storedTagColors, setStoredTagColors] = useLocalStorage<string>('tagColors', defaultTagColor);
+
+  const collapseTags = (
+    <Collapse accordion ghost>
+      {tags.map((item) => {
+        return (
+          <Panel
+            header={
+              <Tag
+                style={{
+                  cursor: 'pointer',
+                  borderColor: getTagColor(item.name, storedTagColors),
+                  color: getTagColor(item.name, storedTagColors),
+                  backgroundColor: `${getTagColor(item.name, storedTagColors)}10`,
+                }}
+              >
+                {item.name}
+              </Tag>
+            }
+            key={item.name}
+          >
+            <GithubPicker
+              colors={pickerColors}
+              triangle="hide"
+              width={'138px'}
+              onChange={(e) => setTagColor(e, item.name, setStoredTagColors, storedTagColors)}
+            />
+          </Panel>
+        );
+      })}
+    </Collapse>
+  );
+
+  return (
+    <Collapse expandIcon={() => <BgColorsOutlined style={{ fontSize: '20px', color: '#08c' }} />}>
+      <Panel header="Change Tag Color" key="tags">
+        {collapseTags}
+      </Panel>
+    </Collapse>
+  );
+};
+
+export default SettingsTagColor;

client/src/components/UserSettings/UserSettings.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Button, Drawer } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import SettingsTagColor from './SettingsTagColor';
+
+
+const UserSettings: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const showDrawer = () => {
+    setIsVisible(true);
+  };
+  const onClose = () => {
+    setIsVisible(false);
+  };
+
+  return (
+    <>
+      <Button icon={<SettingOutlined />} title='User settings' size='large' type="primary" onClick={showDrawer}/>
+
+      <Drawer title="User Settings" placement="right" closable={false} onClose={onClose} visible={isVisible}>
+        <SettingsTagColor />
+      </Drawer>
+    </>
+  );
+};
+
+export default UserSettings;

client/src/components/UserSettings/userSettingsHandlers.ts

@@ -0,0 +1,49 @@
+import { ColorState as IColorState } from 'react-color';
+
+export const pickerColors = [
+  '#ff0000',
+  '#FF6900',
+  '#FCCB00',
+  '#37D67A',
+  '#308e00',
+  '#2db7f5',
+  '#004DCF',
+  '#a326f4',
+  '#FA28FF',
+  '#F78DA7',
+];
+
+export const DEFAULT_COLOR = '#308e00';
+
+export function setTagColor(e: IColorState, tagName: string, localStorageHook: (value: string) => void, storedTagColors: string | undefined) {
+  const parsedTagColors = JSON.parse(<string>storedTagColors) || {};
+  parsedTagColors[tagName] = e.hex;
+  localStorageHook(JSON.stringify(parsedTagColors));
+}
+
+export function getTagColor(tagName: string, storedTagColors: string | undefined) {
+  const parsedTagColors = JSON.parse(<string>(storedTagColors)) || {};
+  return parsedTagColors[tagName] || DEFAULT_COLOR;
+}
+
+export const mockedTags = [
+  { name: 'deadline' },
+  { name: 'test' },
+  { name: 'jstask' },
+  { name: 'htmltask' },
+  { name: 'externaltask' },
+  { name: 'selfeducation' },
+  { name: 'codewars' },
+  { name: 'codejam' },
+  { name: 'newtask' },
+  { name: 'lecture' },
+  { name: 'lecture_online' },
+  { name: 'lecture_offline' },
+  { name: 'lecture_mixed' },
+  { name: 'lecture_self_study' },
+  { name: 'info' },
+  { name: 'warmup' },
+  { name: 'meetup' },
+  { name: 'workshop' },
+  { name: 'interview' },
+];