Pure functions!

PHOTO

Thu Jun 24 2021 16:18:30 GMT+0000 (UTC)

Saved by @hisam #array #destructuring #javasc #react.js

//What are pure functions?
//Pure functions take an input value (a parameter or argument) and produce an output value. //Like with hashing, the same input it will always return the same output 

const myPureFunction = number => return number * 4

//Pure functions must:
//1. Contain no side effects
//2. When given the same input, return the same output.
// A pure component avoids any use of state.
map
filter
reduce

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

react

@hisam

Add random element to array : React Pure functions! Fetch data Component React Filter, then map an array : React Filter an Array of Objects by Value: React Simple React Toggle Component with Styling setState Callback in Class Componenet setState Callback in a Functional Component React State with Hooks Demo Toggle State with Hooks React Context API Good REact Tutorials Changing the Background Color in React Set multiple counters : React Add props to Styled Component

#react.js #redux

Check if token expires and logout user

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

props.children - text between component's opening and closing tag

<Welcome>Hello world!</Welcome>



function Welcome(props) {
  return <p>{props.children}</p>;
}

#python #javascript #array #list #forloop #iteration

JavaScript

for (let i=0; i < arrayName.length; i++){
  console.log(arrayName[i])
}

i.e.):

movies = ['legally blonde', 'Ms. & Ms. Smith', 'The Incredibles'];

for (let i=0; i < movies.length; i++){
  console.log(movies[i])
}

Python

for singular_array_name in array_name_pluralized:
	print(singular_array_name)

i.e.):

movies = ['legally blonde', 'Ms. & Ms. Smith', 'The Incredibles']

for movie in movies:
	print(movie)

#swift #filter #array #ios

filter an array in Swift

To Filter Model Array:

var filteredItems = unfilteredItems.filter { $0.cat == "garden" }

To Filter an Array:

let result = arr.filter {$0.contains("ali")}

In normal JS
events are calling from child -> parent -> parent -> ... -> body

In react, if there are any manual event wired then those will be called first then the events added via react in child => parent manner

Configure useEffect

1) using [],  Only once when component is intially rendered
useEffect(() => {
  console.log('inside use effect')
}, [])

2) nothing, run at initial render and at every single re-render
useEffect(() => {
  console.log('inside use effect')
})

2)[selectedItem], everytime whenever the state of selectedItem changes
useEffect(() => {
  console.log('inside use effect')
}, [selectedItem])

3) [selectedItem > 2], everytime the condition matches
useEffect(() => {
  console.log('inside use effect')
}, [selectedItem > 2])

Типизация пропсов в стильных компонентах

border: ${(props: { error: boolean }) => (props.error ? '1px solid #F20D19' : '1px solid transparent')};

export const Img = styled.img<{ alt: string, src: string}>`
  margin-right: 15px;
`;

#react.js #sorting

Creating Sortable Tables With React — Smashing Magazine

const useSortableData = (items, config = null) => {
  const [sortConfig, setSortConfig] = React.useState(config);
  
  const sortedItems = React.useMemo(() => {
    let sortableItems = [...items];
    if (sortConfig !== null) {
      sortableItems.sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
          return sortConfig.direction === 'ascending' ? -1 : 1;
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
          return sortConfig.direction === 'ascending' ? 1 : -1;
        }
        return 0;
      });
    }
    return sortableItems;
  }, [items, sortConfig]);

  const requestSort = key => {
    let direction = 'ascending';
    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {
      direction = 'descending';
    }
    setSortConfig({ key, direction });
  }

  return { items: sortedItems, requestSort };
}

#javascript #array

Remove specific item in array

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

Open new window onclick reactJS

onClick={() => window.open(url, "_blank")}

gitignore react

### react ###
.DS_*
*.log
logs
**/*.backup.*
**/*.back.*

node_modules
bower_components

*.sublime*

psd
thumb
sketch

analytics helper full

