Frontend Code Snippets


Auto import React from 'react'
Flatten array inside Array, comparison, forEach, reduce, for loop
Lerna
UW-WORKBENCH - package.json - packages - component - package.json - services - package.json - risk-tools - package.json - workbench - package.json - utility - package.json
Setup Alias with TypeScript
Number Format with Material UI React
Diff checker in words
export default function Diff() {} Diff.prototype = { diff(oldString, newString, options = {}) { let callback = options.callback; if (typeof options === 'function') { callback = options; options = {}; } this.options = options; let self = this; function done(value) { if (callback) { setTimeout(function () { callback(undefined, value); }, 0); return true; } else { return value; } } // Allow subclasses to massage the input prior to running oldString = this.castInput(oldString); newString = this.castInput(newString); oldString = this.removeEmpty(this.tokenize(oldString)); newString = this.removeEmpty(this.tokenize(newString)); let newLen = newString.length, oldLen = oldString.length; let editLength = 1; let maxEditLength = newLen + oldLen; if (options.maxEditLength) { maxEditLength = Math.min(maxEditLength, options.maxEditLength); } let bestPath = [{ newPos: -1, components: [] }]; // Seed editLength = 0, i.e. the content starts with the same values let oldPos = this.extractCommon(bestPath[0], newString, oldString, 0); if (bestPath[0].newPos + 1 >= newLen && oldPos + 1 >= oldLen) { // Identity per the equality and tokenizer return done([{ value: this.join(newString), count: newString.length }]); } // Main worker method. checks all permutations of a given edit length for acceptance. function execEditLength() { for ( let diagonalPath = -1 * editLength; diagonalPath <= editLength; diagonalPath += 2 ) { let basePath; let addPath = bestPath[diagonalPath - 1], removePath = bestPath[diagonalPath + 1], oldPos = (removePath ? removePath.newPos : 0) - diagonalPath; if (addPath) { // No one else is going to attempt to use this value, clear it bestPath[diagonalPath - 1] = undefined; } let canAdd = addPath && addPath.newPos + 1 < newLen, canRemove = removePath && 0 <= oldPos && oldPos < oldLen; if (!canAdd && !canRemove) { // If this path is a terminal then prune bestPath[diagonalPath] = undefined; continue; } // Select the diagonal that we want to branch from. We select the prior // path whose position in the new string is the farthest from the origin // and does not pass the bounds of the diff graph if (!canAdd || (canRemove && addPath.newPos < removePath.newPos)) { basePath = clonePath(removePath); self.pushComponent(basePath.components, undefined, true); } else { basePath = addPath; // No need to clone, we've pulled it from the list basePath.newPos++; self.pushComponent(basePath.components, true, undefined); } oldPos = self.extractCommon(basePath, newString, oldString, diagonalPath); // If we have hit the end of both strings, then we are done if (basePath.newPos + 1 >= newLen && oldPos + 1 >= oldLen) { return done( buildValues( self, basePath.components, newString, oldString, self.useLongestToken ) ); } else { // Otherwise track this path as a potential candidate and continue. bestPath[diagonalPath] = basePath; } } editLength++; } // Performs the length of edit iteration. Is a bit fugly as this has to support the // sync and async mode which is never fun. Loops over execEditLength until a value // is produced, or until the edit length exceeds options.maxEditLength (if given), // in which case it will return undefined. if (callback) { (function exec() { setTimeout(function () { if (editLength > maxEditLength) { return callback(); } if (!execEditLength()) { exec(); } }, 0); })(); } else { while (editLength <= maxEditLength) { let ret = execEditLength(); if (ret) { return ret; } } } }, pushComponent(components, added, removed) { let last = components[components.length - 1]; if (last && last.added === added && last.removed === removed) { // We need to clone here as the component clone operation is just // as shallow array clone components[components.length - 1] = { count: last.count + 1, added: added, removed: removed }; } else { components.push({ count: 1, added: added, removed: removed }); } }, extractCommon(basePath, newString, oldString, diagonalPath) { let newLen = newString.length, oldLen = oldString.length, newPos = basePath.newPos, oldPos = newPos - diagonalPath, commonCount = 0; while ( newPos + 1 < newLen && oldPos + 1 < oldLen && this.equals(newString[newPos + 1], oldString[oldPos + 1]) ) { newPos++; oldPos++; commonCount++; } if (commonCount) { basePath.components.push({ count: commonCount }); } basePath.newPos = newPos; return oldPos; }, equals(left, right) { if (this.options.comparator) { return this.options.comparator(left, right); } else { return ( left === right || (this.options.ignoreCase && left.toLowerCase() === right.toLowerCase()) ); } }, removeEmpty(array) { let ret = []; for (let i = 0; i < array.length; i++) { if (array[i]) { ret.push(array[i]); } } return ret; }, castInput(value) { return value; }, tokenize(value) { return value.split(''); }, join(chars) { return chars.join(''); } }; function buildValues(diff, components, newString, oldString, useLongestToken) { let componentPos = 0, componentLen = components.length, newPos = 0, oldPos = 0; for (; componentPos < componentLen; componentPos++) { let component = components[componentPos]; if (!component.removed) { if (!component.added && useLongestToken) { let value = newString.slice(newPos, newPos + component.count); value = value.map(function (value, i) { let oldValue = oldString[oldPos + i]; return oldValue.length > value.length ? oldValue : value; }); component.value = diff.join(value); } else { component.value = diff.join( newString.slice(newPos, newPos + component.count) ); } newPos += component.count; // Common case if (!component.added) { oldPos += component.count; } } else { component.value = diff.join( oldString.slice(oldPos, oldPos + component.count) ); oldPos += component.count; // Reverse add and remove so removes are output first to match common convention // The diffing algorithm is tied to add then remove output and this is the simplest // route to get the desired output with minimal overhead. if (componentPos && components[componentPos - 1].added) { let tmp = components[componentPos - 1]; components[componentPos - 1] = components[componentPos]; components[componentPos] = tmp; } } } // Special case handle for when one terminal is ignored (i.e. whitespace). // For this case we merge the terminal into the prior string and drop the change. // This is only available for string mode. let lastComponent = components[componentLen - 1]; if ( componentLen > 1 && typeof lastComponent.value === 'string' && (lastComponent.added || lastComponent.removed) && diff.equals('', lastComponent.value) ) { components[componentLen - 2].value += lastComponent.value; components.pop(); } return components; } function clonePath(path) { return { newPos: path.newPos, components: path.components.slice(0) }; } export const characterDiff = new Diff(); export const diffChars = (oldStr, newStr, options) => { return characterDiff.diff(oldStr, newStr, options); }; import { ReactElement } from 'react'; import { diffChars } from './utils'; import { ObjectWithKey } from '@uw/components/app/DataGrid/utils'; const Differ = ({ inputA, inputB }: { inputA: string; inputB: string }): ReactElement => { const diff = diffChars(inputB, inputA); const result = diff.map(function (part: ObjectWithKey, index: string) { const spanStyle = { backgroundColor: part.added ? 'lightgreen' : part.removed ? 'salmon' : 'lightgrey' }; return ( <span key={index} style={spanStyle}> {part.value} </span> ); }); return <span className="diff-result">{result}</span>; }; export default Differ;

Array

Unique values from array of strings
const Arr = [ "DS", "Algo", "OS", "HTML", "DS", "OS", "Java", "HTML", "Algo" ]; const uniqueItems = Array.from(new Set(Arr)) // For array of objects const array = [ { id: 3, name: 'Central Microscopy', fiscalYear: 2018 }, { id: 5, name: 'Crystallography Facility', fiscalYear: 2018 }, { id: 3, name: 'Central Microscopy', fiscalYear: 2017 }, { id: 5, name: 'Crystallography Facility', fiscalYear: 2017 } ]; const result = []; const map = new Map(); for (const item of array) { if(!map.has(item.id)){ map.set(item.id, true); // set any value to Map result.push({ id: item.id, name: item.name }); } } console.log(result)

Table

Make table horizontally scrollable

GIT

Revert previous commit
git reset --soft HEAD~1
Fix character encoding of a file
/* Sometime if a file is encoded using ISO in Git and when you pull into local, the norwegian characters like ø, æ, å will not be supported. Then we use the following command to convert ISO into UTF-8. */ iconv -f iso-8859-1 -t utf-8 <input_file> -o <output_file> /*CHECK FILE ENCODING*/ file -i <filename>

Objects

Check if object is empty
/** * There is one of the fastest way to check if an object is Empty * Check benchmarking here: https://tomekkolasa.com/how-to-check-if-object-is-empty-in-javascript */ export const isObjectEmpty = (myObject = {}): boolean => { for (const prop in myObject) { if (Object.prototype.hasOwnProperty.call(myObject, prop)) { return false; } } return true; };
 
Given a number create a minimal Alphabet letter
const assignLetterLabel = (num: number): string => { let s = '', t; while (num > 0) { t = (num - 1) % 26; s = String.fromCharCode(65 + t) + s; num = ((num - t) / 26) | 0; } return s || ''; };

React-Hooks-Custom

Custom useful-hooks

String

Slugify From String
const slugify = (text) => { return text .toString() // Cast to string (optional) .normalize('NFKD') // The normalize() using NFKD method returns the Unicode Normalization Form of a given string. .toLowerCase() // Convert the string to lowercase letters .trim() // Remove whitespace from both sides of a string (optional) .replace(/\s+/g, '-') // Replace spaces with - .replace(/[^\w\-]+/g, '') // Remove all non-word chars .replace(/\_/g,'-') // Replace _ with - .replace(/\-\-+/g, '-') // Replace multiple - with single - .replace(/\-$/g, ''); // Remove trailing - } https://gist.github.com/codeguy/6684588

Tools