// Source avec un example : 
// https://www.cloudhadoop.com/react-copy-text-clipboard/
<§navigator.clipboard.writeText(val)§>

copy on clipboard

Dans un fichier cli/test.js :
console.log("hello world !")
promp()
console.log("...\n...")

Puis on peux appeler l'execution du programme avec la commande :
node cli/test.js

Créer un programme executable node

const items = [
    {name: 'bike', price: 200},
    {name: 'TV', price: 500},
    ...
]
// Filtrer selon une condition
<§
const filteredItems = items.filter((item) => {
    return item.price <= 100
})
§>

// Parcourir et retourner un tableau spécifique
<§
const mapedItems = items.map((item) => {
    return item.price 
})
§>

// Trouver et retourner un index précis
<§
const foundItem = items.find((item) => {
    return item.name === bike
})
§>

// Parcourir chaque index et y faire ce que l'on veut
<§
items.forEach((item) => {
    console.log(item.price)
})
§>

// Retourner un booleen selon une condition définie
<§
const hasExpensiveItems = items.some((item) => {
    return item.price >= 200
})
§>
//retourne true car la condition est remplie

// Effectuer une opération accumulative
<§
const total = items.reduce((currentTotal, item) => {
    return item.price + currentTotal
}, 0)
§>

// include: retourne un booleen
const items = [1,2,3,4,5,6]
<§
const includesSeven = items.includes(7)
§>



Array methods

https://www.youtube.com/watch?v=5f1M_cu2eDM

https://web.dev/what-are-pwas/
https://web.dev/install-criteria/
https://web.dev/add-manifest/
https://developers.google.com/web/fundamuntals/primers/service-workers/lifecycle

// Lors d'un CRA, le manifest est automatiquement créé. Il suffit de compléter avec peu d'informations pour qu'il soit correctement accepté pour devenir une PWA.

Rendre installable

Mettre un link dans le head du base.html :
<link  rel="manifest" href="/manifest.json" />

Avoir un fichier manifest.json à la base du projet :
{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "540x720"
    }
  ]
}

Créer un service worker à la racine (sw.js) :

const PREFIX = "V1" // Modifier en cas de mise à jour importante du site impactant la PWA. cela détermine quand est ce que l'appli doit se mettre à jour
const CACHED_FILES = [
	"https://cdn.css.boostrap.ou.autre/bootstrap.min.css"
]

self.addEventListener("install", (event) => {
	self.skipWaiting()
	event.waitUntil((async () =>{
		const cache = await caches.open(PREFIX)
		cache.add(new Request ("/offline.html"))
		cache.addAll(CACHED_FILES)
	})())
	console.log(`${PREFIX} Install`)
})
self.addEventListener("activate", (event) => {
	clients.claim()
	event.waitUntil(
		(async() => {
			const keys = await caches.keys()
			await Promise.all(
				keys.map((key) => {
					if(!key.includes(PREFIX)){
						return caches.delete(key)
					}
				})
			)
		})()
	)
	console.log(`${PREFIX} Active`)
})

self.addEventListener("fetch", (event) =>{
	console.log(`fetching : ${event.request.url}, Mode : ${event.request.mode}`)
	if(event.request.mode === 'navigate'){
		event.respondWith(
			async () => {
				try{
					const preloadResponse = await event.preloadResponse
					if(preloadResponse){
						return preloadResponse
					}
					return const networkResponse = await fetch(event.request)
				}catch(e){
					return new Response('test')
				}
		})())
	}
})

Dans l'inspecteur, cliquer sur Application, Service Workers, Skip waiting après avoir chargé la page pour activer le service worker mis en place

Il faudra enregistrer le service worker dans le head du base.html :
<script>
	window.addEventListener('load', () => {
		if ("serviceWorker" in navigator){
			navigator.serviceWorker.register('/sw.js')
		}
	})
</script>


const PREFIX = "V4"

self.skipWaiting()
clients.claim()
event.waitUntil((async () =>{
	const cache = await caches.open(PREFIX)
cache.add (new Request ("/offline.html")
})())






Faire une PWA

Eviter d'utiliser une librairie tel que uuid

JS propose une solution native:
<§crypto.randomUUID§>

// Peut être utilisé depuis un console.log:
<§console.log(crypto.randomUUID)§>

Uuid

fullscreen

(async () => {
  const rawResponse = await fetch('/ajax/request/1', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    data: {
        action: action,
        clip_id: clip_id,
        ad_id: active_ad_id,
    }
  });
  const content = await rawResponse.json();

  console.log(content);
})();