const analyticsItemsHelper = (offer) => {
    if (offer.name.includes('Web Coins')) {
      offer.bonusItems.forEach((el) => {
        Titan.SendEvent({
          name: 'sys.game_transaction',
          parameters: {
            trans_type: 'reward_web_portal',
            trans_desc: 'redeem_promo_code',
            tournament_id: '',
            item_id: el.itemId,
            item_name: el.itemName,
            context: offer.id,
            quantity: +el.itemQuantity,
            transaction_id: +transactionIdAnalytics,
            stage_id: '',
            gacha_pack: '',
            gacha_pack_name: '',
            battle_id: '',
            season_id: '',
            item_balance: +currentUser.webCoin,
            tickets: '',
            skin: '',
            is_sgss: '',
            is_female_ss: '',
            item_ev: '',
            reference_id: 'special_offers',
            discount_info: JSON.stringify({
              promo_id: promotionId,
              promo_code: input,
            }),
            alliance_id: currentUser?.factionId || '',
            alliance_name: currentUser?.factionName || '',
            league_level: currentUser?.leagueId || '',
            player_level: currentUser?.playerId || '',
            player_name: currentUser?.nickname || '',
          },
        });
      });
      rubyIsActive &&
        Titan.SendEvent({
          name: 'sys.game_transaction',
          parameters: {
            trans_type: 'reward_web_portal',
            trans_desc: 'redeem_promo_code',
            tournament_id: '',
            item_id: 'web_currency_ruby',
            item_name: 'Ruby',
            context: offer.id,
            quantity: currencyQuantity('Ruby', offer),
            transaction_id: +transactionIdAnalytics,
            stage_id: '',
            gacha_pack: '',
            gacha_pack_name: '',
            battle_id: '',
            season_id: '',
            item_balance: +currentUser.ruby,
            tickets: '',
            skin: '',
            is_sgss: '',
            is_female_ss: '',
            item_ev: '',
            reference_id: 'special_offers',
            discount_info: JSON.stringify({
              promo_id: promotionId,
              promo_code: input,
            }),
            alliance_id: currentUser?.factionId || '',
            alliance_name: currentUser?.factionName || '',
            league_level: currentUser?.leagueId || '',
            player_level: currentUser?.playerId || '',
            player_name: currentUser?.nickname || '',
          },
        });
    } else if (offer.name.includes('Rubies')) {
      offer.bonusItems.forEach((el) => {
        Titan.SendEvent({
          name: 'sys.game_transaction',
          parameters: {
            trans_type: 'reward_web_portal',
            trans_desc: 'redeem_promo_code',
            tournament_id: '',
            item_id: el.itemId,
            item_name: el.itemName,
            context: offer.id,
            quantity: +el.itemQuantity,
            transaction_id: +transactionIdAnalytics,
            stage_id: '',
            gacha_pack: '',
            gacha_pack_name: '',
            battle_id: '',
            season_id: '',
            item_balance: +currentUser.ruby + el.itemQuantity,
            tickets: '',
            skin: '',
            is_sgss: '',
            is_female_ss: '',
            item_ev: '',
            reference_id: 'special_offers',
            discount_info: JSON.stringify({
              promo_id: promotionId,
              promo_code: input,
            }),
            alliance_id: currentUser?.factionId || '',
            alliance_name: currentUser?.factionName || '',
            league_level: currentUser?.leagueId || '',
            player_level: currentUser?.playerId || '',
            player_name: currentUser?.nickname || '',
          },
        });
      });
      Titan.SendEvent({
        name: 'sys.game_transaction',
        parameters: {
          trans_type: 'reward_web_portal',
          trans_desc: 'redeem_promo_code',
          tournament_id: '',
          item_id: 'web_currency_web_coin',
          item_name: 'Web Coin',
          context: offer.id,
          quantity: currencyQuantity('Web Coin', offer),
          transaction_id: +transactionIdAnalytics,
          stage_id: '',
          gacha_pack: '',
          gacha_pack_name: '',
          battle_id: '',
          season_id: '',
          item_balance: +currentUser.webCoin,
          tickets: '',
          skin: '',
          is_sgss: '',
          is_female_ss: '',
          item_ev: '',
          reference_id: 'special_offers',
          discount_info: JSON.stringify({
            promo_id: promotionId,
            promo_code: input,
          }),
          alliance_id: currentUser?.factionId || '',
          alliance_name: currentUser?.factionName || '',
          league_level: currentUser?.leagueId || '',
          player_level: currentUser?.playerId || '',
          player_name: currentUser?.nickname || '',
        },
      });
    } else {
      offer.bonusItems.forEach((el) => {
        console.log(activeCurrencies, 'activeCurrencies');
        console.log(currentUser, 'currentUser');
        console.log(offer, 'offer');
        console.log(el.itemName, 'itemNameitemNameItemNameitemNameitemName')
        Titan.SendEvent({
          name: 'sys.game_transaction',
          parameters: {
            trans_type: 'reward_web_portal',
            trans_desc: 'redeem_promo_code',
            tournament_id: '',
            item_id: el.itemId,
            item_name: el.itemName,
            context: offer.id,
            quantity: +el.itemQuantity,
            transaction_id: +transactionIdAnalytics,
            stage_id: '',
            gacha_pack: '',
            gacha_pack_name: '',
            battle_id: '',
            season_id: '',
            item_balance: '',
            tickets: '',
            skin: '',
            is_sgss: '',
            is_female_ss: '',
            item_ev: '',
            reference_id: 'special_offers',
            discount_info: JSON.stringify({
              promo_id: promotionId,
              promo_code: input,
            }),
            alliance_id: currentUser?.factionId || '',
            alliance_name: currentUser?.factionName || '',
            league_level: currentUser?.leagueId || '',
            player_level: currentUser?.playerId || '',
            player_name: currentUser?.nickname || '',
          },
        });
      });
      Titan.SendEvent({
        name: 'sys.game_transaction',
        parameters: {
          trans_type: 'reward_web_portal',
          trans_desc: 'redeem_promo_code',
          tournament_id: '',
          item_id: 'web_currency_web_coin',
          item_name: 'Web Coin',
          context: offer.id,
          quantity: currencyQuantity('Web Coin', offer),
          transaction_id: +transactionIdAnalytics,
          stage_id: '',
          gacha_pack: '',
          gacha_pack_name: '',
          battle_id: '',
          season_id: '',
          item_balance: +currentUser.webCoin,
          tickets: '',
          skin: '',
          is_sgss: '',
          is_female_ss: '',
          item_ev: '',
          reference_id: 'special_offers',
          discount_info: JSON.stringify({
            promo_id: promotionId,
            promo_code: input,
          }),
          alliance_id: currentUser?.factionId || '',
          alliance_name: currentUser?.factionName || '',
          league_level: currentUser?.leagueId || '',
          player_level: currentUser?.playerId || '',
          player_name: currentUser?.nickname || '',
        },
      });
      rubyIsActive &&
        Titan.SendEvent({
          name: 'sys.game_transaction',
          parameters: {
            trans_type: 'reward_web_portal',
            trans_desc: 'redeem_promo_code',
            tournament_id: '',
            item_id: 'web_currency_ruby',
            item_name: 'Ruby',
            context: offer.id,
            quantity: currencyQuantity('Ruby', offer),
            transaction_id: +transactionIdAnalytics,
            stage_id: '',
            gacha_pack: '',
            gacha_pack_name: '',
            battle_id: '',
            season_id: '',
            item_balance: +currentUser.ruby,
            tickets: '',
            skin: '',
            is_sgss: '',
            is_female_ss: '',
            item_ev: '',
            reference_id: 'special_offers',
            discount_info: JSON.stringify({
              promo_id: promotionId,
              promo_code: input,
            }),
            alliance_id: currentUser?.factionId || '',
            alliance_name: currentUser?.factionName || '',
            league_level: currentUser?.leagueId || '',
            player_level: currentUser?.playerId || '',
            player_name: currentUser?.nickname || '',
          },
        });
    }
  };

Logs out a user when access token expires

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object
 
const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }
 
    useEffect(()=>{
        const token = user?.token;
 
        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

#javascript #react.js

Manipulate data in an array / manipulate arrays

const array = [1, 2, 3, 4]

//remove the first element of the array
array.shift()

//add an element to the beginning of the array
array.unshift()

//remove the last element in an array
array.pop()

//add an element to the end of the array
array.push()

#javascript #react.js

navigator - get current location / position

navigator.geolocation.getCurrentPosition(showPosition);

Browse more snippets >>