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/UserSettings/TagColor.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback } from 'react';
+import TagColorIcon from './TagColorIcon';
+import { Collapse, Tag } from 'antd';
+import { GithubPicker } from 'react-color';
+import { pickerColors, mockedTags as tags, setTagColor, getTagStyle, DEFAULT_COLOR } from './userSettingsHandlers';
+import { useLocalStorage } from 'react-use';
+import { ColorState as IColorState } from 'react-color';
+
+const TagColor: React.FC = () => {
+  const { Panel } = Collapse;
+  const [storedTagColors, setStoredTagColors] = useLocalStorage<object>('tagColors', DEFAULT_COLOR);
+
+  const memoizedSetTagColor = useCallback(
+    (e: IColorState, itemName, storedTagColors) => {
+      setTagColor(e, itemName, setStoredTagColors, storedTagColors);
+    },
+    [storedTagColors],
+  );
+
+  const collapseTags = (
+    <Collapse accordion ghost>
+      {tags.map((item) => {
+        return (
+          <Panel
+            header={
+              <Tag
+                style={getTagStyle(item.name, storedTagColors, { cursor: 'pointer' })}
+              >
+                {item.name}
+              </Tag>
+            }
+            key={item.name}
+          >
+            <GithubPicker
+              colors={pickerColors}
+              triangle="hide"
+              width={'138px'}
+              onChange={(e) => memoizedSetTagColor(e, item.name, storedTagColors)}
+            />
+          </Panel>
+        );
+      })}
+    </Collapse>
+  );
+
+  return (
+    <Collapse expandIcon={() => <TagColorIcon />}>
+      <Panel header="Change Tag Color" key="tags">
+        {collapseTags}
+      </Panel>
+    </Collapse>
+  );
+};
+
+export default TagColor;

client/src/components/UserSettings/TagColorIcon.tsx

@@ -0,0 +1,6 @@
+import { BgColorsOutlined } from '@ant-design/icons';
+import React from 'react';
+
+const TagColorIcon = () => <BgColorsOutlined style={{ fontSize: '20px', color: '#08c', textIndent: '-28px' }} />;
+
+export default TagColorIcon;

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 TagColor from './TagColor';
+
+
+const UserSettings: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const showDrawer = () => {
+    setIsOpen(true);
+  };
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <Button icon={<SettingOutlined />} title='User settings' size='middle' type="primary" onClick={showDrawer} />
+
+      <Drawer title="User Settings" placement="right" closable={false} onClose={onClose} visible={isOpen}>
+        <TagColor />
+      </Drawer>
+    </>
+  );
+};
+
+export default UserSettings;

client/src/components/UserSettings/userSettingsHandlers.ts

@@ -0,0 +1,57 @@
+import { ColorState as IColorState } from 'react-color';
+import { CSSProperties } from 'react';
+
+export const pickerColors = [
+  '#ff0000',
+  '#FF6900',
+  '#FCCB00',
+  '#37D67A',
+  '#308e00',
+  '#2db7f5',
+  '#004DCF',
+  '#a326f4',
+  '#FA28FF',
+  '#F78DA7',
+];
+
+export const DEFAULT_COLOR = { default: '#308e00' };
+
+export function setTagColor(e: IColorState, tagName: string, localStorageHook: (value: object) => void, storedTagColors = {}) {
+  localStorageHook({ ...storedTagColors, [tagName]: e.hex });
+}
+
+export function getTagColor(tagName: string, storedTagColors: Record<string, string> = {}) {
+  return storedTagColors[tagName] || DEFAULT_COLOR.default;
+}
+
+export function getTagStyle(tagName: string, storedTagColors = {}, styles?: CSSProperties) {
+  const tagColor: string = getTagColor(tagName, storedTagColors);
+  return {
+    ...styles,
+    borderColor: tagColor,
+    color: tagColor,
+    backgroundColor: `${tagColor}10`,
+  };
+}
+
+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' },
+];

client/src/pages/course/schedule.tsx

@@ -1,5 +1,5 @@
 import { QuestionCircleOutlined, YoutubeOutlined } from '@ant-design/icons';
-import { Table, Tag, Row, Tooltip, Select } from 'antd';
+import { Table, Tag, Row, Tooltip, Select, Col } from 'antd';
 import { withSession, GithubUserLink, PageLayout } from 'components';
 import withCourseData from 'components/withCourseData';
 import { useState, useMemo } from 'react';
@@ -10,6 +10,7 @@ import moment from 'moment-timezone';
 import { TIMEZONES } from '../../configs/timezones';
 import { useAsync } from 'react-use';
 import { useLoading } from 'components/useLoading';
+import UserSettings from '../../components/UserSettings/UserSettings';
 
 enum EventTypeColor {
   deadline = 'red',
@@ -81,18 +82,23 @@ export function SchedulePage(props: CoursePageProps) {
   return (
     <PageLayout loading={loading} title="Schedule" githubId={props.session.githubId}>
       <Row justify="space-between" style={{ marginBottom: 16 }}>
-        <Select
-          style={{ width: 200 }}
-          placeholder="Please select a timezone"
-          defaultValue={timeZone}
-          onChange={setTimeZone}
-        >
-          {TIMEZONES.map(tz => (
-            <Select.Option key={tz} value={tz}>
-              {tz}
-            </Select.Option>
-          ))}
-        </Select>
+        <Col>
+          <Select
+            style={{ width: 200 }}
+            placeholder="Please select a timezone"
+            defaultValue={timeZone}
+            onChange={setTimeZone}
+          >
+            {TIMEZONES.map(tz => (
+              <Select.Option key={tz} value={tz}>
+                {tz}
+              </Select.Option>
+            ))}
+          </Select>
+        </Col>
+        <Col>
+          <UserSettings />
+        </Col>
       </Row>
       <Table
         rowKey={record => (record.event.type === TaskTypes.deadline ? `${record.id}d` : record.id).toString()}