Statsig - How to get true value from feature gate? - javascript

I am trying to implement StatSig(Refer: https://docs.statsig.com/) feature into my react(Nextjs) application. I have created new feature gate changeComponentUI and Rule has been added as Environment Tier -> Any of - staging, development. From client side I am trying retrieve the data as const statsigFeatureOn = useGate('changecomponentui').value, here I am always getting false value even if it is ON.
In app.js I have initialized like,
<StatsigProvider
sdkKey={"client-PsdasdASQW6556aIOPASASsqwewqeGSsad"}
user={{ userId, }}
options={{ environment: { tier: 'staging' } }}
waitForInitialization={true}
>
<Component {...args} />
</StatsigProvider>
In browser's Network tab I am getting -
Request Payload as,
{"user":{"userID":"","statsigEnvironment":{"tier":"staging"}},"statsigMetadata":{"sessionID":"433h67a3-416c-4914-82fd-e3c2b12f7n05","sdkType":"react-client","sdkVersion":"0.5.1","stableID":"8d122318-6d18-2322-889a-83c10e44e46"}}
Output is (Preview),
{
"gates": {
"+ZpxDXVQ/Rbhf02jl1Yv91VU+X+c0Gq/DZM+CmjPJgc=": false,
"uwglh6w2Nas8RufxC82qrsVAohod9gsGpvaT6/1l7ts=": false,
"sKSndsyjj+9MYUFlHPcdavbtA38g1+PjhofnyTDSxU8=": false,
"w9AtEJ/+vqrqb1kh8KPvhN2Rd32mkwfR+gxvlesY4ac=": true,
"gUZn3VlwEVdqBs7NcXGWHpBueNz0rlZGTufpLeB8Fug=": false
},
"feature_gates": {
"+ZpxDXVQ/Rbhf02jl1Yv91VU+X+c0Gq/DZM+CmjPJgc=": {
"name": "+ZpxDXVQ/Rbhf02jl1Yv91VU+X+c0Gq/DZM+CmjPJgc=",
"value": false,
"rule_id": "",
"secondary_exposures": []
},
"uwglh6w2Nas8RufxC82qrsVAohod9gsGpvaT6/1l7ts=": {
"name": "uwglh6w2Nas8RufxC82qrsVAohod9gsGpvaT6/1l7ts=",
"value": false,
"rule_id": "",
"secondary_exposures": []
},
"sKSndsyjj+9MYUFlHPcdavbtA38g1+PjhofnyTDSxU8=": {
"name": "sKSndsyjj+9MYUFlHPcdavbtA38g1+PjhofnyTDSxU8=",
"value": false,
"rule_id": "default",
"secondary_exposures": []
},
"w9AtEJ/+vqrqb1kh8KPvhN2Rd32mkwfR+gxvlesY4ac=": {
"name": "w9AtEJ/+vqrqb1kh8KPvhN2Rd32mkwfR+gxvlesY4ac=",
"value": true,
"rule_id": "6ZcQ0LOgAi2kSd5QgbtJzJ",
"secondary_exposures": []
},
"gUZn3VlwEVdqBs7NcXGWHpBueNz0rlZGTufpLeB8Fug=": {
"name": "gUZn3VlwEVdqBs7NcXGWHpBueNz0rlZGTufpLeB8Fug=",
"value": false,
"rule_id": "default",
"secondary_exposures": []
}
},
"configs": {},
"dynamic_configs": {},
"sdkParams": {},
"has_updates": true,
"time": 1631164754145
}
How can I get true value here? Also in output there is one object with true value but I am not getting it is for which feature gate's data.
Please help me to solve this issue.

Make sure you are using the exact ID from the console. In this case, you might need to do const statsigFeatureOn = useGate('changecomponentui').value if the feature name is "ChangeComponentUI" but the id is "changecomponentui". I believe all ID's are currently lowercase, but maybe camel case is a good reason not to do that (or to be case-insensitive)
(Edit) The following code snippet works for me in next.js after creating a gate by the same steps:
import React from "react";
import { StatsigProvider, useGate } from "statsig-react";
export default function App(): JSX.Element {
return (
<StatsigProvider
sdkKey={"client-(redacted)"}
user={{ userID: "" }} // Fixed from userId, but since userID didn't matter both worked in this case
options={{ environment: { tier: "staging" } }}
waitForInitialization={true}
>
<TestComponent />
</StatsigProvider>
);
}
function TestComponent() {
const statsigFeatureOn = useGate("changecomponentui").value;
return <div>{String(statsigFeatureOn)}</div>;
}

Related

Compare all object elements of two different arrays

sorry for my English at the start.
I have a problem with filtering a list of products posted in JSON. The code is written in react native with the use of react redux.
The object of each product looks like this:
ProductTest {
"barcode": "barcode",
"brand": "brand",
"category": "category",
"description": "description",
"details": "details",
"filters": Object {
"cienkie": false,
"farbowane": false,
"krecone_i_puszczace": false,
"normalne": false,
"oslabione": false,
"przetluszczajace": false,
"suche_i_zniszczone": false,
"wszystkie": true,
},
"id": "0",
"image": "image",
"ingredients": "ingredients",
"name": "name",
},
And the "appliedFilters" list looks like this:
Object {
"cienkie": false,
"farbowane": false,
"krecone_i_puszczace": false,
"normalne": false,
"oslabione": false,
"przetluszczajace": false,
"suche_i_zniszczone": false,
"wszystkie": false,
}
I don't know how to make the "appliedFilters" list to be compared with the "filters" for each product, and to return the matching products from the list.
If you have any ideas I would be greatful.
You can use the array filter method :
let keys = Object.keys(appliedFilters);
let filteredList = productList.filter(product => {
let matching = true;
keys.forEach(key => {
if(product.hasOwnProperty(key)){
if(!(product.filters[key] === appliedFilters[key])) matching = false;
}
}
if(matching) return product;
})
If you are sure that the attributes order of the filter and the product objects will not change, you can simplify like this :
let filteredList = productList.filter(product => JSON.stringify(product.filters) === JSON.stringify(appliedFilters))

Component don't re-render after redux modification

I'm using redux in my app and at first, it works as I want. When I add something into my state through the reducer, my component is re-rendering as I want. But when I only modify the value of a property inside the state, my component isn't re-rending.
If you need code I can upload it (or some parts) but I think that the problem is more of the way of thinking.
Exemple of my state
state = {
"BaliseSeen": {
"Marseille": [
{
"id": "5566",
"nom": "Notre dame de La Garde",
"type": "Monument",
"vue": true,
},
],
"Toulon": [
{
"id": "1122",
"nom": "Isen Yncrea Méditerranée",
"type": "Monument",
"vue": true,
},
{
"id": "3344",
"nom": "Appartement n°69",
"type": "Monument",
"vue": true,
},
{
"id": "6677",
"nom": "Mairie",
"type": "Info",
"vue": false,
},
],
},
"Medailles": [
{
"ville": "Toulon",
},
],
"User": [],
}
When I add something new like that, it work and re-rendered :
nextState = {...state,
BaliseSeen: {
...state.BaliseSeen, [city]: [...state.BaliseSeen[city], { id: action.value.id, type: action.value.type, nom: action.value.nom, vue: action.value.vue }]
}
}
But when I want to only change the property vue from false to true like that, it work (when I check the state in the app the modification is applied but my component isn't re-rendered :
BaliseSeenIndex = state.BaliseSeen[city].findIndex(item => item.id === action.value.id)
nextState = state
nextState.BaliseSeen[city][BaliseSeenIndex].vue = true
(I also tried to delete the element from my state and add it after, but same as before, it work without render my component)
So I don't know how to say that the state is modified
As commented; you should not mutate, do the following instead
//not sure where cityp comes from but I assume it is from the action
return {
...state,
BaliseSeen: {
...state.BaliseSeen,
[city]: state.BaliseSeen[city].map((item) =>
item.id !== action.value.id
? item//not the item we want to edit, return unchanged
: {//item we are looking for, return changed copy
...item,
vue: true,
}
),
},
};

map objects in multidimensional array javascript react native based on column index

I have a two history objects that are podcasts and articles, i want to display both in the same screen in descending order by which time they were clicked,
Here are the variables of original article and podcast from DB
var { articles, articlesInHistory, podcastsInHistory, podcasts } = this.props.stores.appStore;
Here is my article Object from history: console.log("dataItem", articlesInHistory)
dataItem Array [
Object {
"currentTime": 1585439646,
"id": "156701",
Symbol(mobx administration): ObservableObjectAdministration {
"defaultEnhancer": [Function deepEnhancer],
"keysAtom": Atom {
"diffValue": 0,
"isBeingObserved": true,
"isPendingUnobservation": false,
"lastAccessedBy": 26,
"lowestObserverState": 2,
"name": "appStore#1.articlesInHistory[..].keys",
"observers": Set {},
},
"name": "appStore#1.articlesInHistory[..]",
"pendingKeys": Map {
Symbol(Symbol.toStringTag) => false,
"hasOwnProperty" => false,
"toJSON" => false,
},
"proxy": [Circular],
"target": Object {
"currentTime": 1585439646,
"id": "156701",
Symbol(mobx administration): [Circular],
},
"values": Map {
"id" => "156701",
"currentTime" => 1585439646,
},
},
},
,]
And podcast from history: console.log("dataItem", podcastsInHistory)
dataItem Array [
Object {
"currentTime": 1585439636,
"id": "4",
Symbol(mobx administration): ObservableObjectAdministration {
"defaultEnhancer": [Function deepEnhancer],
"keysAtom": Atom {
"diffValue": 0,
"isBeingObserved": true,
"isPendingUnobservation": false,
"lastAccessedBy": 26,
"lowestObserverState": 2,
"name": "appStore#1.podcastsInHistory[..].keys",
"observers": Set {},
},
"name": "appStore#1.podcastsInHistory[..]",
"pendingKeys": Map {
Symbol(Symbol.toStringTag) => false,
"hasOwnProperty" => false,
"toJSON" => false,
},
"proxy": [Circular],
"target": Object {
"currentTime": 1585439636,
"id": "4",
Symbol(mobx administration): [Circular],
},
"values": Map {
"id" => "4",
"currentTime" => 1585439636,
},
},
},
]
now i want to order the two components using currentTime in condition
for example if this podcast was first then i should return
<PodcastList navigate={navigate} podcast={podcast} key={index} />)
Or if the article is first then show
<SmallArticle key={index} article={article} />
i need them mixed not like articles on top and podcast bottom, i been searching arrays sort but couldn't solve it.
I want a condition based on currentTime and using an id to identify or match objects thanks.
As you don´t know from the data if its an article or a podcast (there is no attribute in your objects that tells you that), you can´t put them in the same list-array.
The only way to know if you should render an Article or a Podcast component is based on what list you are reading.
Keep two indexes, articleIndex = 0 and podcastIndex = 0 (you can keep that in your state), and read the actual article and podcast for respective list, and compare the current time. Then you will know what component to render, and advance the corresponding list index.
In pseudo code:
while articleIndex < articlesList.length && podcastIndex < podcastList.length do:
if articlesList[articleIndex].currentTime < podcastList[pocastIndex].currentTime do:
render <SmallArticle article={articlesList[articleIndex]} key ={articleIndex}/>//render SmallArticle
articleIndex += 1; //advance index
else do:
render <PodcastList podcast={podcastList[postcastIndex]} key={podcastIndex} />
podcastIndex +=1;
when the while statement finishes, is because one of the list has been fully traversed. You need to traverse the rest of the other and render the respect component.
If you show me some of your components code can help you with code in more detail, but I don´t know the context.

Immutable, update inside map not returning correct object

I am trying to write a function to update an immutable object I have. I am using return myitem.updateIn so i can chain another update ontop of this one that is already working. So far, I have this :
memo.updateIn(['Topics', 'filters'], function(topic) {
topic.map(function(singleTopic) {
singleTopic.update('filters', function(subTopicFilters) {
subTopicFilters.map(function(singleSubTopic) {
if(singleSubTopic.get('checked')){
console.log("check", singleTopic.toJS());
return singleTopic.set('checked', true);
}
})
})
})
});
The console log inside is hitting the correct part, however this is does not seem to be updating the immutable map as I assumed it would have. The checked value in psycological disorders should be set to true. See fiddle here for example https://jsfiddle.net/alexjm/c5edxaue/27/ .
For some context, this is being used in a return where a couple of separate .update will be run on the memo in order like this
returnModifiedData(memo) {
return memo.update (....
).update( .....
.update();
This function is the first step in this process, the other 2 are already working. I am not sure what I am doing wrong to not get this to update correctly, possibly how I am trying to .set the singletopic inside? The basic logic is check if the topic has and sub topics with checked inside, and if so, check off the topic. Any help would be greatly appreciated. Thanks!
EDIT : forgot to add what the memo itself looks like :
const memo = {
"Topics": {
"filters": {
"Psychological disorders": {
"checked": false,
"filters": {
"Anxiety disorders": {
"filters": {},
"checked": true
}
}
},
"test": {
"checked": false,
"filters": {
"test": {
"filters": {},
"checked": false
}
}
}
},
"isOpen": false
}
};
It'd be better if you can explain what's the logic you want to achieve.
I'll guess it here:
Iterate through and update items in Topics->filters.
For each singleTopic iterated, further iterate through it's filters.
If any of its singleSubTopic have checked to be true, update the singleTopic's checked to be true.
And below is what you may expect:
const map = {
"Topics": {
"filters": {
"Psychological disorders": {
"checked": false,
"filters": {
"Anxiety disorders": {
"filters": {},
"checked": true
}
}
},
"test": {
"checked": false,
"filters": {
"test": {
"filters": {},
"checked": false
}
}
}
},
"isOpen": false
}
};
let memo = Immutable.fromJS(map);
memo = memo.updateIn(['Topics', 'filters'], function(topics) {
// Remember to return the updated topics.
return topics.map(function(singleTopic) {
// If singleTopic has any of its singleSubTopic under filters have value checked=== true
// update the singleTopic's checked, otherwise return unaltered.
if (singleTopic.get('filters').some(function(singleSubTopic) {
return singleSubTopic.get('checked');
})) {
return singleTopic.set('checked', true);
}
return singleTopic;
});
});
console.log(memo.toJS());
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js"></script>

Breeze-Sequelize with autoGeneratedKeyType Identity

I am trying to create an MS SQL db with breeze-breeze sequelize and i like to generate the ids on the db server. My solution is oriented on the tempHire example from the breeze samples repo
My Metadata.json looks like this:
{
"metadataVersion": "1.0.5",
"namingConvetion": "camelCase",
"localQueryComparisonOptions": "caseInsensitiveSQL",
"dataServices": [{
"serviceName": "breeze/",
"hasServerMetadata": true,
"useJsonp": false
}],
"structuralTypes": [{
"shortName": "User",
"namespace": "Model",
"autoGeneratedKeyType": "Identity",
"defaultResourceName": "Users",
"dataProperties": [{
"nameOnServer": "id",
"dataType": "Int32",
"isPartOfKey": true,
"isNullable": false
}, {
"name": "firstName",
"dataType": "String"
}, {
"name": "lastName",
"dataType": "String"
}, {
"name": "userName",
"dataType": "String",
"isNullable": false,
"maxLength": 64,
"validators": [{
"name": "required"
}, {
"maxLength": 64,
"name": "maxLength"
}]
}, {
"name": "email",
"dataType": "String"
}]
}],
"resourceEntityTypeMap": {
"Users": "User:#Model"
}
}
though this will not create an identity id column.
the created table looks like the following create script:
CREATE TABLE [User] (
[id] INTEGER NOT NULL ,
[firstName] NVARCHAR(255) DEFAULT NULL,
[lastName] NVARCHAR(255) DEFAULT NULL,
[userName] NVARCHAR(64) NOT NULL DEFAULT '',
[email] NVARCHAR(255) DEFAULT NULL,
PRIMARY KEY ([id])
)
In addition here are some breeze server side implementations:
var dbConfig = {
user: 'user',
password: 'secret',
dbName: 'dbname'
};
var sequelizeOptions = {
host: 'hostname',
dialect: 'mssql',
port: 1433
};
function createSequelizeManager() {
var metadata = readMetadata();
var sm = new SequelizeManager(dbConfig, sequelizeOptions);
sm.importMetadata(metadata);
return sm;
}
var _sequelizeManager = createSequelizeManager();
_sequelizeManager.authenticate();
_sequelizeManager.sync(false /* createDb */)
.then(seed)
.then(function () {
console.log('db init successful');
});
Do i have a wrong configuration? Is the Identity not available with the mssql dialect? Am i doing something wrong?
With the configuration is nothing wrong i guess.
I just found out that there is a bug in the MetadataMapper from breeze-sequelize. I tested it with the sequelize version 2.1.3 and 3.x.
The autoIncrement attribute for sequelize will never get set. The if statement will never be true. I'll report this on github. ;)
The fix would be the following code in the MetadataMapper.js at line 134:
if (attributes.type.key == "INTEGER" || attributes.type.key =="BIGINT") {
attributes.autoIncrement = true;
}
In the original code the if statement is attributes.type== "INTEGER" || attributes.type=="BIGINT" where the type actually never is a string.

Categories

Resources