mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-02 09:24:19 -07:00
Adding Simple URL-based feature flags (#117)
* Fixes #66: As a developer, I want to limit the audience that sees new features, so that we can control the message and positioning of our tool. Implements simple feature flagging via URL parameters. Provide "?flags=x,y,z" to enable flags x, y, and z. * Fixing type to use Location instead of URL * Updating README with info on how to use feature flags
This commit is contained in:
parent
c07a14a8db
commit
7ab14c7f3d
11 changed files with 202 additions and 31 deletions
56
client/src/contexts/FlagContext.tsx
Normal file
56
client/src/contexts/FlagContext.tsx
Normal file
|
@ -0,0 +1,56 @@
|
|||
import * as React from 'react';
|
||||
import * as queryString from 'query-string';
|
||||
|
||||
/**
|
||||
* FlagContext stores feature flags and passes them to consumers
|
||||
*/
|
||||
interface IFlagContext {
|
||||
/**
|
||||
* Contains a list of all currently-active flags
|
||||
*/
|
||||
flags: string[];
|
||||
}
|
||||
|
||||
const FlagContext = React.createContext<IFlagContext>({flags: []});
|
||||
|
||||
/**
|
||||
* `useFlags` returns all feature flags.
|
||||
*
|
||||
* @return {Flags[]} flags All project feature flags
|
||||
*/
|
||||
const useFlags = () : string[] => {
|
||||
const {flags} = React.useContext(FlagContext);
|
||||
return flags;
|
||||
};
|
||||
|
||||
interface IURLFlagProviderProps {
|
||||
children: React.ReactNode,
|
||||
location: Location
|
||||
}
|
||||
|
||||
/**
|
||||
* `URLFlagProvider` is a provider for FlagContext.
|
||||
* It is passed the current URL and parses the
|
||||
* "flags" parameter, assumed to be a comma-separated
|
||||
* list of currently-active flags.
|
||||
* @param {URL} location : the current URL object
|
||||
* @param {ReactNode} children : the children components
|
||||
* @return {ReactNode} URLFlagProvider component
|
||||
**/
|
||||
const URLFlagProvider = ({children, location}: IURLFlagProviderProps) => {
|
||||
const flagString = queryString.parse(location.search).flags;
|
||||
let flags: string[] = [];
|
||||
if (flagString && typeof flagString === 'string') {
|
||||
flags = (flagString as string).split(',');
|
||||
}
|
||||
console.log(JSON.stringify(location), JSON.stringify(flags));
|
||||
|
||||
return (
|
||||
<FlagContext.Provider
|
||||
value={{flags}}>
|
||||
{children}
|
||||
</FlagContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export {FlagContext, URLFlagProvider, useFlags};
|
Loading…
Add table
Add a link
Reference in a new issue