Make AJAX using fetch

function sum(a,b){
    return a + b
}
// same as
let sum = (a,b) => a + b

function isPositive(number){
    return number >= 0
}
// same as
let isPositive = number => number >= 0

function randomNumber(){
    return Math.random
}
// same as
let randomNumber = () => Math.random

document.addEventListener('click', function(){
    console.log('Click')
})
// same as
document.addEventListener('click', () => console.log('click'))

arrow functions

// Let's consider this object
<§
let myArray = [
    {id: 0, name: 'plant', price: 10 },
    {id: 1, name: 'bike', price: 50 },
    {id: 2, name: 'guitar', price: 70 },
    {id: 3, name: 'car', price: 8200 },
    {id: 4, name: 'table', price: 80 },
    {id: 5, name: 't-shirt', price: 15 },
    {id: 6, name: 'can', price: 1 },
    {id: 7, name: 'sushis', price: 45 },
]
§>
// add
<§
const element = {name: 'ps4', price: 400}
let newArray = [element, ...myArray] // Inverser pour ajouter l'élément à la fin du tableau
§>

// delete
<§
newArray = myArray.filter((el) => el.name != 'can')
§>

// modify one specified element
<§
newArray = myArray.map((el) => {
    if(el.name === 'sushis'){
        el.price = 20
    }
    return el
})
§>

// Search
<§
const foundItem = myArray.find((item) => {
    return item.name === 'sushis'
})
§>

// Sort by number
<§
let sortedArray = myArray.sort(function (a, b) {
    return b.price - a.price;
});
§>

// Sort by alphabetical order
<§
sortedArray = myArray.sort(function (a, b) {
    //var nameA = a.name.toUpperCase(); // ignore upper and lowercase
    //var nameB = b.name.toUpperCase(); // ignore upper and lowercase
    if (a.name < b.name) {
      return -1;
    }
    if (a.name > b.name) {
      return 1;
    }
    return 0;
})
§>


Array object CRUD

// Je sais pas trop comment ça marche mais ça fonctionne bien
<§
function splitMulti(str, tokens){
        var tempChar = tokens[0]; // We can use the first token as a temporary join character
        for(var i = 1; i < tokens.length; i++){
            str = str.split(tokens[i]).join(tempChar);
        }
        str = str.split(tempChar);
        return str;
}
§>

// Pour appeler la fonction
<§splitMulti('a=b,c:d', ['=', ',', ':']) // ["a", "b", "c", "d"]§>


Multiple split  with multiple separators

localStorage.set('name', 'Bob')
localStorage.removeItem('name')

sessionStorage.setItem('name', 'John')
sessionStorage.removeItem('name')

document.cookie = 'name=Kyle;expires=' + new date(2020, 0, 1).toUTCString()

Cookies, Session Storage, LocalStore

on considère:
const [clients, setClients] = useState(null)

// Supprimer un index
const updatedclients = [...clients] 
// Equivaut à : clients.slice()
const index = updatedclients.findIndex(client => client.id === id)
updatedclients.splice(index, 1)
setClients(updatedclients)

// Ajouter un index
const updatedClients = [...clients]
updatedClients.push(client)
setClients(updatedclient)


JS array manipulation

let result = await propertyAnalyzer(file)

export default async function propertyAnalyzer(file){
    return new Promise(function(resolve) {
        [...]
        resolve(result)
    })
}

// Idem quand on veut faire des promesses imbriquées
let relationsProperties = await relationsPropertyAnalyzer(file, id)

export default async function relationsPropertyAnalyzer(file, id){
    return new Promise(function(resolveFinal) {
        [...]
        fs.readFile(file, 'utf8',(err, data) => {
            [...]
            let relationResult = []
            let promiseToResolve = []
            array.forEach((res, index)=>{
                let out = new Promise((resolve)=>{
                  propertyAnalyzer(pathFile).then((properties)=>{
                        resolve({relation_entity: res[2], position: res.index, properties })
                    })
                })
                out.then((res)=>{
                    relationResult.push(res)
                })
                promiseToResolve.push(out)
            })
            Promise.all(promiseToResolve).then((values) => {
                resolveFinal(values)
            })
        })
    })

}

JS