Notes

js study material
How to get the count of 'a' from the string
let str = "asdfgaaaafdgsd"
str.split('').sort().lastIndexOf('a')+1;

=>4

numArray.sort((a, b) => a - b); // For ascending sort
numArray.sort((a, b) => b - a); // For descending sort
(< or > not give the expected result at all the time....)

How to get the second Largest number
let a = [2,22,11,33,45,34]
a.sort(function (a,b){
return b-a;
})[1];

=> 34


How to find no of ‘a’ in string
let str = "abbaaccaddc"
str.split('').sort().lastIndexOf('a')+1
How to find second largest no in array
Let  Ar= [1,2,21,22,34,22,45,22,56,34,48,35]  
     Ar.sort(function(a,b){return b-a})[1]



ddiValue=ddiValue[0];

// yourReference = didValue.yourRef
let{yourRef: yourReference, }= didValue;

==========********========
json:
----
const additionalPayload2 = {'payer.payerMobileNo': "3453453", 'settlementMode': "O",'payer.payeremail': "[email protected]", 'set232': "OE",}
const additionalPayloadKey = Object.keys(additionalPayload2)
const additionalPayloadValue = Object.values(additionalPayload2)

=========*****=========
https://engineering.musefind.com/our-best-practices-for-writing-react-components-dec3eb5c3fc8

ssh-rsa 2048 53:3a:a5:eb:4f:e2:bc:7e:3b:ac:db:19:05:fc:ab:12


==================
Following are the links for creating a markdown(md)file.

doc file to md file: https://word-to-markdown.herokuapp.com/
md file editor: http://writeme.mattstow.com/
markdown guide for GitHub: https://guides.github.com/features/mastering-markdown/
markdown guide for bitbucket: https://bitbucket.org/tutorials/markdowndemo
===**********=================
to create a redux store:::


const counter =(state=0,action)=>{
switch(action.type){
case "inc":
return state +1;
case "dec":
return state -1;
default :
return state;
}
}




var creteStore = Redex.createStore;
import {createStore} from 'redex';
const store=createStore(counter)

store.dispatch({type:'change'})
==>it is used to change the state.


store.getState()
===>it is used to get the current state
=====***===========
my sample react call back code:
import ReactDOM from "react-dom";
import React, { Component } from "react";

class App extends React.Component {
constructor() {
super();
this.state = {
count: 0
};
}

add = () => {
this.setState({
count: this.state.count + 1
});
};

sub = () => {
this.setState({
count: this.state.count - 1
});
};

reset = () => {
this.setState({
count: 0
});
};

render() {
return (
<div>
<InputFoo
add={this.add}
sub={this.sub}
reset={this.reset}
countvalue={this.state.count}
/>
<p>Received by parent:{this.state.count}</p>
</div>
);
}
}

class InputFoo extends React.Component {
constructor(props) {
super(props);
console.log("--props-", props);
this.state = {
count: this.props.countvalue
};
}

componentWillReceiveProps(nextProps, nextState) {
console.log("_____", this.props.countvalue, "===", nextProps.countvalue);
this.setState({ count: nextProps.countvalue });
}
shouldComponentUpdate(nextProps, nextState) {
// we are not able to use setstate inside of the shouldComponentUpdate
console.log(this.props.countvalue, nextProps.countvalue);
return this.props.countvalue !== nextProps.countvalue ? true : false;
}
// componentWillUpdate(nextProps) {
// this.setState({ count: nextProps.countvalue });
// }
// componentDidUpdate(nextProps) {
// this.setState({ count: nextProps.countvalue });
// }

render() {
return (
<div>
<button onClick={() => this.props.add()}>+</button>
<button onClick={() => this.props.sub()}>-</button>
<button onClick={() => this.props.reset()}>Reset</button>
<p>Visible in child:{this.state.count}</p>
</div>
);
}
}

ReactDOM.render(<App />, document.getElementById("root"));
=========******===========
splice and scice

slice===>give the remaining & original array is not affected
------------------------------------------------------------

a=[1,3,5,67,8,9,56,43]


==>(8) [1, 3, 5, 67, 8, 9, 56, 43]




j=a.slice(0,4)


(4) [1, 3, 5, 67]



k=a.slice(5)

(3) [9, 56, 43]


c=[...j,...k]

(7) [1, 3, 5, 67, 9, 56, 43]





a

(8) [1, 3, 5, 67, 8, 9, 56, 43]
================================
===================================

a1

==>(7) [1, 3, 5, 67, 9, 56, 43]

======================================

a1==>[1,3,5,67,8,9,56,43]


a1.splice(4,1)


==>[8]

a1
(7) [1, 3, 5, 67, 9, 56, 43]

---------------
------------------
a=[1, 3, 5, 67, 8, 9, 56, 43]

a.splice(4,1)====>
[8]

a.slice(4,1)====>
[]
=========******=============
flex:
~~~
#pond {
display: flex;

flex-direction:row-reverse;justify-content : center;align-items:flex-end

}

(justify-content: center

flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.

align-items: flex-start

flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container

flex-direction : row-reverse
row: Items are placed the same as the text direction.
row-reverse: Items are placed opposite to the text direction.
column: Items are placed top to bottom.
column-reverse: Items are placed bottom to top.


-------
#pond {
display: flex;
}

.yellow {

}
(1,0,-1)
order:1


-------
align-self : flex-end

(align-self also same as align start but it for selected or specfic elements)

----------
#pond {
display: flex;

------------------------
(flex-wrap:wrap;flex-direction:column) combination of this==> flex-flow: flex-flow:column wrap

}


flex-wrap: wrap
nowrap: Every item is fit to a single line.
wrap: Items wrap around to additional lines.
wrap-reverse: Items wrap around to additional lines in reverse.

---------------------
align-content :flex-start

flex-start: Lines are packed at the top of the container.
flex-end: Lines are packed at the bottom of the container.
center: Lines are packed at the vertical center of the container.
space-between: Lines display with equal spacing between them.
space-around: Lines display with equal spacing around them.
stretch: Lines are stretched to fit the container.

align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container.
When there is only one line, align-content has no effect.


24th ans===>flex-flow:wrap column-reverse;
justify-content: center;
flex-wrap:wrap-reverse;

)

https://bitbucket.global.standardchartered.com/projects/S2BV4/repos/s2b-ui-collections/browse
========*********==============*******========
http://sass-lang.com/guide

Variables
---------

// $ symbol to make something a variable.

$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}


Nesting
--------
eg1:
nav
ul
margin: 0
list-style: none
li
display: inline-block

Partials
----------
A partial is simply a Sass file named with a leading underscore.(_partial.scss)
The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.


Import
---------

CSS has an import option==> for each import css have call http request -->(it is avioded in sass)
(Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.)
eg
Let's say you have a couple of Sass files, _reset.scss and base.scss. We want to import _reset.scss into base.scss.

@import reset ====>( When you import a file you don't need to include the file extension )


Mixins
-------