Feature/s 10 user settings (#19)

* feat: add new schedule table (#13)

* feat: add new schedule table

* chore: refactor cells renderers

* chore: refactor renderers

* feat: add switcher schedule view mode

* feat: add user settings

* chore: refactor code - exclude switch

* chore: refactor code

* chore: refactor code - add uppercase

* fix: implement correct localstorage hook

* feat: add userSettings button on schedule page

* feat: add user settings

* refactor: change serialize/deserialize data

* refactor: rename files and data

* refactor: change tag color styles structure

* refactor: rename vars for better readability

* refactor: apply memoization to setTagColor

* refactor: change structure of TagIcon

* refactor: replace settings button, tweak button styles, change storedTagColors type

Co-authored-by: notSAINT <60464016+not-SAINT@users.noreply.github.com>
Co-authored-by: Aleksandr Sharikov <notsaint.mail@gmail.com>

client/package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@types/react-custom-scrollbars": "^4.0.7",
+    "@types/react-color": "^2.17.4",
     "algolia-places-react": "^1.5.1",
     "antd": "^4.6.6",
     "axios": "~0.20.0",
@@ -35,6 +36,7 @@
     "react": "~16.13.1",
     "react-chartjs-2": "^2.9.0",
     "react-custom-scrollbars": "^4.2.1",
+    "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

@@ -10,6 +10,8 @@ import { useAsync, useLocalStorage } from 'react-use';
 import { useLoading } from 'components/useLoading';
 import { isMobileOnly } from 'mobile-device-detect';
 import { ViewMode } from 'components/Schedule/model';
+import UserSettings from '../../components/UserSettings/UserSettings';
+
 
 const { Option } = Select;
 const LOCAL_VIEW_MODE = 'scheduleViewMode';
@@ -73,6 +75,9 @@ export function SchedulePage(props: CoursePageProps) {
             ))}
           </Select>
         </Col>
+        <Col>
+          <UserSettings />
+        </Col>
       </Row>
       <ScheduleView data={data} timeZone={timeZone} />
     </PageLayout>