Feature/s 10 user settings #19

Ftorik · 2020-11-26T14:53:21Z

add user settings component

* feat: add new schedule table * chore: refactor cells renderers * chore: refactor renderers

…view feat: add switcher schedule view mode

…Hope/rsschool-api into feature/S-10-user-settings

yuliaHope · 2020-11-30T10:56:00Z

client/src/components/UserSettings/SettingsTagColor.tsx

+
+const SettingsTagColor: React.FC = () => {
+  const { Panel } = Collapse;
+  const defaultTagColor = JSON.stringify({ default: DEFAULT_COLOR });


According to the source code of useLocalStorage, there is no need to serialize/deserialize data. It comes out of the box: https://github.com/streamich/react-use/blob/master/src/useLocalStorage.ts

done, removed unnecessary things

yuliaHope · 2020-11-30T11:03:10Z

client/src/components/UserSettings/SettingsTagColor.tsx

+                  borderColor: getTagColor(item.name, storedTagColors),
+                  color: getTagColor(item.name, storedTagColors),
+                  backgroundColor: `${getTagColor(item.name, storedTagColors)}10`,
+                }}


Let's move these 4 lines of the code to it's own function and call getTagColor only once

Made a new function. It returns an object with styles borderColor, color, backgroundColor, it can also accept any other css styles

yuliaHope · 2020-11-30T11:07:01Z

client/src/components/UserSettings/SettingsTagColor.tsx

+              colors={pickerColors}
+              triangle="hide"
+              width={'138px'}
+              onChange={(e) => setTagColor(e, item.name, setStoredTagColors, storedTagColors)}


Let's consider using useCallback for onChange handler

https://www.codementor.io/blog/react-optimization-5wiwjnf9hj#7-avoid-inline-function-definition-in-the-render-function

yuliaHope · 2020-11-30T11:11:58Z

client/src/components/UserSettings/SettingsTagColor.tsx

+  );
+
+  return (
+    <Collapse expandIcon={() => <BgColorsOutlined style={{ fontSize: '20px', color: '#08c' }} />}>


WDYT about moving () => <BgColorsOutlined style={{ fontSize: '20px', color: '#08c' }} /> to it's own component?

made a new component TagColorIcon. It contains all the magick :)

yuliaHope · 2020-11-30T11:14:10Z

client/src/components/UserSettings/UserSettings.tsx

+
+
+const UserSettings: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);


let's replace with isOpen

and it's done

yuliaHope · 2020-11-30T11:20:02Z

client/src/components/UserSettings/SettingsTagColor.tsx

@@ -0,0 +1,53 @@
+import React from 'react';


I think TagColor file name will be a better option. It will avoid duplications and shorten import paths at least.

and it's done too

yuliaHope · 2020-11-30T11:20:26Z

client/src/components/UserSettings/userSettingsHandlers.ts

+}
+
+export function getTagColor(tagName: string, storedTagColors: string | undefined) {
+  const parsedTagColors = JSON.parse(<string>(storedTagColors)) || {};


We can remove JSON.parse and JSON.stringify here too. Also let's move getter and setter to TagSettings file.

Removed unnecessary things. Why should we move getter and setter to TagColor?

yuliaHope · 2020-11-30T11:22:58Z

client/src/components/UserSettings/userSettingsHandlers.ts

+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));


Can be just: localStorageHook({ ... storedTagColors, [tagName]: e.hex })

You're right! Done

…TagColors type

* 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>

not-SAINT and others added 11 commits November 16, 2020 23:03

feat: add new schedule table (#13)

2c90bb5

* feat: add new schedule table * chore: refactor cells renderers * chore: refactor renderers

feat: add switcher schedule view mode

cfb2aae

feat: add user settings

370550d

chore: refactor code - exclude switch

c9bcb8e

chore: refactor code

bb91baa

chore: refactor code - add uppercase

1ab28c2

Merge pull request #15 from yuliaHope/feature/S-14-switcher-schedule-…

e6af8a3

…view feat: add switcher schedule view mode

fix: implement correct localstorage hook

d95e8b7

feat: add userSettings button on schedule page

1b6dc81

feat: add user settings

6e312db

Merge branch 'feature/S-10-user-settings' of https://github.com/yulia…

e352821

…Hope/rsschool-api into feature/S-10-user-settings

yuliaHope reviewed Nov 30, 2020

View reviewed changes

Ftorik added 7 commits December 2, 2020 14:40

refactor: change serialize/deserialize data

183c164

refactor: rename files and data

f880ac1

refactor: change tag color styles structure

8e6cdf8

refactor: rename vars for better readability

8b03023

refactor: apply memoization to setTagColor

a4e306b

refactor: change structure of TagIcon

2497ac0

refactor: replace settings button, tweak button styles, change stored…

0593f33

…TagColors type

yuliaHope approved these changes Dec 7, 2020

View reviewed changes

Ftorik and others added 2 commits December 7, 2020 11:01

fix: resolve merge conflicts

f84aeda

Merge branch 'schedule' into feature/S-10-user-settings

2468187

yuliaHope merged commit 05f0655 into schedule Dec 7, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/s 10 user settings #19

Feature/s 10 user settings #19

Ftorik commented Nov 26, 2020

yuliaHope Nov 30, 2020

Ftorik Dec 2, 2020

yuliaHope Nov 30, 2020

Ftorik Dec 2, 2020

yuliaHope Nov 30, 2020

yuliaHope Nov 30, 2020

yuliaHope Nov 30, 2020

Ftorik Dec 2, 2020

yuliaHope Nov 30, 2020

Ftorik Dec 2, 2020

yuliaHope Nov 30, 2020

Ftorik Dec 2, 2020

yuliaHope Nov 30, 2020

Ftorik Dec 2, 2020

yuliaHope Nov 30, 2020

Ftorik Dec 2, 2020



		const UserSettings: React.FC = () => {
		const [isVisible, setIsVisible] = useState(false);

Feature/s 10 user settings #19

Feature/s 10 user settings #19

Conversation

Ftorik commented Nov 26, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment