I have a ternary within a map function, that currently only switches based on one option. I need to be able to pull the "home" option and set it to "/" if the user clicks that option
const buttons = ['Home', 'Docs', 'About-Us'];
const buttonSlugs = buttons.map(button => button === 'About-Us' ? 'aboutus' : button.toLowerCase());
How can I modify the ternary to an if/else, so that the home button can be set to "/"?
You can use a conditional like:
const buttons = ['Home', 'Docs', 'About-Us'];
const buttonSlugs = buttons.map(button => {
if (button === 'About-Us') {
return 'aboutus';
}
else if (button === 'Home') {
return '/';
}
else {
return button.toLowerCase();
}
});
console.log(buttonSlugs);
But this sort of approach can get ugly if you have many mappings or if you expect to add more. Another approach is to use an object of functions, each of which performs the transformation you wish for a given button:
const buttons = ['Home', 'Docs', 'About-Us'];
const transformations = {
'About-Us': () => 'aboutus',
Home: () => '/',
Docs: button => button.toLowerCase(),
};
const buttonSlugs = buttons.map(btn => transformations[btn](btn));
console.log(buttonSlugs);
This is easily extensible and keeps the transformation logic out of the map.
If you want a default action or the ability to handle missing buttons, you can check for an empty key in the transformations object before calling the retrieved function and proceed accordingly.
Are you just asking for:
buttons.map(button => {
if(button === 'Home'){
do something
} else if (button === 'About-us') {
do something else
} else if (button === 'Docs') {
do something elser
}
}
might be better to use a switch though and a forEach since map returns something, forEach doesnt:
buttons.forEach(button => {
switch(button){
case 'Home':
do something
break
case 'About-us':
do something
break
case 'Docs':
do something
break
default:
break
}
}
You could use a switch statement rather than if
const buttonSlugs = buttons.map(button => {
switch (button) {
case 'About-Us':
button = 'aboutus';
break;
case 'Docs':
button = 'docs';
break;
case 'Home':
button = '/';
break;
}
})
I think this is what you wanted to do.
const buttons = ['Home', 'Docs', 'About-Us'];
const buttonSlugs = buttons.map((button)=>{
if(button==='About-Us'){
return 'aboutus';
}
else if(button==='Home'){
return '/';
}
else{
return button.toLowerCase();
}
});
console.log(buttonSlugs); // for result
const buttons = ['Home', 'Docs', 'About-Us'];
const buttonSlugs = buttons.map(button => {
let slug;
switch (button) {
case 'About-Us':
slug = 'aboutus';
break;
case 'Home':
slug = '/';
break;
default:
slug = button.toLocaleLowerCase();
break;
}
return slug;
});
Related
This is the variable i am having right now
[
{
"_id":"63773059c3160f782c087e33",
"nfrid":"637328ebf5c4b2558b064809",
"nfrname":"azuread",
"fileName":"package.json",
"isImport":false,
"isConst":false,
"isComponent":false,
"isNewFile":false,
"landmark":"\"react\"",
"isAfter":false,
"fileContent":"\"#azure/msal-react\": \"^1.4.9\",",
"filePath":"package.json",
"isPackage":true,
"isIndexHtml":false,
"projecttypeid":"6372366d1b568e00d8af2e44",
"projecttypetitle":"PWA React",
"nfrGitIo":[
{
"_id":"637328ebf5c4b2558b064809",
"iconpath":"https://cdnerapidxdevportal.azureedge.net/webdesignerimages/azure-active-directory-aad-icon-488x512-3d71nrtk.png",
"title":"Azure AD",
"description":"Azure Active Directory (Azure AD), part of Microsoft Entra, is an enterprise identity service that provides single sign-on, multifactor authentication, and conditional access to guard against 99.9 percent of cybersecurity attacks."
}
]
},
{
"_id":"63773144c3160f782c087e35",
"nfrid":"637328ebf5c4b2558b064809",
"nfrname":"azuread",
"fileName":"index.js",
"isImport":true,
"isConst":false,
"isComponent":false,
"isNewFile":false,
"isPackage":false,
"landmark":null,
"isAfter":null,
"fileContent":"import { MsalProvider } from '#azure/msal-react';import { msalConfig } from './authConfig';import {PublicClientApplication } from '#azure/msal-browser';",
"filePath":"src/index.js",
"isIndexHtml":false,
"projecttypeid":"6372366d1b568e00d8af2e44",
"projecttypetitle":"PWA React",
"nfrGitIo":[
{
"_id":"637328ebf5c4b2558b064809",
"iconpath":"https://cdnerapidxdevportal.azureedge.net/webdesignerimages/azure-active-directory-aad-icon-488x512-3d71nrtk.png",
"title":"Azure AD",
"description":"Azure Active Directory (Azure AD), part of Microsoft Entra, is an enterprise identity service that provides single sign-on, multifactor authentication, and conditional access to guard against 99.9 percent of cybersecurity attacks."
}
]
},
]
I am having many flags like isImport, isPackage, isIndexHtml like that. I am trying to put those flags in a switch case and call individual function when each flag is true.Something like this,
for (let i = 0; i < cosmos.length; i++) {
console.log(cosmos[0].isPackage);
switch (cosmos[i]) {
case `${cosmos[i].isImport === true}`:
const statusImport = common.updateImport(cosmos[i]);
console.log(statusImport);
break;
// case `${cosmos[i].isConst === true}`:
// console.log("I own a dog");
// break;
case `${cosmos[i].isPackage === true}`:
const statusPackage = common.updatePackage(cosmos[i]);
console.log(statusPackage);
break;
case `${cosmos[i].isIndexHtml === true}`:
const statusIndexHtml = common.updateIndexHTML(cosmos[i]);
console.log(statusIndexHtml);
break;
// case `${cosmos[i].isNewFile === true}`:
// const statusNewFile = common.addNewFile(cosmos[i]);
// console.log(statusNewFile);
// break;
default:
console.log("Nothing to add/update");
break;
}
}
But when I run this i am always getting the default console log. I dont know what i am missing
This is my first switch case implementation. Can someone point me in the right direction?
Don't convert them to strings and in switch condition add just true:
for (let i = 0; i < cosmos.length; i++) {
console.log(cosmos[0].isPackage);
switch (true) {
case cosmos[i].isImport:
const statusImport = common.updateImport(cosmos[i]);
console.log(statusImport);
break;
case cosmos[i].isPackage:
const statusPackage = common.updatePackage(cosmos[i]);
console.log(statusPackage);
break;
case cosmos[i].isIndexHtml:
const statusIndexHtml = common.updateIndexHTML(cosmos[i]);
console.log(statusIndexHtml);
break;
default:
console.log("Nothing to add/update");
break;
}
}
switch is not the right construct to use in this case.
Simply use if/else here.
Since you're testing several different values from cosmos[i], not testing a single value against multiple possible matches, switch isn't the right tool here. (You can use it, just like you can use a wrench to bang in a nail, but it's not the right tool.) Instead, use an if/else if/else chain:
for (let i = 0; i < cosmos.length; i++) {
if (cosmos[i].isImport) {
const statusImport = common.updateImport(cosmos[i]);
console.log(statusImport);
} else if (cosmos[i].isPackage) {
const statusPackage = common.updatePackage(cosmos[i]);
console.log(statusPackage);
} else if (cosmos[i].isIndexHtml) {
const statusIndexHtml = common.updateIndexHTML(cosmos[i]);
console.log(statusIndexHtml);
} else {
console.log("Nothing to add/update");
}
}
Separately, in new code, I'd suggest using a for-of instead of a for when you don't need the index:
for (const entry of cosmos) {
if (entry.isImport) {
const statusImport = common.updateImport(entry);
console.log(statusImport);
} else if (entry.isPackage) {
const statusPackage = common.updatePackage(entry);
console.log(statusPackage);
} else if (entry.isIndexHtml) {
const statusIndexHtml = common.updateIndexHTML(entry);
console.log(statusIndexHtml);
} else {
console.log("Nothing to add/update");
}
}
A switch statement can only interrogate one variable. In your case the correct solution is an if statement for each member variable. Replace the switch statement with this snippet:
if (cosmos[i].isImport === true) {
const statusImport = common.updateImport(cosmos[i]);
console.log(statusImport);
}
if (cosmos[i].isPackage === true) {
const statusPackage = common.updatePackage(cosmos[i]);
console.log(statusPackage);
}
if (cosmos[i].isIndexHtml === true) {
const statusIndexHtml = common.updateIndexHTML(cosmos[i]);
console.log(statusIndexHtml);
}
I note that your data structure does not mutually exclude the isImport isPackage and isIndexHtml - so in principle any combination of them could be true and my proposed code would execute accordingly.
I am working with an array of urls and for each url i wanna find a image corresponding to the site domain. my first attempt was
const url = new URL(props.url);
const platform = url.hostname.split(".")[1];
console.log(platform)
const platform_logos = {
"codechef": "images/chef.png",
"withgoogle": "images/google.png",
.
.
.
"codeforces": "images/codeforces.png",
}
let platform_logo = platform_logos[platform];
but it doesnt work with url of type 'https://momo2022fr.hackerearth.com' so i had to resort to
let platform_logo = "images/code.png"
if (url.includes("hackerearth")) {
platform_logo = "images/hackerearth.png"
}
else if (url.includes("hackerrank")) {
platform_logo = "images/hackerrank.png"
}
else if (url.includes("codeforces")) {
platform_logo = "images/codeforces.png"
}
else if (url.includes("codechef")) {
platform_logo = "images/chef.png"
}
else if (url.includes("atcoder")) {
platform_logo = "images/atcoder.png"
}
else if (url.includes("leetcode")) {
platform_logo = "images/leetcode.png"
}
else if (props.url.includes("withgoogle")) {
platform_logo = "images/google.png"
}
Is there any better way of writing the code below, it just feels like it violates DRY
You could change how you're reading the url to only get the root domain.
location.hostname.split('.').reverse().splice(0,2).reverse().join('.').split('.')[0]
This code would give hackerearth for https://momo2022fr.hackerearth.com/.
So there are several ways of achieving this.
These are just two from the top of my head.
Parsing the url and using a switch() to determine the outcome, with fallback if none is found.
const url = new URL("https://www.withgoogle.com/search?q=test");
const sites = [
"hackerearth",
"hackerrank",
"codeforces",
"codechef",
"atcoder",
"leetcode",
"withgoogle",
];
console.info(url.hostname);
const site = url.hostname.match(new RegExp(`${sites.join("|")}`));
let logo = "";
switch (site[0]) {
case "hackerearth":
logo = "images/hackerearth.png";
break;
case "hackerrank":
logo = "images/hackerrank.png";
break;
case "codeforces":
logo = "images/codeforces.png";
break;
case "codechef":
logo = "images/chef.png";
break;
case "atcoder":
logo = "images/atcoder.png";
break;
case "leetcode":
logo = "images/leetcode.png";
break;
case "withgoogle":
logo = "images/google.png";
break;
default:
logo = "images/code.png";
break;
}
console.info(logo);
Then there is the modern way, with less code and programming the fallback.
// const url = new URL("https://eee.com/test");
const url = new URL("https://www.withgoogle.com/search?q=test");
const sites = {
hackerearth: "images/hackerearth.png",
hackerrank: "images/hackerrank.png",
codeforces: "images/codeforces.png",
codechef: "images/chef.png",
atcoder: "images/atcoder.png",
leetcode: "images/leetcode.png",
withgoogle: "images/google.png",
default: "images/code.png",
};
let site = url.hostname.match(new RegExp(`${Object.keys(sites).join("|")}`));
if (site === null) {
site = "default";
}
console.info(site, sites[site]);
You could just do the same thing as in your first solution and store the mapping from the substring to the image path in an ocject:
const platform_logos = {
"hackerearth": "images/hackerearth.png",
"hackerrank": "images/hackerrank.png",
"codeforces": "images/codeforces.png",
"codechef": "images/chef.png",
"atcoder": "images/atcoder.png",
"leetcode": "images/leetcode.png",
"withgoogle": "images/google.png"
};
Then you could iterate over the key-value pairs in your object to find the key that is part of the URL and return it once it matches:
function getLogo(url) {
for(const [key, value] of Object.entries(platform_logos)) {
if(url.contains(key)) {
return value;
}
}
}
let platform_logo = getLogo(url);
You can iterate over the images and check URL:
const url = "https://example.com/codechef/asdasd/...";
const platform_logos = {
"codechef": "images/chef.png",
"withgoogle": "images/google.png",
"codeforces": "images/codeforces.png",
}
let img = "default.png";
for (const [key, value] of Object.entries(platform_logos)) {
if (url.includes(key)) {
img = value;
break;
}
}
console.log(img);
I am trying to develop a google script app.
Here is one function to create an array map.
function getOffices(){
var result=AdminDirectory.Groups.list({domain:"example.com"})
result=result.groups.filter(function(group){
var str=group.email;
return str.search("-office#example.com")>=0;
})
result=result.map(function(group){ return {name:group.name,email:group.email}})
return result;
}
I have created a logic piece, that I want to execute certain actions based on the results, that looks like this:
var getOrgUnitPath = (accountOffice, accountType) => {
if (accountType === 'facilitator') {
return 'Limited Accounts/Gmail Plus Calendar';
} else {
switch (accountOffice) {
case accountOffice.includes('Boston'):
return "/Standard-Access/Boston";
break;
case accountOffice.includes('New York'):
return '/Standard-Access/New York';
break;
case accountOffice.includes('Lincoln'):
return '/Standard-Access/Lincoln';
break;
default:
return '/Standard-Access';
break;
}
}
};
Lastly, I try to set the organizational unit -- which is ultimately what i am trying to do, but can't seem to get the syntax right, I have tried everything I can think of. I have hardcoded the "accountType" and it worked, so I know the formObject.accountType is functioning properly.
orgUnitPath: getOrgUnitPath(accountType, formObject.accountType),
Thanks in advance!
This is a wrong usage of switch case.
if accountOffice's would be just New York, Boston, Lincoln. Remove the complex condition and replace with
switch (accountOffice) {
case "Boston":
return "/Standard-Access/Boston";
break;
case "New York":
return "/Standard-Access/New York";
break;
case "Lincoln":
return "/Standard-Access/Lincoln";
break;
default:
return "/Standard-Access";
break;
}
If not, use if-else if you have complex condition to check rather than simple match cases
if (accountOffice.includes("Boston")) {
return "/Standard-Access/Boston";
} else if (accountOffice.includes("New York")) {
return "/Standard-Access/New York";
} else if (accountOffice.includes("Lincoln")) {
return "/Standard-Access/Lincoln";
} else {
return "/Standard-Access";
}
I rewrote the code so I could get a better understanding of it. From what I can tell, getOffices lists all offices and getOrgUnitPath returns a path including the first office that matches the ordered list of offices ['Boston', 'NY', 'Lincoln']. If that's the case, what's missing is that the first argument to getOrgUnitPath should be getOffices(), right? (Notice it is the execution of the function getOffices.)
Here's the code "simplified" to my liking. I hope it helps:
const getOffices = () => {
const bigList = x.y.list({ domain: 'example.com' }) // ?
return bigList
.filter(cur => ~cur.email.search('abc'))
.map(cur => ({
name: cur.name,
email: cur.email
}))
}
const getPath = (accOffice, accType) => {
if (accType === 'xyz')
return 'foobar'
const city = ['Boston', 'NY', 'Lincoln']
.find(cur => accOffice.includes(cur))
return `yadayada/${city}`
}
const theFinalObj = {
orgUnitPath: getPath(getOffices(), 'rightHardcodedType')
}
is it possible to simplify the following code further, or is this the cleanest way possible? What I'm trying to do is, if the action.payload is not included in roles array, push it into it, if it is there remove it. I don't want to use lodash for this.
const idx = state.rolesFilter.findIndex(
role => role === action.payload,
);
if (idx === -1) {
nextState.roles.push(action.payload);
} else {
nextState.roles = state.roles.filter(role => role !== action.payload);
}
You could use Set
const set = new Set(state.roles);
const action = set.has(action.payload) ? 'delete' : 'add';
set[action](action.payload);
nextState.roles = [...set];
If you plan on using "toggle" a lot you may create a function
function toggle(array, item) {
const set = new Set(array);
const action = set.has(item) ? 'delete' : 'add';
set[action](item);
return [...set];
}
I am new to react js. I am creating a comparison between user typing and actual sentence to be typed Somehow I am able to achieve this but It is not perfect like nested map is not rendering properly if letter typed correctly it should render green background My state is updated properly But my nested map Kinda not working there is a delay
Component Code
renderLine = () => {
let test = this.props.test.get('master')
return test.map(line => {
return line.check.map( (ltr,i) => ltr.status ? <span key={i} className="correct">{ltr.letter}</span> : ltr.letter )
})
};
handleKeyPress = e => {
if(e.charCode === 32) {
this.setState({
pushToNext:true,
currentTyping:""
})
}
};
handleInput = e => {
if(e.target.value !== " "){
let {storeValue} = this.state;
console.log(storeValue.length);
let updatedWord = e.target.value;
let updateArr = [];
if(storeValue.length === 0){
updateArr = storeValue.concat(updatedWord)
}else {
if(this.state.pushToNext){
updateArr = storeValue.concat(updatedWord)
}else {
storeValue.pop();
updateArr = storeValue.concat(updatedWord);
}
}
this.setState({
currentTyping:updatedWord,
storeValue:updateArr,
pushToNext:false
},() => {
let {storeValue} = this.state
let lastWordIndex = storeValue.length === 0 ? storeValue.length : storeValue.length - 1;
let lastLetterIndex = storeValue[lastWordIndex].length === 0 ? storeValue[lastWordIndex].length : storeValue[lastWordIndex].length - 1;
let lastWordValue = storeValue[lastWordIndex];
let lastLetterValue = lastWordValue[lastLetterIndex];
// console.log(lastWordIndex,lastLetterIndex,lastWordValue,lastLetterValue,"After tstae")
return this.props.compareCurrentTextWithMater(lastWordIndex,lastLetterIndex,lastWordValue,lastLetterValue)
});
}
};
Redux Reducer
import {FETCH_USER_TYPING_TEXT,COMPARE_TEXT_WITH_MASTER} from "../actions/types";
import {fromJS} from 'immutable';
const initialState = fromJS({
text:null,
master:[],
inputBoxStatus:false
});
export default function (state = initialState,action) {
switch (action.type){
case FETCH_USER_TYPING_TEXT:
return setTextManipulated(state,action);
case COMPARE_TEXT_WITH_MASTER:
return compareTextWithMaster(state,action)
default:
return state
}
}
const compareTextWithMaster = (state,action) => {
let {lastWordIndex,lastLetterIndex,lastLetterValue} = action;
let masterWord = state.get('master')[lastWordIndex];
let masterLetter = masterWord.check[lastLetterIndex];
let newState = state.get('master');
if(typeof masterLetter !== "undefined"){
if(masterLetter.letter === lastLetterValue){
masterWord.check[lastLetterIndex].status = true;
newState[lastWordIndex] = masterWord;
return state.set('master',newState)
}else {
masterWord.check[lastLetterIndex].status = false;
newState[lastWordIndex] = masterWord;
return state.set('master',newState)
}
}else {
console.log('Undefinedd Set Eroing or wrong Space Chratced set Box Red Colot',newState);
}
};
UPDATE
I did the same Logic with plain React.js it works Perfectly and nested map rendering the if else logic properly there is no on letter delay
https://codesandbox.io/s/zx3jkxk8o4
But the same logic with Redux State with immutable js Does'nt take effect with nested loop if else statement I don't know where the problem Relies ..and My Code Snippet will be little bit different from CodeSanbox COde But the Logic is Same
Probably, the diffing algorithm of react does see that oldState === newState and skips the re rendering. To avoid that situation, use a new object in the root of the state so that the above check returns false. I see that you use immutableJs, so maybe force re-render with componentShouldUpdate method instead.
Also consider using dev tools to step through the code line by line to see what is going on.
If nothing at all works, switch to something simpler with less dependencies and go from there, incrementally adding what you need.