publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-30 14:01:40 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Parameterize zoom experiments (#339)

Browse source 
* Adding ability to set flags in url
* parameterizing tile layers
This commit is contained in:
Nat Hillard 2021-07-14 11:26:12 -04:00 • committed by GitHub
commit 3cd6e06115
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 188 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

12
client/src/contexts/FlagContext.test.tsx
View file

@ -6,7 +6,7 @@ describe('URL params are parsed and passed to children', () => {
describe('when the URL has a "flags" parameter set', () => {
// We artificially set the URL to localhost?flags=1,2,3
beforeEach(() => {
window.history.pushState({}, 'Test Title', '/?flags=1,2,3');
window.history.pushState({}, 'Test Title', '/?flags=1,2,3,test=4');
});
describe('when using useFlags', () => {
beforeEach(() => {
@ -14,10 +14,11 @@ describe('URL params are parsed and passed to children', () => {
const flags = useFlags();
return (
<>
<div>{flags.includes('1') ? 'yes1' : 'no1'}</div>
<div>{flags.includes('2') ? 'yes2' : 'no2'}</div>
<div>{flags.includes('3') ? 'yes3' : 'no3'}</div>
<div>{flags.includes('4') ? 'yes4' : 'no4'}</div>
<div>{'1' in flags ? 'yes1' : 'no1'}</div>
<div>{'2' in flags ? 'yes2' : 'no2'}</div>
<div>{'3' in flags ? 'yes3' : 'no3'}</div>
<div>{'4' in flags ? 'yes4' : 'no4'}</div>
<div>{flags['test'] == 4 ? 'yes5' : 'no5'}</div>
</>
);
};
@ -33,6 +34,7 @@ describe('URL params are parsed and passed to children', () => {
expect(screen.queryByText('yes2')).toBeInTheDocument();
expect(screen.queryByText('yes3')).toBeInTheDocument();
expect(screen.queryByText('yes4')).not.toBeInTheDocument();
expect(screen.queryByText('yes5')).toBeInTheDocument();
});
});
});

21
client/src/contexts/FlagContext.tsx
View file

@ -1,6 +1,8 @@
import * as React from 'react';
import * as queryString from 'query-string';
export type FlagContainer = { [key: string]: any };
/**
* FlagContext stores feature flags and passes them to consumers
*/
@ -8,7 +10,7 @@ import * as queryString from 'query-string';
/**
* Contains a list of all currently-active flags
*/
flags: string[];
flags: FlagContainer;
}
const FlagContext = React.createContext<IFlagContext>({flags: []});
@ -16,9 +18,9 @@ const FlagContext = React.createContext<IFlagContext>({flags: []});
/**
* `useFlags` returns all feature flags.
*
* @return {Flags[]} flags All project feature flags
* @return {FlagContainer} flags All project feature flags
*/
const useFlags = () : string[] => {
const useFlags = () : FlagContainer => {
const {flags} = React.useContext(FlagContext);
return flags;
};
@ -39,9 +41,18 @@ interface IURLFlagProviderProps {
**/
const URLFlagProvider = ({children, location}: IURLFlagProviderProps) => {
const flagString = queryString.parse(location.search).flags;
let flags: string[] = [];
const flags : FlagContainer = {};
let flagList: string[] = [];
if (flagString && typeof flagString === 'string') {
flags = (flagString as string).split(',');
flagList = (flagString as string).split(',');
}
for (const flag of flagList) {
if (flag.includes('=')) {
const [key, value] = flag.split('=');
flags[key] = value;
} else {
flags[flag] = true;
}
}
console.log(JSON.stringify(location), JSON.stringify(flags));