Git Flow - Git flow to organize their Git branches

Git flow is a Git branching strategy .

Git flow  is not a tool or software that can be downloaded. Developers can use Git flow to organize their Git branches and development process to ship releases more efficiently. 

Best practices for Source code management (SCM) 

Other 

GitHub Flow:

===========

More simple than Git flow, GitHub flow is great for smaller teams and web applications or products that don’t require supporting multiple versions. Because of its simplicity, the GitHub flow workflow allows for continuous delivery and continuous integration.

Of course, there are also related risks to consider. The lack of dedicated development branches, for example, makes this workflow more susceptible to bugs in production.

GitLab Flow:

===========

Also more simple than Git flow, GitLab flow is more organized and structured when compared to the GitHub flow workflow.

GitLab flow introduces environment branches, such as production and pre-production, or release branches, depending on your situation.

With slight modifications, GitLab flow can allow for versioned releases and continuous delivery.

React - custom -memo - cache api response

 import React, { useState, useEffect } from "react";

import axios from "axios";

import "./styles.css";

const memo = callback => {

  const cache = new Map();

  return (...args) => {

    const selector = JSON.stringify(args);

    if (cache.has(selector)) return cache.get(selector);

    const value = callback(...args);

    cache.set(selector, value);

    return value;

  };

};

const memoizedAxiosGet = memo(axios.get);

const SelectPokemonButton = ({ name, onClick }) => (

  <button onClick={() => onClick(name)}>{name}</button>

);

export default function App() {

  const [pokemon, setPokemon] = useState("");

  const [pokemonData, setPokemonData] = useState({});

  useEffect(() => {

    if (pokemon) {

      memoizedAxiosGet(`https://pokeapi.co/api/v2/pokemon/${pokemon}/`)

        .then(response => {

          setPokemonData(response);

        })

        .catch(error => {

          console.error("Error retrieving pokemon with name ", pokemon);

        });

    }

  }, [pokemon]);

  const onClickPokemon = name => {

    setPokemon(name);

  };

  return (

    <div className="App">

      <h1>Memoization request Demo</h1>

      <h3>Before clicking the buttons, open the devtools.</h3>

      <h3>

        Check that, wih every click on different pokemon, the network request is

        done

      </h3>

      <h3>

        But, if the pokemon is clicked for second time, the request wont be done

      </h3>

      <div />

      <SelectPokemonButton name="ditto" onClick={onClickPokemon} />

      <SelectPokemonButton name="pikachu" onClick={onClickPokemon} />

      <SelectPokemonButton name="charizard" onClick={onClickPokemon} />

      <div>Pokemon data:</div>

      <div>{JSON.stringify({ pokemonData })}</div>

    </div>

  );

}

React 2 way data binding with custom Hook

import * as React from 'react';

import { render } from 'react-dom';

// List of supported HTML elements

type ModelElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;

// Custom hook for two-way data binding

// We can provide the initial value and an onChange function

// if we need to do additional things in our component

function useModel<E extends ModelElement>(

  initial: string = null,

  onChange?: React.ChangeEventHandler<E>

) {

  const [value, setValue] = React.useState<string>(initial);

  const handler: React.ChangeEventHandler<E> = (e) => {

    // Store the current value and run the callback function if provided

    setValue(e.currentTarget.value);

    onChange && onChange(e);

  };

  const model = { value, onChange: handler };

  return { model, setModel: setValue };

}

function App() {

  // Use custom hook

  const { model, setModel } = useModel('John', (e) => {

    console.log('Model changed', e.currentTarget.value);

  });

  const reset = () => setModel('');

  return (

    <React.Fragment>

      {/* Spread the model on the input element */}

      <label htmlFor="name">Name: </label>

      <input id="name" {...model} />

      <div>Hello {model.value}</div>

      <button onClick={reset}>Reset</button>

    </React.Fragment>

  );

}

render(<App />, document.getElementById('root'));

file Saver at UI - Angular convert JSON response to excel file to download.

file Saver - UI Angular

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

ng.component.ts

----------------

import * as fileSaver from 'file-saver';

  downloadTestExcelFile() {

    const data = "Excel File column to get Default column name;

    const blob = new Blob([data], {type: 'text/csv'});

    fileSaver.saveAs(blob, "Downloaded_Custom_file_name");

  }

  

  

  

  

  

ng.template.html

------------------

<a href="javascript:void(0)" id="downloadTestExcel_id" (click)="downloadTestExcelFile()" class="link">Click here to download FileSaver    Test File</a>

React Hooks - file-saver at UI -Convert JOSN to excel file format and download

file-saver in React Hooks

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

npm install file-saver

import React from "react";

import FileSaver from "file-saver";

export default function App() {

  function sayHello() {

    var blob = new Blob(["Hello, world!"], {

      type: "text/plain;charset=utf-8"

    });

    FileSaver.saveAs(blob, "hello world.txt");

  }

  

    const downloadTestExcelFile =()=> {

    const data = "Excel File column to get Default column name;

    const blob = new Blob([data], {type: 'text/csv'});

    fileSaver.saveAs(blob, "Downloaded_Custom_file_name");  /// empty excel file

  }

  return (

    <div className="App">

      <button onClick={sayHello}>Click me download txt file!</button>

  

   <button onClick={downloadExcel}>Click me download EXCEL file!</button>

    </div>

  );