Commit 87a7f931 authored by Marek Veselý's avatar Marek Veselý
Browse files

Resolve "keep local/session storage keys at one place"

parent 8c33a1a6

frontend/src/clientsettings/ColorMode/useColorMode.tsx

+2 −2
Original line number Diff line number Diff line
@@ -3,12 +3,12 @@ import { 
  makeVar,

  useLocalStorageReactiveVar,

} from '@inject/graphql/client/reactive'

import Keys from '@inject/shared/localstorage/keys'



const KEY = 'dark'

const darkReactiveVar = makeVar<boolean | null>(null)



const useColorMode = () =>

  useLocalStorageReactiveVar(darkReactiveVar, KEY, {

  useLocalStorageReactiveVar(darkReactiveVar, Keys.DARK_MODE, {

    onChange: value => {

      const dark =

        value === null

frontend/src/clientsettings/NotificationLimit/useNotificationLimit.tsx

+2 −2
Original line number Diff line number Diff line
@@ -2,11 +2,11 @@ import { 
  makeVar,

  useLocalStorageReactiveVar,

} from '@inject/graphql/client/reactive'

import Keys from '@inject/shared/localstorage/keys'



const KEY = 'notificationLimit'

const limitReactiveVar = makeVar<number>(10)



const useNotificationLimit = () =>

  useLocalStorageReactiveVar(limitReactiveVar, KEY)

  useLocalStorageReactiveVar(limitReactiveVar, Keys.NOTIFICATION_LIMIT)



export default useNotificationLimit

frontend/src/clientsettings/vars/experimentalV2.ts

+4 −3
Original line number Diff line number Diff line 
import { makeVar, useReactiveVar } from '@inject/graphql/client/reactive'

import Keys from '@inject/shared/localstorage/keys'



const key = 'useExperimentalV2'

const initialSettings: boolean = localStorage.getItem(key) === 'true'

const initialSettings: boolean =

  localStorage.getItem(Keys.EXPERIMENTAL_ALLOWED) === 'true'



export const experimentalV2 = makeVar<boolean>(initialSettings)

export const useExperimentalV2 = () => useReactiveVar(experimentalV2)



function change(value: boolean) {

  localStorage.setItem(key, value.toString())

  localStorage.setItem(Keys.EXPERIMENTAL_ALLOWED, value.toString())

}



experimentalV2.onNextChange(function onNext() {

frontend/src/clientsettings/vars/relativeTime.ts

+4 −3
Original line number Diff line number Diff line 
import { makeVar, useReactiveVar } from '@inject/graphql/client/reactive'

import Keys from '@inject/shared/localstorage/keys'



const key = 'useRelativeTime'

const initialSettings: boolean = localStorage.getItem(key) === 'true'

const initialSettings: boolean =

  localStorage.getItem(Keys.RELATIVE_TIME) === 'true'



export const relativeTime = makeVar<boolean>(initialSettings)

export const useRelativeTime = () => useReactiveVar(relativeTime)



function change(value: boolean) {

  localStorage.setItem(key, value.toString())

  localStorage.setItem(Keys.RELATIVE_TIME, value.toString())

}



relativeTime.onNextChange(function onNext() {

frontend/src/clientsettings/vars/teams.ts

+9 −15
Original line number Diff line number Diff line 
import { shallowCompareKeys } from '@blueprintjs/core/lib/esm/common/utils'

import { makeVar, useReactiveVar } from '@inject/graphql/client/reactive'

import type { Team } from '@inject/graphql/fragments/Team.generated'

import Keys from '@inject/shared/localstorage/keys'



export interface TeamState {

  team: Team
@@ -12,32 +13,25 @@ export interface TeamStateMap { 
  [teamId: string]: TeamState

}



const key = 'teamStateMap'

const initialSettings: TeamStateMap = JSON.parse(

  localStorage.getItem(key) || '{}'

  localStorage.getItem(Keys.INSTRUCTOR_TEAMS) || '{}'

)



export const teamStateMap = makeVar<TeamStateMap>(initialSettings)

export const useTeamStateMap = () => useReactiveVar(teamStateMap)



function change(value: TeamStateMap) {

  localStorage.setItem(key, JSON.stringify(value))

  localStorage.setItem(Keys.INSTRUCTOR_TEAMS, JSON.stringify(value))

}



window.addEventListener(

  'storage',

  ({ key: keystorage, newValue, oldValue }) => {

    if (keystorage === key) {

window.addEventListener('storage', ({ key, newValue, oldValue }) => {

  if (key === Keys.INSTRUCTOR_TEAMS) {

    const newMap = JSON.parse(newValue || '{}')

      if (

        newValue !== oldValue &&

        !shallowCompareKeys(newMap, teamStateMap())

      ) {

    if (newValue !== oldValue && !shallowCompareKeys(newMap, teamStateMap())) {

      teamStateMap(newMap)

    }

  }

  }

)

})



export const toggleTeam = (teamId: string) => {

  const prev = teamStateMap() as TeamStateMap