diff --git a/scripts/generateSvg.logger.teams.ts b/scripts/generateSvg.logger.teams.ts index 46372156..86de2931 100755 --- a/scripts/generateSvg.logger.teams.ts +++ b/scripts/generateSvg.logger.teams.ts @@ -1,5 +1,5 @@ import fs from 'fs'; -import { teamStyles } from '../src/logger/teamStyles'; +import { commonStyle, teamStyles } from '../src/logger/teamStyles'; fs.writeFileSync(__dirname + '/../static/logger.svg', generateSvg()); @@ -72,8 +72,8 @@ function generateSvg(): string { } .common { - background-color: ${teamStyles.common.background}; - color: ${teamStyles.common.font}; + background-color: ${commonStyle.common.background}; + color: ${commonStyle.common.font}; } diff --git a/src/logger/@types/logger.ts b/src/logger/@types/logger.ts index bf02471a..dd9b1353 100644 --- a/src/logger/@types/logger.ts +++ b/src/logger/@types/logger.ts @@ -1,7 +1,7 @@ -import type { teamStyles } from '../teamStyles'; +import type { commonStyle, teamStyles } from '../teamStyles'; export type Teams = Record>; export type LogCall = (team: TeamName, ...args: unknown[]) => void; export type TeamSubscription = (arg: TeamName) => void; -export type TeamStyle = keyof typeof teamStyles; -export type TeamName = Exclude; +export type TeamStyle = TeamName | keyof typeof commonStyle; +export type TeamName = keyof typeof teamStyles; diff --git a/src/logger/log.ts b/src/logger/log.ts index 7e81c7ea..36f0d2d6 100644 --- a/src/logger/log.ts +++ b/src/logger/log.ts @@ -1,21 +1,33 @@ +import { isString } from '../isString/isString'; import { storage } from '../storage/storage'; -import type { LogCall, TeamStyle, TeamSubscription } from './@types/logger'; +import type { + LogCall, + TeamName, + TeamStyle, + TeamSubscription, +} from './@types/logger'; import { STORAGE_KEY } from './storage-key'; -import { teamStyles } from './teamStyles'; +import { commonStyle, isTeam, teamStyles } from './teamStyles'; + +const allStyles = { ...teamStyles, ...commonStyle }; const messageStyle = (teamStyle: TeamStyle): string => { - const { background, font } = teamStyles[teamStyle]; + const { background, font } = allStyles[teamStyle]; return `background: ${background}; color: ${font}; padding: 2px 3px; border-radius:3px`; }; +const getTeamSubscriptions = (): TeamName[] => { + const teams: unknown = storage.local.get(STORAGE_KEY); + if (!isString(teams)) return []; + return teams.split(',').filter(isTeam); +}; + /** * Subscribe to a team’s log * @param team the team’s unique ID */ const subscribeTo: TeamSubscription = (team) => { - const teamSubscriptions: string[] = storage.local.get(STORAGE_KEY) - ? (storage.local.get(STORAGE_KEY) as string).split(',') - : []; + const teamSubscriptions: string[] = getTeamSubscriptions(); if (!teamSubscriptions.includes(team)) teamSubscriptions.push(team); storage.local.set(STORAGE_KEY, teamSubscriptions.join(',')); log(team, '🔔 Subscribed, hello!'); @@ -27,11 +39,9 @@ const subscribeTo: TeamSubscription = (team) => { */ const unsubscribeFrom: TeamSubscription = (team) => { log(team, '🔕 Unsubscribed, good-bye!'); - const teamSubscriptions: string[] = ( - storage.local.get(STORAGE_KEY) as string - ) - .split(',') - .filter((t) => t !== team); + const teamSubscriptions: string[] = getTeamSubscriptions().filter( + (t) => t !== team, + ); storage.local.set(STORAGE_KEY, teamSubscriptions.join(',')); }; @@ -48,12 +58,8 @@ if (typeof window !== 'undefined') { /** * Runs in all environments, if local storage values are set. */ - export const log: LogCall = (team, ...args) => { - // TODO add check for localStorage - if (!((storage.local.get(STORAGE_KEY) || '') as string).includes(team)) { - return; - } + if (!getTeamSubscriptions().includes(team)) return; const styles = [messageStyle('common'), '', messageStyle(team), '']; diff --git a/src/logger/logger.test.ts b/src/logger/logger.test.ts index 9ad08058..47ee8d2b 100644 --- a/src/logger/logger.test.ts +++ b/src/logger/logger.test.ts @@ -102,9 +102,7 @@ describe('Add and remove teams', () => { }); it('should return the list of registered teams', () => { - let teams: string[] = []; - if (window.guardian?.logger) teams = window.guardian.logger.teams(); - console.log(teams); + const teams = window.guardian?.logger?.teams(); expect(Array.isArray(teams)).toBe(true); expect(teams).toContain('cmp'); }); diff --git a/src/logger/teamStyles.ts b/src/logger/teamStyles.ts index 1093acfd..75dc1cd2 100644 --- a/src/logger/teamStyles.ts +++ b/src/logger/teamStyles.ts @@ -1,14 +1,20 @@ +import type { TeamName } from './@types/logger'; + +/** Common Guardian blue label. Do not edit */ +const commonStyle = { + common: { + background: '#052962', + font: '#ffffff', + }, +} as const; + /** * You can only subscribe to teams from this list. * Add your team name below to start logging. * * Make sure your label has a contrast ratio of 4.5 or more. * */ -export const teamStyles = { - common: { - background: '#052962', - font: '#ffffff', - }, +const teamStyles = { commercial: { background: '#77EEAA', font: '#004400', @@ -38,3 +44,8 @@ export const teamStyles = { font: '#ffffff', }, } as const; + +const isTeam = (team: string): team is TeamName => + Object.keys(teamStyles).includes(team); + +export { commonStyle, teamStyles, isTeam };