export interface ICallFn {
  resolve: (value: unknown) => void;
  reject: (reason?: unknown) => void;
  fnToCall: (...args: any[]) => Promise<any>;
  args: any[];
}

export default class Semaphore {
  currentRequests: ICallFn[];
  runningRequests: number;
  maxConcurrentRequests: number;
  /**
   * Creates a semaphore that limits the number of concurrent Promises being handled
   * @param {*} maxConcurrentRequests max number of concurrent promises being handled at any time
   */
  constructor(maxConcurrentRequests = 1) {
    this.currentRequests = [];
    this.runningRequests = 0;
    this.maxConcurrentRequests = maxConcurrentRequests;
  }

  /**
   * Returns a Promise that will eventually return the result of the function passed in
   * Use this to limit the number of concurrent function executions
   * @param {*} fnToCall function that has a cap on the number of concurrent executions
   * @param  {...any} args any arguments to be passed to fnToCall
   * @returns Promise that will resolve with the resolved value as if the function passed in was directly called
   */
  callFunction(fnToCall, ...args) {
    return new Promise((resolve, reject) => {
      this.currentRequests.push({
        resolve,
        reject,
        fnToCall,
        args
      });
      this.tryNext();
    });
  }

  tryNext() {
    if (!this.currentRequests.length) {
      return;
    }
    if (this.runningRequests < this.maxConcurrentRequests) {
      const { resolve, reject, fnToCall, args } = this.currentRequests.shift();
      this.runningRequests++;
      fnToCall(...args)
        .then((res) => resolve(res))
        .catch((err) => reject(err))
        .finally(() => {
          this.runningRequests--;
          this.tryNext();
        });
    }
  }
}

import * as borsh from 'borsh';
import * as web3 from "@solana/web3.js";
import * as BufferLayout from "@solana/buffer-layout";
const BN = require("bn.js");
import {Buffer} from "buffer";
/**
 * The public key of the account we are saying hello to
 */
 let greetedPubkey: web3.PublicKey;
 /**
 * The state of a greeting account managed by the hello world program
 */
class GreetingAccount {
    counter = 0;
    constructor(fields: {counter: number} | undefined = undefined) {
      if (fields) {
        this.counter = fields.counter;
      }
    }
  }

const GreetingSchema = new Map([
    [GreetingAccount, {kind: 'struct', fields: [['counter', 'u32']]}],
  ]);

  const GREETING_SIZE = borsh.serialize(
    GreetingSchema,
    new GreetingAccount(),
  ).length;

const connection = new web3.Connection(web3.clusterApiUrl("devnet"));

async function main(){
     const key: Uint8Array = Uint8Array.from([]);
     const data_to_send: Buffer = Buffer.from(
            Uint8Array.of(0, ...new BN(10).toArray("le", 8)
            ));

             const data_b = borsh.serialize(
              GreetingSchema,
              new GreetingAccount(),
              
            )

    const layout = BufferLayout.struct([BufferLayout.u32("counter")])
    let data: Buffer = Buffer.alloc(layout.span);
    layout.encode({counter:3}, data);

    const signer: web3.Keypair = web3.Keypair.fromSecretKey(key);
    let programId: web3.PublicKey = new web3.PublicKey(" ");
    
    const GREETING_SEED = 'hello 42';
//    greetedPubkey = await web3.PublicKey.createWithSeed(
//      signer.publicKey,
//      GREETING_SEED,
//      programId,
//    );
    greetedPubkey = new web3.PublicKey(" ");

    let fees = 0;
    const lamports = await connection.getMinimumBalanceForRentExemption(
        GREETING_SIZE,
    );
//This creteAccount with Seed  only first time    
//    const transaction = new web3.Transaction()

//    .add(
//     web3.SystemProgram.createAccountWithSeed({
//       fromPubkey: signer.publicKey,
//       basePubkey: signer.publicKey,
//       seed: GREETING_SEED,
//       newAccountPubkey: greetedPubkey,
//       lamports,
//       space: GREETING_SIZE,
//       programId,
//     }),
//   );
    let transaction: web3.Transaction = new web3.Transaction();
//programId = greetedPubkey;
    transaction.add(
        new web3.TransactionInstruction({
            keys: [
            {pubkey: greetedPubkey, isSigner: false, isWritable: true}],
            programId,
            data: data
        })
    );
// const transaction = new web3.Transaction().add(
//   new web3.TransactionInstruction({
//       keys: [{
//         "pubkey": signer.publicKey
//         ,
//         "isSigner": true,
//         "isWritable": true
//          }],
//       programId,
//       data
      
      
//   })
// );

    await web3.sendAndConfirmTransaction(connection, transaction, [signer])
        .then((sig)=> {
            console.log("sig: {}", sig);
        });
    reportGreetings();
    }

    async function reportGreetings(): Promise<void> {
        const accountInfo = await connection.getAccountInfo(greetedPubkey);
        if (accountInfo === null) {
          throw 'Error: cannot find the greeted account';
        }
        const greeting = borsh.deserialize(
          GreetingSchema,
          GreetingAccount,
          accountInfo.data,
        );
        console.log(greetedPubkey.toBase58(),
            'has been greeted',
            Number(greeting.counter),
            'time(s)',
        );
    }

    main();

use borsh::{BorshDeserialize, BorshSerialize};
use solana_program::{
    account_info::{next_account_info, AccountInfo},
    entrypoint,
    entrypoint::ProgramResult,
    msg,
    program_error::ProgramError,
    pubkey::Pubkey,
};

/// Define the type of state stored in accounts
#[derive(BorshSerialize, BorshDeserialize, Debug)]
pub struct GreetingAccount {
    pub counter: u32,
}

entrypoint!(process_instruction);

pub fn process_instruction(
    program_id: &Pubkey, // Public key of the account the hello world program was loaded into
    accounts: &[AccountInfo], // The account to say hello to
    _instruction_data: &[u8], // Ignored, all helloworld instructions are hellos
) -> ProgramResult {

    let accounts_iter = &mut accounts.iter();
    let account = next_account_info(accounts_iter)?;
    
    msg!("Start instruction decode");
    let data_received = GreetingAccount::try_from_slice(_instruction_data).map_err(|err| {
      msg!("Receiving counter u32, {:?}", err);
      ProgramError::InvalidInstructionData  
    })?;
    msg!("Greeting passed to program is {:?}", data_received);
    msg!("Count: {}!", data_received.counter);

   // The account must be owned by the program in order to modify its data
    if account.owner != program_id {
        msg!("Wrong permissions. Greeted account does not have the correct program id");
        return Err(ProgramError::IncorrectProgramId);
    }

    let mut greeting_account = GreetingAccount::try_from_slice(&account.data.borrow())?;
    greeting_account.counter += data_received.counter;
    greeting_account.serialize(&mut &mut account.data.borrow_mut()[..])?;

    msg!("Greeted {} time(s)!", greeting_account.counter);

    Ok(())
}

[package]
name = "send_save_serial_data_program"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
    solana-program = "=1.10.2"
    borsh = "0.9.3"
    borsh-derive = "0.9.1"


[lib]
    crate-type = ["cdylib", "lib"]

import * as web3 from "@solana/web3.js";
const BN = require ("bn.js");
const connection = new web3.Connection(web3.clusterApiUrl("devnet"));

async function main() {
    const key: Uint8Array = Uint8Array.from([PRIVATE KEY del que paga]);
    const signer: web3.Keypair = web3.Keypair.fromSecretKey(key);

    let programId: web3.PublicKey = new web3.PublicKey("Tu ProgramId");
    const data: Buffer = Buffer.from(
        Uint8Array.of(0, ...new BN(VALOR ENTERO DE 8 BITS).toArray("le",8))
    );

    let transaction: web3.Transaction = new web3.Transaction();
    transaction.add(
        new web3.TransactionInstruction({
            keys: [],
            programId,
            data
        })
    );
    await web3.sendAndConfirmTransaction(
        connection, transaction, [signer])
        .then((sig) => {
            console.log("signature:{}",sig);
        });
}

main()

import * as web3 from "@solana/web3.js";

const connection = new web3.Connection(web3.clusterApiUrl("devnet"));

async function main(){
    const key: Uint8Array = Uint8Array.from([PRIVATE KEY del que paga]);
    const signer = web3.Keypair.fromSecretKey(key);
    let programId: web3.PublicKey = new web3.PublicKey("Tu ProgramId");

    let transaction = new web3.Transaction();

    transaction.add (
        new web3.TransactionInstruction({
            keys: [],
            programId,
            data: Buffer.alloc(0)
        })
    )

    await web3
        .sendAndConfirmTransaction(connection, transaction, [signer])
        .then((sig)=> {
            console.log("sig: {}", sig);
        });

}

main();

  static userTimezoneToSpecifiedTimeZone(date: Date, time: string, timeZone: string): Date {
    // Major timeZone's for Australia and their offset values in hours
    // NOTE Darwin etc -> I'm not sure 9.5 or 10.5 will work
    const DST_OFFSETS = {
      'Australia/Sydney': [11, 10],
      'Australia/Brisbane': [11, 10],
      'Australia/Melbourne': [11, 10],
      'Australia/Canberra': [11, 10],
      'Australia/Darwin': [10.5, 9.5],
      'Australia/Adelaide': [10.5, 9.5],
      'Australia/BrokenHill': [10.5, 9.5],
      'Australia/Perth': [9, 8]
    };

    // Calculate the offset depending on if the date is in is DST or not
    const [dstStartOffset, dstEndOffset] = DST_OFFSETS[timeZone];
    const daylightSavingOffset = this.isDaylightSavingTime(date, timeZone) ? dstStartOffset : dstEndOffset;

    const hoursAndMinutes = time.split(':');

    // Collect raw values to create date object
    let year = date.getFullYear();
    let month = date.getMonth();
    let day = date.getDate();
    let hours = Number(hoursAndMinutes[0]);
    const minutes = Number(hoursAndMinutes[1]);

    // We then convert these values to the timezone's UTC by adding the offset
    // i.e. Sydney is 10/11 hours ahead of GMT, so we need to minus 10/11 hours to get GMT.
    // allow for the GMT being the day, month and year before when subtracting the offset.
    if ((hours - daylightSavingOffset) < 0) {
      hours = 24 + (hours - daylightSavingOffset);
      day--;
      if ((month - 1) < 0) {
        year  = year--;
        month = 11;
      }
    } else {
      hours = hours - daylightSavingOffset;
    }
    
    // Create the date object using the UTC value we created above.
    const returnDate = new Date(Date.UTC(year, month, day, hours, minutes, 0));

    // console.log(`${timeZone} Timezone from FormHelper-> ` + returnDate.toLocaleString(undefined, {timeZone: timeZone}))

    return returnDate;
    
   }

   static isDaylightSavingTime(date: Date, timeZone: string): boolean {
    // Get the time zone offset for the specified date
    const offset = new Date(date.toLocaleString('en-US', { timeZone })).getTimezoneOffset();
  
    // Calculate the daylight saving time start and end dates for the current year
    const year = date.getFullYear();
    const dstStart = new Date(Date.UTC(year, 9, 1, 16)).toLocaleString('en-US', { timeZone });
    const dstEnd = new Date(Date.UTC(year, 3, 1, 16)).toLocaleString('en-US', { timeZone });
  
    // Determine if the specified date falls within the daylight saving time period
    return offset < new Date(dstEnd).getTimezoneOffset() && offset >= new Date(dstStart).getTimezoneOffset();
  }
  

export abstract class DumbComponent {

   private readonly subClassConstructor: Function;

   protected constructor() {
      this.subClassConstructor = this.constructor;

      if (this.isEmptyConstructor() || arguments.length !== 0) {
         this.throwError('it should not inject services');
      }
   }

   private isEmptyConstructor(): boolean {
      return this.subClassConstructor.toString().split('(')[1][0] !== ')';
   }

   private throwError(reason: string): void {
      throw new Error(`Component "${this.subClassConstructor.name}" is a DumbComponent, ${reason}.`);
   }
}

import { PrismaClient } from "@prisma/client";

declare global {
  namespace NodeJS {
    interface Global {}
  }
}
// add prisma to the NodeJS global type
interface CustomNodeJsGlobal extends NodeJS.Global {
  prisma: PrismaClient;
}

// Prevent multiple instances of Prisma Client in development
declare const global: CustomNodeJsGlobal;

const prisma = global.prisma || new PrismaClient();

if (process.env.NODE_ENV === "development") global.prisma = prisma;

export default prisma;

npm install typescript --save-dev
npm install @types/node --save-dev
npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs

import { Predicate } from '@nolawnchairs/utils'

export namespace Arrays {

  /**
   * Partitions an array into multiple arrays. A single provided predicate
   * will yield two partitions, where the first (0th) array contains items where
   * the predicate returned true, the second with the items where the predicate
   * returned false. If multiple predicates are provided, each nth partition
   * returned will contain a partition of the array whereby the nth
   * predicate returned true
   *
   * @export
   * @template T
   * @param {T[]} array
   * @param {Predicate<T>[]} predicates
   * @return {*}  {T[][]}
   */
  export function partition<T>(array: T[], ...predicates: Predicate<T>[]): T[][] {
    if (predicates.length === 1)
      return array.reduce((acc, item) => predicates[0](item)
        ? (acc[0].push(item), acc)
        : (acc[1].push(item), acc), [[], []])
    return predicates.reduce((acc, partitioner) => {
      return [...acc, array.filter(partitioner)]
    }, [])
  }
}

 const tabsInAssets = ['Coupe', 'Graph']
 const [tabSelectedIndex, setTabSelectedIndex] = useState<number>(0)

    
// html:    
      { tabsInAssets.map((elem, index) =>
                                    <button key={index} 
                                    className={tabSelectedIndex === index ?
                                        'bg-gray-400 mr-2 w-12 rounded font-Inter font-medium': 
                                        'bg-gray-200 mr-2 w-12 rounded font-Inter font-medium'} 
                                        onClick={() => {setTabSelectedIndex(index) }}>{elem}</button>
                                )}
                                

import { NextApiRequest, NextApiResponse } from "next";
import { Configuration, OpenAIApi } from "openai";
import Message from "./models/messages";

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

function generatePrompt(message: string) {
  return `The following is a conversation with an AI assistant. The assistant is helpful, creative, clever, loving, intelligent and very friendly.
    
  
  Human: ${message} 
  AI: ` ;
}

const response = async (req: NextApiRequest, res: NextApiResponse) => {
  try {

    const completion = await openai.createCompletion({
      model: "text-davinci-002",
      prompt: generatePrompt(req.body.messageBody),
      temperature: 0.9,
      max_tokens: 150,
      top_p: 1,
      frequency_penalty: 0.0,
      presence_penalty: 0.6,
      stop: [" Human:", " AI:"],
    });
const result= completion.data.choices[0].text 



    const message = await Message.create({ messageBody: result, label: "AI"});
    res.status(200).json(message);
    res.end()
  } catch (error) {
    res.json(error);
  }
};
export default response;

import { NextApiRequest, NextApiResponse } from "next";
import Message from "../models/messages";


}
export const config = {
  api: {
      externalResolver: true
  }
}

export const createMessage = async (
  req: NextApiRequest,
  res: NextApiResponse
) => {

  const { messageBody } = req.body;
  try {


    const message = await Message.create({ messageBody, label: "Human" });
    res.status(200).json(message);
    res.end()
  } catch (error) {
    res.status(500).json(error);
  }
};


export const getMessages=async(  req: NextApiRequest,
    res: NextApiResponse)=>{
   
try {

    const messages= await Message.find({})
    res.status(200).json(messages);
    res.end()
} catch (error) {
    res.json(error)
}
}

import { NextApiRequest, NextApiResponse } from "next";
import dbConnect from "../config/dbConfig";
import { createMessage, getMessages } from "../controllers/messages";

export default async function hundler(req: NextApiRequest, res: NextApiResponse) {
const {method}=req
switch (method) {
    case "GET":
        await dbConnect()
        getMessages(req, res)
        break;
    case "POST": 
    await dbConnect()
    createMessage(req, res)
    break;
}

}

import { Model, model, models, Schema, Types } from "mongoose";

export interface MessageType {
    messageBody: string,
    creator: Types.ObjectId
    id: string
    _id: Types.ObjectId
  label: "AI" | "Human"
}
const messageSchema= new Schema({
    messageBody: String,
    creator: {
        type: Types.ObjectId,
        ref: "User"
    },
  label: String

    },
    {
        timestamps: true,
        toJSON: {
            virtuals: true,
        },
        toObject: {
            virtuals: true,
        },
    }
    
)
const Message= (models.Message || model("Message", messageSchema)) as Model<MessageType>;
export default Message;

import mongoose from "mongoose";

const dbConnect = async () => {
    try {
        await mongoose.connect(process.env.MONGO_URL!);
        console.log("DB successfully connected");
    } catch (error) {
        console.log(error);
    }
};

export default dbConnect;

import { NextApiRequest, NextApiResponse } from "next";
import { Configuration, OpenAIApi } from "openai";


const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

function generatePrompt(message: string) {
  return `The following is a conversation with an AI assistant. The assistant is helpful, creative, clever, and very friendly.
  
  Human: Hello, who are you? 
  AI: I'm good, thank you. How are you and how may  I help you today? 
    
  
  Human: ${message} 
  AI: ` ;
}

const response = async (req: NextApiRequest, res: NextApiResponse) => {
  try {

    const completion = await openai.createCompletion({
      model: "text-davinci-002",
      prompt: generatePrompt(req.body.messageBody),
      temperature: 0.9,
      max_tokens: 150,
      top_p: 1,
      frequency_penalty: 0.0,
      presence_penalty: 0.6,
      stop: [" Human:", " AI:"],
    });
const result= completion.data.choices[0].text 


    res.status(200).json(result);
    res.end()
  } catch (error) {
    res.json(error);
  }
};
export default response;

import { CropperObj, IImageCropperResult } from '@eduswiper/types';
import { expose } from 'threads/worker';

expose(function onExportCanvas(
	cropperObj: CropperObj
): Promise<IImageCropperResult> {
	return new Promise((resolve) => {
		const imageData = cropperObj.cropper.getImageData();
		const canvasData = cropperObj.cropper.getCanvasData();
		const canvas = cropperObj.cropper.getCroppedCanvas();
		const editedURL = canvas.toDataURL();

		resolve({ canvasData, imageData, editedURL });
	});
});

import { Injectable } from '@angular/core';
import { CropperObj, IDataToCrop, IImageCropperResult } from '@eduswiper/types';
import { spawn } from 'threads';
import { CardCollectionService } from 'libs/card-collection/src/lib/card-collection.service';
import { CropperService } from 'libs/cropper/src/lib/cropper/cropper.service';
import { BehaviorSubject } from 'rxjs';

@Injectable({
	providedIn: 'root',
})
export class CropAllService {
	croppersArray: { cropper: Cropper; id: string }[] = [];
	cropperArray = new BehaviorSubject<{ cropper: Cropper; id: string }[]>(
		this.croppersArray
	);
	cropperArray$ = this.cropperArray.asObservable();

	constructor(
		private cardCollectionService: CardCollectionService,
		private cropperService: CropperService
	) {}

	addCropperToArray(cropperObj: CropperObj) {
		this.croppersArray.push(cropperObj);
		this.cropperArray.next(this.croppersArray);
	}
	removeCropperFromArray(cardId: string) {
		this.croppersArray.forEach((cropperObj) => {
			if (cardId === cropperObj.id) {
				const index = this.croppersArray.indexOf(cropperObj);
				this.croppersArray.splice(index, 1);
				this.cropperArray.next(this.croppersArray);
			}
		});
	}

	async cropToCenter(cropperObj: CropperObj) {
		const imageData = cropperObj.cropper.getImageData();
		const containerData = cropperObj.cropper.getContainerData();
		cropperObj.cropper.reset();

		let ratio: number;

		if (imageData.naturalHeight > imageData.naturalWidth) {
			ratio = containerData.height / imageData.naturalWidth;
		} else {
			ratio = containerData.width / imageData.naturalHeight;
		}
		cropperObj.cropper.zoomTo(ratio);
		type IOnExportCanvas = (
			cropperObj: CropperObj
		) => Promise<IImageCropperResult>;
		const onExportCanvas = await spawn<IOnExportCanvas>(
			new Worker(new URL('on-export-canvas.ts', import.meta.url), {
				type: 'module',
			})
		);
		const data = await onExportCanvas(cropperObj);
		data.editedURL &&
			this.cardCollectionService.changeEditedPhoto(
				cropperObj.id,
				data.editedURL
			);
		this.changeImagesAfterCrop(data, cropperObj.id);
	}
	async cropToFit(cropperObj: CropperObj) {
		cropperObj.cropper.reset();

		type IOnExportCanvas = (
			cropperObj: CropperObj
		) => Promise<IImageCropperResult>;
		const onExportCanvas = await spawn<IOnExportCanvas>(
			new Worker(new URL('on-export-canvas.ts', import.meta.url), {
				type: 'module',
			})
		);
		const data = await onExportCanvas(cropperObj);

		data.editedURL &&
			this.cardCollectionService.changeEditedPhoto(
				cropperObj.id,
				data.editedURL
			);
		this.changeImagesAfterCrop(data, cropperObj.id);
	}

	cropToCenterAll() {
		this.croppersArray.forEach((cropperObj) => {
			this.cropToCenter(cropperObj);
		});
	}

	cropToFitAll() {
		this.croppersArray.forEach((cropperObj) => {
			this.cropToFit(cropperObj);
		});
	}
	initialCrop(cropper: Cropper, id: string) {
		const croppedCard = this.cardCollectionService.currWorkspace.cards.find(
			(card) => card.id === id && card.freshInstance
		);
		if (croppedCard) {
			croppedCard.freshInstance = false;
			this.cropToCenter({ cropper, id });
			this.cardCollectionService.updateCards();
		}
	}

	changeImagesAfterCrop(croppData: IImageCropperResult, id: string) {
		const changeData: IDataToCrop = {
			canvasTop: croppData.canvasData.top,
			canvasLeft: croppData.canvasData.left,
			canvasWidth: croppData.canvasData.width,
			canvasHeight: croppData.canvasData.height,
			imageWidth: croppData.imageData.width,
			imageHeight: croppData.imageData.height,
			imageLeft: croppData.imageData.left,
			imageTop: croppData.imageData.top,
			imageRotate: croppData.imageData.rotate,
		};
		this.cardCollectionService.changePositionImg(changeData, id);
	}
}

ts-node-esm my_server.ts

{
  "compilerOptions": {
    "esModuleInterop": true,
  }
}

import {createContext, useContext} from 'react';

export type AuthContext = {
  isAuth: boolean
  setIsAuth: (b: boolean) => void
}

export const AuthContext = createContext<AuthContext>({
  isAuth: false,
  setIsAuth: () => undefined
})

export const useAuthContext = () => useContext(AuthContext)

// usage
const {isAuth, setIsAuth} = useAuthContext()

function App() {
  const [isAuth, setIsAuth] = useState(false)

  return (
    <div className="App">
      <AuthContext.Provider value={{isAuth, setIsAuth}}>
        <Header/>
      </AuthContext.Provider>
    </div>
  );
}

{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types",
      "src/typings"
    ]
  }
}

//ENUM

enum userProfile {
  firstName = "Cheng",
  lastName = "Phansivang",
  bio = "I love virak pech my baby",
  }


const { firstName, lastName, bio} = userProfile;


//INTERFACE

interface profile{

  userName:string,
  password:number,
}


const proFile: profile = {
  userName:"Phansivang",
  password:2222,
  
}

// UNION TYPE
function texing(userName:string|number){
  console.log(userName);
}


// FUNCTION WITH VOID // VOID CAN'T RETURN THE VALUE

function userName():void{
  console.log("Phansivang");
}
userName()


// OPTIONAL PARAMETERS

function myNumber(x:number, y:number, o?:number){
  console.log(x + y + (o || 0))
}

myNumber(2,3)



// CASTING AS

const lengleng = "5454545";

console.log(typeof (lengleng as string).length)

import { useState, useEffect } from "react";

const SECOND = 1_000;
const MINUTE = SECOND * 60;
const HOUR = MINUTE * 60;
const DAY = HOUR * 24;

export default function useTimer(deadline, interval = SECOND) {
  const [timespan, setTimespan] = useState(new Date(deadline) - Date.now());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTimespan((_timespan) => _timespan - interval);
    }, interval);

    return () => {
      clearInterval(intervalId);
    };
  }, [interval]);

  /* If the initial deadline value changes */
  useEffect(() => {
    setTimespan(new Date(deadline) - Date.now());
  }, [deadline]);
  
  function checkTime(i: string | number) {
    if (i < 10) i = "0" + i
    return i;
  }

// if want 0 before number return {
  //days: checkTime( Math.floor(timespan / DAY)),
// }

  return {
    days: Math.floor(timespan / DAY),
    hours: Math.floor((timespan / HOUR) % 24),
    minutes: Math.floor((timespan / MINUTE) % 60),
    seconds: Math.floor((timespan / SECOND) % 60)
  };
}

// usage
const { days, hours, minutes, seconds } = useTimer("2022-12-31T23:59:59");

(new Date(+timeStampinSeconds * 1000).toISOString()).slice(0, 19))

const array = [item1, item2, item3]

//Idę pętlą po tablicy. Jeśli chcę, żeby kod wykonał się dla szczególnej sytuacji w item1, ale jeśli nie to dla CAŁEJ tablicy

if(item1){
  //kod, gdy item
}
//kod dla całej tablicy

//jeśli chcę wykonać kod dla warunku dla item1, a inny kod dla reszty tablicy

if(item1){
  //kod, gdy item1
}
else {
  //kod który wykona się dla reszty tablicy w pętli
}

type Numbers = [number, number];
type Strings = [string, string];
 
type NumbersAndStrings = [...Numbers, ...Strings]; 
// [number, number, string, string]

type NumberAndRest = [number, ...string[]];
// [number, varying number of string] 

type RestAndBoolean = [...any[], boolean]; 
// [varying number of any, boolean]

"eslint-config-custom": "*",
    "prettier": "latest",
    "turbo": "latest",
    "@babel/cli": "^7.18.9",
    "@babel/core": "^7.18.9",
    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
    "@babel/plugin-transform-runtime": "^7.18.9",
    "@babel/preset-typescript": "^7.18.6",
    "babel-plugin-named-exports-order": "^0.0.2",
    "babel-plugin-transform-scss": "^1.1.0",
    "sass": "^1.53.0"
  },

{
  "sourceType": "unambiguous",
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead"
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    "babel-plugin-transform-scss",
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "version": "7.0.0-beta.0"
      }
    ],
    "@babel/plugin-transform-modules-commonjs"
  ]
}

   // Delete one Asset
            .addCase(deleteAssetThunk.fulfilled, (state, action) => {
                state.assets = Object.fromEntries(Object.entries(state.assets).filter(([key]) => key !== action.payload))
                console.log('fulfilled, asset Deleted');
            })

import { useEffect, useMemo, useRef, useState } from 'react'
import { useWeb3React } from '@web3-react/core'
import Web3 from 'web3'

import { defaultEVMNetworkId } from '@contracts/networks'

import { web3NoAccountInstances } from '@utils/web3'

export const useWeb3 = () => {
  const { library, chainId } = useWeb3React()
  const web3NoAccount = useMemo(
    () =>
      web3NoAccountInstances[
        chainId ? chainId.toString() : defaultEVMNetworkId
      ],
    [chainId]
  )
  const refChainId = useRef(chainId)
  const refWeb3 = useRef(library)
  const [web3, setweb3] = useState(library ? new Web3(library) : web3NoAccount)

  useEffect(() => {
    if (library !== refWeb3.current || chainId !== refChainId.current) {
      setweb3(library ? new Web3(library) : web3NoAccount)
      refWeb3.current = library
      refChainId.current = chainId
    }
  }, [chainId, library, web3NoAccount])

  return web3
}

import { isMobile } from 'react-device-detect'
import { useWeb3 } from '@firestarter-private/firestarter-library'
import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'

import { injected, walletconnect } from '@/connectors'

export const useWalletConnect = (): { onClickWallet: () => void } => {
  const web3 = useWeb3()
  const { activate } = useWeb3React()

  const onClickWallet = () => {
    if (isMobile) {
      // if the connector is walletconnect and the user has already tried to connect, manually reset the connector
      if (
        // @ts-ignore
        walletconnect.walletConnectProvider?.wc?.uri
      ) {
        walletconnect.walletConnectProvider = undefined
      }
      activate(walletconnect, undefined, true).catch((error) => {
        if (error instanceof UnsupportedChainIdError) {
          activate(walletconnect) // a little janky...can't use setError because the connector isn't set
        }
      })
      // @ts-ignore
      web3.setProvider(window.ethereum)
    } else {
      activate(injected)
    }
  }

  return { onClickWallet }
}

typescript adds types to JavaScript.
/////////////////////////////////////////// function arguments
Function arguments & return types:
let greeting : (name: string) => string;
greeting = function (name: string) {
    return `Hi ${name}`;
};
/////////////////////////////////////////// object Type
let employee: object;
object type represents any value that is not a primitive type,while Object type describes functionalities that available on all objects;toString,valueof...

//////////////////////////////////// array & tuple
array can store mixed type values
let arr: type[]
A tupple is an array with a fixed number of elements whose types are known.

//////////////////////////////////// any type
Use the any type to store a value that you don’t actually know its type at the compile-time

//////////////////////////////////// void type
 you use the void type as the return type of functions that do not return a value. 
 
//////////////////////////////////// union types
  combine multiple types into one type
  let result: number | string;
/////////////////////////////////////////// type aliases
define a new name for an existing type,useful for union types.
type newName=existing type;
type alphanumeric = string | number;
/////////////////////////////////////////////// String Literal Types
define a type that accepts only a specified string literal;
let mouseEvent: 'click' | 'dblclick' | 'mouseup' | 'mousedown';

/////////////////////////////////////  Type inference
TypeScript guesses the type,when you initialize the variable.

/////////////////////////////////////  optional parameters
Use the parameter?: type syntax to make a parameter optional.
Use the expression typeof(parameter) !== 'undefined' to check if the parameter has been initialized.


/////////////////////////////////////  default parameters
function name(parameter1=defaultValue1,...) {
   // do something
}
To use the default initialized value of a parameter, you omit the argument when calling the function or pass the undefined into the function.

/////////////////////////////////////  classes
ES5 allows classes and Ts adds type annotations

/////////////////////////////////////  inheritance
you use the extends keyword.
To call the constructor of the parent class in the constructor of the child class, you use the super() syntax. 
Method overriding:just redefine the method

/////////////////////////////Static Methods and Properties
a static property is shared among all instances of a class.

///////////////////////////// abstract classe
define common behaviors for derived classes to extend,
  

///////////////////////////// type guards
 used to identify or narrow down the type of a variable using instanceOf and typeOf.
 User can define type-guards:
 function isCustomer(partner: any): partner is Customer {
    return partner instanceof Customer;
}
///////////////////// casting types
to convert a variable from one type to another.using as pr <>;

const fetchTrainingQueue = () => {
		const requestOptions = {
			method: 'GET',
			headers: {
				"Content-Type": "application/json",
				"Authorization": `Bearer ${props.jwt}`
			},
		};

		fetch('https://api.ai-server.becode.org/get_user_training_queue', requestOptions)
			.then(response => response.json())
			.then(data => {
				setTrainingQueue(data)
			})
	}

  useEffect(() => {
    document.querySelector('main')?.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth',
    });
  }, [id]);

import { useState, useEffect } from 'react';
import debounce from 'lodash/debounce';

export function useScroll() {
  const [scrollY, setScrollY] = useState<number>(0);

  const listener = () => {
    setScrollY(window.pageYOffset);
  };

  const delay = 15;

  useEffect(() => {
    window.addEventListener('scroll', debounce(listener, delay));
    return () => window.removeEventListener('scroll', listener);
  });

  return {
    scrollY
  };
}

async function fetchData() {
  try {
    await Promise.resolve(42);
  } catch (err) {
    if (err instanceof Error) {
      // ✅ TypeScript knows err is Error
      console.log(err.message);
    } else {
      console.log('Unexpected error', err);
    }
  }
}

const fakeDataObj = fakeData2.reduce((obj, item) => Object.assign(obj, { [item.name]: item.valueOf() }), {}) 

const str = '4556' as string;

console.log(fakeDataObj['4556' as keyof typeof fakeDataObj]);

//back to array
const new array = []
 for (const elem in fakeDataObj.data) {
                newArray.push(fakeDataObj.data[elem as keyof typeof fakeDataObj.data])
            }

const str = 'name' as string;

const obj = {
  name: 'James Doe',
  country: 'Chile',
};

// 👇️ "James Doe"
console.log(obj[str as keyof typeof obj]);

// 👇️ type T = "name" | "country"
type T = keyof typeof obj;

$ npm install typescript --save-dev
$ npm install express
$ npm install --save-dev eslint @types/express @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier
$ npm install --save-dev ts-node-dev

// GENERATE TSCONFIG FILE FROM TERMINAL
$npm run tsc -- --init
$tsc --init

// PACKAGE.JSON
{
  // ..
  "scripts": {
    "start": "node dist/index.js",
    "build": "tsc --build",
    "clean": "tsc --build --clean",
    "tsc": "tsc",
    "dev": "ts-node-dev index.ts",
    "lint": "eslint src/**/*.ts",
     "format": "src/**/*.ts --fix",
  },
  // ..
}

// TSCONFIG.JSON
{
  "compilerOptions": {
    "target": "ES2018",
    "outDir": "dist",
    "sourceMap": true,
    "module": "commonjs",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "resolveJsonModule": true
  },
  "include": [
    "src/**/*.ts",
  ],
  "exclude": [
    "node_modules"
  ]
}

//.ESLINTRC
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "rules": {
    "indent": 0,
    "linebreak-style": 0,
    "quotes": [
      "error",
      "double"
    ]
  }
}
  
// PRETTIERRC
{
  "trailingComma": "all",
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
    "next-seo.config",
    "^components/(.*)$",
    "^utils/(.*)$",
    "^assets/(.*)$",
    "^@fontsource/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

// custom.d.ts
declare module "*.svg" {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

// tsconfig
"include": [
    "src",
    "custom.d.ts"
  ]

export interface IDuration {
  readonly milliseconds: number
  readonly seconds: number
  readonly minutes: number
  readonly hours: number
  readonly days: number
}

export class Duration implements IDuration {

  readonly total: number

  constructor(input: IDuration) {
    const { days = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0 } = input
    this.total = days + hours + minutes + seconds + milliseconds
  }

  static of(input: Partial<IDuration>): Duration {
    const { days = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0 } = input
    return new Duration({
      days: days * 86400000,
      hours: hours * 3600000,
      minutes: minutes * 60000,
      seconds: seconds * 1000,
      milliseconds,
    })
  }

  add(other: Duration): Duration {
    return Duration.of({ milliseconds: this.total + other.total })
  }

  subtract(other: Duration): Duration {
    return Duration.of({ milliseconds: this.total - other.total })
  }

  get days() {
    return Math.floor(this.total / 86400000)
  }

  get hours() {
    return Math.floor(this.total / 3600000)
  }

  get minutes() {
    return Math.floor(this.total / 60000)
  }

  get seconds() {
    return Math.floor(this.total / 1000)
  }

  get milliseconds() {
    return this.total
  }
}

npm install -g gitignore
npx gitignore <language/framework/library>
  
/* npx gitignore node
npx gitignore react
npx gitignore reactNative */

module.exports = {
  globals: {
    module: true,
  },
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  plugins: ["react", "@typescript-eslint"],
  settings: {
    react: {
      pragma: "React",
      version: "detect",
    },
  },
  rules: {
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "react/react-in-jsx-scope": 0,
  },
  'import/order': [
    2,
    {
      'newlines-between': 'always',
      groups: [
        'builtin',
        'external',
        'internal',
        'parent',
        'sibling',
        'index',
        'unknown',
        'object',
        'type',
      ],
      alphabetize: {
        order: 'asc',
        caseInsensitive: true,
      },
      pathGroups: [
        {
          pattern: 'react*',
          group: 'external',
          position: 'before',
        },
      ],
    },
  ],
};

// Add lint script to package.json
// "lint": "eslint './src/**/*.{ts,tsx}'"

npx cap open ios #abrir o projecto no xcode

npx cap open android #abrir o projecto no android

<dict>
+  <key>NSCameraUsageDescription</key>
+  <string>To be able to scan barcodes</string>
</dict>

<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:tools="http://schemas.android.com/tools" <-- adicionas esta linha não removendo nada e seguindo esta lógica

  package="com.example">

  <application
+    android:hardwareAccelerated="true" <-- adicionas esta linha não removendo nada e seguindo esta lógica
  >
  </application>

+  <uses-permission android:name="android.permission.CAMERA" /><-- adicionas esta linha não removendo nada e seguindo esta lógica

+  <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" /><-- adicionas esta linha não removendo nada e seguindo esta lógica
</manifest>

ionic build --prod

#caso quiseres colocar a app para android dás o seguinte comando:
npm install @capacitor/android
npx cap add android

#caso quiseres colocar a app para iOS dás o seguinte comando:
npm install @capacitor/ios
npx cap add ios


#no final dão estes dois ultimos comandos

npx cap sync
npx cap copy Android ou ios #dependendo do qual escolheram

...

<ion-content class="scanner-hide" *ngIf="scanStatus == false">
  <div class="padding-container center">
    <ion-button color="primary" (click)="scanCode()"><ion-icon slot="start" name="qr-code-outline"></ion-icon> Scanear Código</ion-button> <!-- Botão que chama a função do scanner-->
  </div>
  <ion-card>
    <ion-card-content><h1>{{ result }}</h1></ion-card-content> <!-- mostra o resultado do scan -->
  </ion-card>
  
  <div class="scanner-ui"> <!-- Quando estamos a scanear, chama esta classe-->
    ...Scanner Interface
    </div>
    <div class="ad-spot"></div>
</ion-content>

...
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';



...



export class HomePage {
  public scanStatus:boolean = false; // no inicio da página, coloca o estado do código qr para falso
  public result:any;

  constructor() {}


  async scanCode () {

    this.setPermissions(); /* chama as permissões à camera */
  
    BarcodeScanner.hideBackground(); // coloca o fundo transparente
    this.scanStatus = true; // ao mudar esta variável para true, estamos a puxar o qr code scanner 
    document.body.classList.add("qrscanner"); // adiciona a classe css que fizemos no global
    const result = await BarcodeScanner.startScan(); // começa a fazer scan e espera por um result
  
  // se o qr scanner detectou algum número, então ele faz o código abaixo
    if (result.hasContent) {

        
        this.scanStatus = false; //como é obvio, ele tem de desligar o scanner ao obter o resultado
        BarcodeScanner.stopScan(); //para o scan
        this.result = result.content; // passa o resultado para a variável global result
        BarcodeScanner.showBackground(); //volta a mostrar o fundo
        document.body.classList.remove("qrscanner"); //remove a classe css que criamos no global
    
    }
  }

  async setPermissions(){
    const status = await BarcodeScanner.checkPermission({ force: true }); /* força a permissão para true, caso o utilizador não aceite, o scanner não funciona */
    if (status.granted) {
      // the user granted permission
      return true; // se o utilizador aceitou as permissões retorna true
    }
  
      return false; // se o utilizador não aceitou retorna false
  }
}

let max: number = 10000;

for (let n = 1; n < max; n++) {
  let dist1: number = x1 + (v1 * n);
  let dist2: number = x2 + (v2 * n);
  if (dist1 === dist2) return 'YES';        
}

return 'NO';

interface Observer{
   update:() => void;
}

class ConcreteObserverA implements Observer {
   update() {
        console.log(this.constructor.name,"has been updated");
   }
}

class ConcreteObserverB implements Observer {
   update () {
        console.log(this.constructor.name,"has been updated");
   }
}
class Subject {
    private _name = "";

    private observerCollection:Observer[] = [];

    get name() {
        return this._name;
    }

    set name(val:string) {
        this._name=val;
        this.notifyObservers();
    }

    registerObserver(...o:Observer[]) {
            this.observerCollection.push(...o);
    }

    unregisterObserver(o:Observer) { 
        this.observerCollection = this.observerCollection.filter (e => e! == o);
    }

    notifyObservers() {
        this.observerCollection.forEach(o => o.update() );
    }
}

const subject = new Subject();
const oA = new ConcreteObserverA();
const oB = new ConcreteObserverB();
subject.registerObserver(oA, oB);

subject.name = "Jau, jau!";

interface TaskConfiguration extends BaseTaskConfiguration {
  /**
   * The configuration's version number
   */
  version: '2.0.0';

  /**
   * Windows specific task configuration
   */
  windows?: BaseTaskConfiguration;

  /**
   * macOS specific task configuration
   */
  osx?: BaseTaskConfiguration;

  /**
   * Linux specific task configuration
   */
  linux?: BaseTaskConfiguration;
}

interface BaseTaskConfiguration {
  /**
   * The type of a custom task. Tasks of type "shell" are executed
   * inside a shell (e.g. bash, cmd, powershell, ...)
   */
  type: 'shell' | 'process';

  /**
   * The command to be executed. Can be an external program or a shell
   * command.
   */
  command: string;

  /**
   * Specifies whether a global command is a background task.
   */
  isBackground?: boolean;

  /**
   * The command options used when the command is executed. Can be omitted.
   */
  options?: CommandOptions;

  /**
   * The arguments passed to the command. Can be omitted.
   */
  args?: string[];

  /**
   * The presentation options.
   */
  presentation?: PresentationOptions;

  /**
   * The problem matcher to be used if a global command is executed (e.g. no tasks
   * are defined). A tasks.json file can either contain a global problemMatcher
   * property or a tasks property but not both.
   */
  problemMatcher?: string | ProblemMatcher | (string | ProblemMatcher)[];

  /**
   * The configuration of the available tasks. A tasks.json file can either
   * contain a global problemMatcher property or a tasks property but not both.
   */
  tasks?: TaskDescription[];
}

/**
 * Options to be passed to the external program or shell
 */
export interface CommandOptions {
  /**
   * The current working directory of the executed program or shell.
   * If omitted the current workspace's root is used.
   */
  cwd?: string;

  /**
   * The environment of the executed program or shell. If omitted
   * the parent process' environment is used.
   */
  env?: { [key: string]: string };

  /**
   * Configuration of the shell when task type is `shell`
   */
  shell: {
    /**
     * The shell to use.
     */
    executable: string;

    /**
     * The arguments to be passed to the shell executable to run in command mode
     * (e.g ['-c'] for bash or ['/S', '/C'] for cmd.exe).
     */
    args?: string[];
  };
}

/**
 * The description of a task.
 */
interface TaskDescription {
  /**
   * The task's name
   */
  label: string;

  /**
   * The type of a custom task. Tasks of type "shell" are executed
   * inside a shell (e.g. bash, cmd, powershell, ...)
   */
  type: 'shell' | 'process';

  /**
   * The command to execute. If the type is "shell" it should be the full
   * command line including any additional arguments passed to the command.
   */
  command: string;

  /**
   * Whether the executed command is kept alive and runs in the background.
   */
  isBackground?: boolean;

  /**
   * Additional arguments passed to the command. Should be used if type
   * is "process".
   */
  args?: string[];

  /**
   * Defines the group to which this task belongs. Also supports to mark
   * a task as the default task in a group.
   */
  group?: 'build' | 'test' | { kind: 'build' | 'test'; isDefault: boolean };

  /**
   * The presentation options.
   */
  presentation?: PresentationOptions;

  /**
   * The problem matcher(s) to use to capture problems in the tasks
   * output.
   */
  problemMatcher?: string | ProblemMatcher | (string | ProblemMatcher)[];

  /**
   * Defines when and how a task is run.
   */
  runOptions?: RunOptions;
}

interface PresentationOptions {
  /**
   * Controls whether the task output is reveal in the user interface.
   * Defaults to `always`.
   */
  reveal?: 'never' | 'silent' | 'always';

  /**
   * Controls whether the command associated with the task is echoed
   * in the user interface. Defaults to `true`.
   */
  echo?: boolean;

  /**
   * Controls whether the panel showing the task output is taking focus.
   * Defaults to `false`.
   */
  focus?: boolean;

  /**
   * Controls if the task panel is used for this task only (dedicated),
   * shared between tasks (shared) or if a new panel is created on
   * every task execution (new). Defaults to `shared`.
   */
  panel?: 'shared' | 'dedicated' | 'new';

  /**
   * Controls whether to show the `Terminal will be reused by tasks,
   * press any key to close it` message.
   */
  showReuseMessage?: boolean;

  /**
   * Controls whether the terminal is cleared before this task is run.
   * Defaults to `false`.
   */
  clear?: boolean;

  /**
   * Controls whether the task is executed in a specific terminal
   * group using split panes. Tasks in the same group (specified by a string value)
   * will use split terminals to present instead of a new terminal panel.
   */
  group?: string;
}

/**
 * A description of a problem matcher that detects problems
 * in build output.
 */
interface ProblemMatcher {
  /**
   * The name of a base problem matcher to use. If specified the
   * base problem matcher will be used as a template and properties
   * specified here will replace properties of the base problem
   * matcher
   */
  base?: string;

  /**
   * The owner of the produced VS Code problem. This is typically
   * the identifier of a VS Code language service if the problems are
   * to be merged with the one produced by the language service
   * or 'external'. Defaults to 'external' if omitted.
   */
  owner?: string;

  /**
   * The severity of the VS Code problem produced by this problem matcher.
   *
   * Valid values are:
   *   "error": to produce errors.
   *   "warning": to produce warnings.
   *   "info": to produce infos.
   *
   * The value is used if a pattern doesn't specify a severity match group.
   * Defaults to "error" if omitted.
   */
  severity?: string;

  /**
   * Defines how filename reported in a problem pattern
   * should be read. Valid values are:
   *  - "absolute": the filename is always treated absolute.
   *  - "relative": the filename is always treated relative to
   *    the current working directory. This is the default.
   *  - ["relative", "path value"]: the filename is always
   *    treated relative to the given path value.
   *  - "autodetect": the filename is treated relative to
   *    the current workspace directory, and if the file
   *    does not exist, it is treated as absolute.
   *  - ["autodetect", "path value"]: the filename is treated
   *    relative to the given path value, and if it does not
   *    exist, it is treated as absolute.
   */
  fileLocation?: string | string[];

  /**
   * The name of a predefined problem pattern, the inline definition
   * of a problem pattern or an array of problem patterns to match
   * problems spread over multiple lines.
   */
  pattern?: string | ProblemPattern | ProblemPattern[];

  /**
   * Additional information used to detect when a background task (like a watching task in Gulp)
   * is active.
   */
  background?: BackgroundMatcher;
}

/**
 * A description to track the start and end of a background task.
 */
interface BackgroundMatcher {
  /**
   * If set to true the watcher is in active mode when the task
   * starts. This is equals of issuing a line that matches the
   * beginPattern.
   */
  activeOnStart?: boolean;

  /**
   * If matched in the output the start of a background task is signaled.
   */
  beginsPattern?: string;

  /**
   * If matched in the output the end of a background task is signaled.
   */
  endsPattern?: string;
}

interface ProblemPattern {
  /**
   * The regular expression to find a problem in the console output of an
   * executed task.
   */
  regexp: string;

  /**
   * Whether the pattern matches a problem for the whole file or for a location
   * inside a file.
   *
   * Defaults to "location".
   */
  kind?: 'file' | 'location';

  /**
   * The match group index of the filename.
   */
  file: number;

  /**
   * The match group index of the problem's location. Valid location
   * patterns are: (line), (line,column) and (startLine,startColumn,endLine,endColumn).
   * If omitted the line and column properties are used.
   */
  location?: number;

  /**
   * The match group index of the problem's line in the source file.
   * Can only be omitted if location is specified.
   */
  line?: number;

  /**
   * The match group index of the problem's column in the source file.
   */
  column?: number;

  /**
   * The match group index of the problem's end line in the source file.
   *
   * Defaults to undefined. No end line is captured.
   */
  endLine?: number;

  /**
   * The match group index of the problem's end column in the source file.
   *
   * Defaults to undefined. No end column is captured.
   */
  endColumn?: number;

  /**
   * The match group index of the problem's severity.
   *
   * Defaults to undefined. In this case the problem matcher's severity
   * is used.
   */
  severity?: number;

  /**
   * The match group index of the problem's code.
   *
   * Defaults to undefined. No code is captured.
   */
  code?: number;

  /**
   * The match group index of the message. Defaults to 0.
   */
  message: number;

  /**
   * Specifies if the last pattern in a multi line problem matcher should
   * loop as long as it does match a line consequently. Only valid on the
   * last problem pattern in a multi line problem matcher.
   */
  loop?: boolean;
}

/**
 * A description to when and how run a task.
 */
interface RunOptions {
  /**
   * Controls how variables are evaluated when a task is executed through
   * the Rerun Last Task command.
   * The default is `true`, meaning that variables will be re-evaluated when
   * a task is rerun. When set to `false`, the resolved variable values from
   * the previous run of the task will be used.
   */
  reevaluateOnRerun?: boolean;

  /**
   * Specifies when a task is run.
   *
   * Valid values are:
   *   "default": The task will only be run when executed through the Run Task command.
   *   "folderOpen": The task will be run when the containing folder is opened.
   */
  runOn?: string;
}

import { Directive, TemplateRef, ViewContainerRef, Input} from '@angular/core';

@Directive({
  selector: '[appNavigationLine]'
})
export class NavigationLineDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) { }

  @Input('appNavigationLine') set navigationLine(numArray: (number|string)[]) {
    this.viewContainer.clear()
    numArray.forEach( num => this.viewContainer.createEmbeddedView(this.templateRef, {
      index: numArray.indexOf(num)
    }))
  }
}

class CPF {
    cpfNumber: Array<number> = [];
    
    notAcepted: Array<string> = [
        "00000000000", "11111111111", "22222222222", "33333333333", "44444444444",
        "55555555555", "66666666666", "77777777777", "88888888888", "99999999999"
    ];

    generate(): string {
        let number = [];
        for (let i = 0; i < 9; i++) {
            number.push(Math.floor(Math.random() * 10));
        }
        number.push(this.claculateFirstDigit(number));
        number.push(this.claculateSecondDigit(number));
        return this.maskCPF(number);
    }
    maskCPF(values: Array<number>): string {
        let cpf = "";
        for (let item of values) {
            cpf += item;
        }
        cpf = cpf.replace(/[^\d]/g, '').replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
        return cpf;
    }
    clean(values: string) {
        values = values.replace(/[^\d]/g, '');
        for (let item of values) {
            this.cpfNumber.push(parseInt(item));
        }
    }
    claculateFirstDigit(values: Array<number>): number {
        let sum = 0;
        for (let i = 0; i < 9; i++) {
            sum += values[i] * (10 - i);
        }
        let rest = (sum * 10) % 11;
        if (rest === 10 || rest === 11) {
            rest = 0;
        }
        return rest;
    }
    claculateSecondDigit(values: Array<number>): number {
        let sum = 0;
        for (let i = 0; i < 10; i++) {
            sum += values[i] * (11 - i);
        }
        let rest = (sum * 10) % 11;
        if (rest === 10 || rest === 11) {
            rest = 0;
        }
        return rest;
    }
    isValid(values: string): boolean {
        this.clean(values);
        return this.isAcepted(values) && this.length(this.cpfNumber) 
        && this.validate(this.cpfNumber);
    }
    isAcepted(values: string): boolean {
        let cpf = values.replace(/[^\d]/g, '');
        return !this.notAcepted.includes(cpf);
    }
    length(values: Array<number>): boolean {
        return values.length === 11;
    }
    validate(values: Array<number>): boolean {
        return this.claculateFirstDigit(values) === this.cpfNumber[9] 
        && this.claculateSecondDigit(values) === this.cpfNumber[10];
    }
    origin(values: string): string {
        this.clean(values);
        switch (this.cpfNumber[8]) {
            case 0:
                return "Rio Grande do Sul";
            case 1:
                return "Distrito Federal, Goiás, Mato Grosso do Sul e Tocantins";
            case 2:
                return "Pará, Amazonas, Acre, Amapá, Rondônia e Roraima";
            case 3:
                return "Ceará, Maranhão e Piauí";
            case 4:
                return "Pernambuco, Rio Grande do Norte, Paraíba e Alagoas";
            case 5:
                return "Bahia e Sergipe";
            case 6:
                return "Minas Gerais";
            case 7:
                return "Rio de Janeiro e Espírito Santo";
            case 8:
                return "São Paulo";
            case 9:
                return "Paraná e Santa Catarina";
            default:
                return "";
        }
    }
}

var cpf = new CPF();
let mockCpf = cpf.generate();      // gera um cpf mock.
let valid = cpf.isValid(mockCpf);  // verifica se o cpf é valido.
let origem = cpf.origin(mockCpf);  // verifica pelo digito de onde pertence.
console.log(mockCpf);              // mostra um o cpf gerado em formato ###.###.###-##

const Algorithm = {
    clean: (number) => {
        if (Array.isArray(number)) {
            return number;
        }
        let array = [];
        number = number.replace(/[^\d]/g, '');

        for (let item of number) {
            array.push(parseInt(item));
        }
        return array;
    },
    notAcepted: [
        "00000000000", "11111111111", "22222222222", "33333333333", "44444444444",
        "55555555555", "66666666666", "77777777777", "88888888888", "99999999999"
    ],
    length: (number) => {
        return number.length === 11;
    },
    claculateFirstDigit: (number) => {
        let sum = 0;
        for (let i = 0; i < 9; i++) {
            sum += parseInt(number[i]) * (10 - i);
        }
        let rest = (sum * 10) % 11;
        if (rest === 10 || rest === 11) {
            rest = 0;
        }
        return rest;
    },
    claculateSecondDigit: (number) => {
        let sum = 0;
        for (let i = 0; i < 10; i++) {
            sum += parseInt(number[i]) * (11 - i);
        }
        let rest = (sum * 10) % 11;
        if (rest === 10 || rest === 11) {
            rest = 0;
        }
        return rest;
    },
    validate: (number) => {
        return Algorithm.claculateFirstDigit(number) == number[9] && Algorithm.claculateSecondDigit(number) == number[10];
    },
    isAcepted: (number) => {
        return Algorithm.notAcepted.indexOf(number) === -1;
    },
    isValid: (number) => {
        number = Algorithm.clean(number);
        return Algorithm.isAcepted(number) && Algorithm.length(number) && Algorithm.validate(number);
    },
    generate: () => {
        let number = [];
        for (let i = 0; i < 9; i++) {
            number.push(Math.floor(Math.random() * 10));
        }
        number.push(Algorithm.claculateFirstDigit(number));
        number.push(Algorithm.claculateSecondDigit(number));
        return Algorithm.maskCPF(number);
    },
    maskCPF: (number) => {
        number = Algorithm.clean(number);
        return number.slice(0, 3).join("") + "." + number.slice(3, 6).join("") + "." + number.slice(6, 9).join("") + "-" + number.slice(9, 11).join("");
    },
    origem: (number) => {
        let origem = {
            0: "Rio Grande do Sul",
            1: "Distrito Federal, Goiás, Mato Grosso do Sul e Tocantins",
            2: "Pará, Amazonas, Acre, Amapá, Rondônia e Roraima",
            3: "Ceará, Maranhão e Piauí",
            4: "Pernambuco, Rio Grande do Norte, Paraíba e Alagoas",
            5: "Bahia e Sergipe",
            6: "Minas Gerais",
            7: "Rio de Janeiro e Espírito Santo",
            8: "São Paulo",
            9: "Paraná e Santa Catarina",
        };
        return origem[number[8]];
    }
};

const partsOfTheDay = () => {
    let hour = new Date().getHours();
    let text = ["It's morning", "It's afternoon", "It's evening", "It's night"];
    var timeOfDay = text[hour < 12 ? 0 : hour < 18 ? 1 : hour < 22 ? 2 : 3];
    return timeOfDay;
}

const reverse = (str: string) => {
    return str.split('').reverse().join('');
}
console.log(reverse('Hello World'));

const hello = (name: string) => {
    return `Hello ${name}`;
}
console.log(hello('World'));

 export const useLocalStorageState = <T, K = any>(
   key: string,
   defaultValue: T | null,
   mutationFn: (value: T, optionalValue?: K) => T
 ) => {
   const localStorageValue = useLocalStorage<T>(key, (value) => {
  	 return value !== null ? JSON.parse(value) : defaultValue;
   });
   const [stateValue, setStateValue] = useState(localStorageValue);

   const setLocalStorageValue = (optionalValue?: K) => {
     const mutatedValue = mutationFn(stateValue, optionalValue);

     window.localStorage.setItem(key, JSON.stringify(mutatedValue));
     setStateValue(mutatedValue);
   };
   return { value: localStorageValue, set: setLocalStorageValue };
 };

import { Component } from '@angular/core';

@Component({
  selector: 'app-animated-project-title',
  templateUrl: './animated-project-title.component.html',
  styleUrls: ['./animated-project-title.component.css']
})
export class AnimatedProjectTitleComponent {

  constructor() { }

}

/^(?!00)(?!\.)[0-9]*\.?[0-9]*$/ только цифры и точка, не может начинаться с 00 или .

export const useNumericInput = () => {
  const [value, setValue] = useState<string>('')

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const rgx = /^[0-9]*\.?[0-9]*$/
    const inputValue = e.target.value
    if (!inputValue.match(rgx) || inputValue.charAt(0) === '.' || inputValue.charAt(1) === '0') {
      return setValue(prevState => prevState)
    }
    return setValue(inputValue)
  };

  return { onChange, value }
};

/// ИЛИ чистый js

export const numericInputValidator = (e: React.ChangeEvent<HTMLInputElement>, inputId: string) => {
  const userInput = e.target.value
  // @ts-ignore
  const input: HTMLInputElement = document.getElementById(inputId)

  if (userInput.charAt(1) === '0') {
    input.value = '0'
  }
  if (userInput.charAt(0) === '.') {
    input.value = ''
  }
  input.value = input.value.replace(/[^0-9\.]/g,'');
  input.addEventListener("blur", () => {
    input.value = stringTrim(userInput, 10);
  });
  input.addEventListener("focus", () => {
    input.value = userInput
  })
};

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}
Try

export const validationSchema = (): FormValidationSchema => {
  const validationObject: { [key: string]: StringSchema } = {}

  // validation schema keys based on the name prop of the radio buttons in the form
  HOBBIES.forEach((hobby) => {
    validationObject[hobby.stateName] = Yup.string().required()
  })

  return Yup.object(validationObject)
}

class _Array<T> extends Array<T> {
  static range(from: number, to: number, step: number): number[] {
    return [...Array(Math.floor((to - from) / step) + 1)].map(
      (v, k) => from + k * step
    );
  }
}
_Array.range(0, 9, 1);

interface _Iterable extends Iterable<{}> {
  length: number;
}

class _Array<T> extends Array<T> {
  static range(from: number, to: number, step: number): number[] {
    return Array.from(
      <_Iterable>{ length: Math.floor((to - from) / step) + 1 },
      (v, k) => from + k * step
    );
  }
}
_Array.range(0, 9, 1);
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

const Range2 = function* (to = 0, step = 1, from = 0) {
  let i = 0,
    length = Math.floor((to - from) / step) + 1;
  while (i < length) yield from + i++ * step;
};

[...Range2(5, -2, 10)]; // From 10 to 5 with step -2
//=> [10, 8, 6]

let even4to10 = Range2(10, 2, 4);
even4to10.next().value;
//=> 4
even4to10.next().value;
//=> 6
even4to10.next().value;
//=> 8
even4to10.next().value;
//=> 10
even4to10.next().value;
//=> undefined

class Range2 {
  constructor(to = 0, step = 1, from = 0) {
    this[Symbol.iterator] = function* () {
      let i = 0,
        length = Math.floor((to - from) / step) + 1;
      while (i < length) yield from + i++ * step;
    };
  }
}
[...new Range2(5)]; // First 5 Whole Numbers
//=> [0, 1, 2, 3, 4, 5]

[...new Range2(5, 2)]; // From 0 to 5 with step 2
//=> [0, 2, 4]

[...new Range2(5, -2, 10)]; // From 10 to 5 with step -2
//=> [10, 8, 6]

const Range = function* (total = 0, step = 1, from = 0) {
  for (let i = 0; i < total; yield from + i++ * step) {}
};

Array.from(Range(5, -2, -10));
//=> [-10, -12, -14, -16, -18]

[...Range(5, -2, -10)]; // Five Elements With Step -2 From -10
//=> [-10, -12, -14, -16, -18]

// Also works with for..of loop
for (i of Range(5, -2, 10)) console.log(i);
// 10 8 6 4 2

// Lazy loaded way
const number0toInf = Range(Infinity);
number0toInf.next().value;
//=> 0
number0toInf.next().value;
//=> 1
// ...

class Range {
  constructor(total = 0, step = 1, from = 0) {
    this[Symbol.iterator] = function* () {
      for (let i = 0; i < total; yield from + i++ * step) {}
    };
  }
}

[...new Range(5)]; // Five Elements
//=> [0, 1, 2, 3, 4]
[...new Range(5, 2)]; // Five Elements With Step 2
//=> [0, 2, 4, 6, 8]
[...new Range(5, -2, 10)]; // Five Elements With Step -2 From 10
//=>[10, 8, 6, 4, 2]
[...new Range(5, -2, -10)]; // Five Elements With Step -2 From -10
//=> [-10, -12, -14, -16, -18]

// Also works with for..of loop
for (i of new Range(5, -2, 10)) console.log(i);
// 10 8 6 4 2

const range = (from, to, step) =>
  [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);

range(0, 9, 2);
//=> [0, 2, 4, 6, 8]

// can also assign range function as static method in Array class (but not recommended )
Array.range = (from, to, step) =>
  [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);

Array.range(2, 10, 2);
//=> [2, 4, 6, 8, 10]

Array.range(0, 10, 1);
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.range(2, 10, -1);
//=> []

Array.range(3, 0, -1);
//=> [3, 2, 1, 0]

[...Array(10)].map((_, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array.from(Array(10)).map((_, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array.from(Array(10).keys()).map(i => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

[...Array(10).keys()].map(i => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

Array(10).fill(0).map((_, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array(10).fill().map((_, i) => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

[...Array(N)].map((_, i) => from + i * step);

// package.json
"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.11.0",
    "@typescript-eslint/parser": "^5.11.0",
    "eslint": "^8.8.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jest-dom": "^4.0.1",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-testing-library": "^5.0.5",
    "prettier": "^2.5.1"
  }

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  },
  "extends": [
    "airbnb",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "tsconfig.json"
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "paths": ["src"]
      }
    }
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "testing-library",
    "jest-dom",
    "simple-import-sort",
    "prettier"
  ],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
    "testing-library/await-async-query": "error",
    "testing-library/no-await-sync-query": "error",
    "testing-library/prefer-user-event": "error",
    "testing-library/no-debugging-utils": "warn",
    "react/react-in-jsx-scope": "off",
    "import/extensions": ["error", "never"],
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "sort-imports": "off",
    "import/order": "off",
    "no-console": "warn",
    "@typescript-eslint/prefer-optional-chain": "warn",
    "@typescript-eslint/prefer-nullish-coalescing": "warn",
    "@typescript-eslint/no-for-in-array": "warn",
    "@typescript-eslint/prefer-for-of": "warn",
    "@typescript-eslint/no-floating-promises": "warn",
    "@typescript-eslint/promise-function-async": "warn",
    "@typescript-eslint/sort-type-union-intersection-members": "warn",
    "@typescript-eslint/no-unnecessary-boolean-literal-compare": "warn",
    "@typescript-eslint/no-confusing-non-null-assertion": "warn",
    "@typescript-eslint/no-non-null-asserted-nullish-coalescing": "warn",
    "@typescript-eslint/consistent-indexed-object-style": [
      "warn",
      "index-signature"
    ]
  }
}
// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

import {
  render as rtlRender,
  RenderOptions,
  RenderResult,
} from "@testing-library/react";
import { ReactElement } from "react";
import { Provider } from "react-redux";

import { configureStoreWithMiddlewares, RootState } from "../app/store";

type CustomRenderOptions = {
  preloadedState?: RootState;
  renderOptions?: Omit<RenderOptions, "wrapper">;
};

const render = (
  ui: ReactElement,
  { preloadedState = {}, ...renderOptions }: CustomRenderOptions = {}
): RenderResult => {
  const store = configureStoreWithMiddlewares(preloadedState);
  const Wrapper: React.FC = ({ children }) => {
    return <Provider store={store}>{children}</Provider>;
  };
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
};

export * from "@testing-library/react";
export { render };

type KeysOfType<T, K> = { [P in keyof T]: T[P] extends K ? P : never }[keyof T];

type PostStringKeys = KeysOfType<Post, string>;
type PostNumberKeys = KeysOfType<Post, number>;

import { object, SchemaOf, string } from 'yup';

interface BaseBootstrapSchema {  
  APPLICATION_NAME: string;
  LOG_PATH: string;
}

const bootstrapValidationSchema: SchemaOf<BaseBootstrapSchema> = object({
  LOG_PATH: string().required("The 'LOG_PATH' ENV variable is required"),
  APPLICATION_NAME: string().required("The 'APPLICATION_NAME' ENV variable is required"),
});

module.exports = (schema: SchemaOf<BaseBootstrapSchema>) =>
  new Promise((resolve, reject) =>
    schema
      .validate(process.env, { abortEarly: false })
      .then(() => resolve(true))
      .catch((error: any) => {
        if (error.errors.length > 1) {
          reject(new Error(`${error.message},\n${error.errors.join(',\n')}`));
        } else {
          reject(new Error(error.message));
        }
      })
  );

    ${({ expanded }) =>
      !expanded &&
      css`
        &::after {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          background: white;
          inset: 0;
        }
    `}

 mockUseFilters.mockReturnValue({
      filterByGroup: jest.fn((query: string) => mockAxios.get('/api', { config: { data: query } }))
    })

let getByText: any;

describe('test', () => {
    beforeEach(() => {
      ({ getByText } = render(<Component />));
    })});

type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K }[keyof T];

type OptionalKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? K : never }[keyof T];

type PickRequired<T> = Pick<T, RequiredKeys<T>>;

type PickOptional<T> = Pick<T, OptionalKeys<T>>;

type Nullable<T> = { [P in keyof T]: T[P] | null };

type NullableOptional<T> = PickRequired<T> & Nullable<PickOptional<T>>;

interface Props {
  isFixed?: boolean
}

interface Attrs {
  type?: string
}

const Button = styled.button.attrs(({ type = 'button' }: Attrs) => ({
  type,
}))`
  position: ${({ isFixed = false }: Props) => (isFixed ? 'fixed' : 'absolute')};
`

export default () => (
  <div>
    <Button isFixed={true} type="submit">
      I'm a button with type "submit" instead of default type of "button"
    </Button>
  </div>
)

export function toTitleCase(str: string) {
  return str.toLowerCase().replace(/\b(\w)/g, s => s.toUpperCase());
}

// Example 4051231234 -> (405) 123-1234
export const formatToUSPhoneNumber = (e: React.ChangeEvent<HTMLInputElement>): string => {
  const phoneField = e.target;

  const cursorPosition = phoneField.selectionStart;
  const numericString = phoneField.value.replace(/\D/g, '').substring(0, 10);

  const match = numericString.match(/^(\d{1,3})(\d{0,3})(\d{0,4})$/);

  if (match) {
    let newVal = '(' + match[1];
    newVal += match[2] ? ') ' + match[2] : '';
    newVal += match[3] ? '-' + match[3] : '';

    // to help us put the cursor back in the right place
    const delta = newVal.length - Math.min(phoneField.value.length, 14);
    phoneField.value = newVal;
    if (cursorPosition) {
      phoneField.selectionEnd = cursorPosition + delta;
    }
  } else {
    phoneField.value = '';
  }

  return phoneField.value;
};

module.exports = {
  presets: [["next/babel"]],
  plugins: [["import", { libraryName: "antd", style: true }]],
};

import type { AppProps } from "next/app";
import "styles/variables.less";
import "styles/style.sass";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

@import "~antd/lib/style/themes/default.less";
@import "~antd/dist/antd.less"; // Import Ant Design styles

@primary-color: #10f5e2; // primary color for all components
@link-color: #10f5e2; // link color
@success-color: #60f7ca; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 2px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers

/** @type {import('next').NextConfig} */
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

const withAntdLess = require("next-plugin-antd-less");

module.exports = withBundleAnalyzer(
  withAntdLess({
    // Or better still you can specify a path to a file
    lessVarsFilePath: "./styles/variables.less",
    // optional
    lessVarsFilePathAppendToEndOfContent: false,
    // optional https://github.com/webpack-contrib/css-loader#object
    cssLoaderOptions: {},

    // Other Config Here...

    webpack(config) {
      return config;
    },

    // ONLY for Next.js 10, if you use Next.js 11, delete this block
    future: {
      webpack5: true,
    },
    reactStrictMode: true
  })
);

import React from "react";
import { Checkbox } from "antd";

function onChange(checkedValues: any) {
  console.log("checked = ", checkedValues);
}

const ChecboxComponent = () => {
  const plainOptions = ["Apple", "Pear", "Orange"];
  const options = [
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange" },
  ];
  const optionsWithDisabled = [
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange", disabled: false },
  ];
  return (
    <>
      <Checkbox.Group
        options={plainOptions}
        defaultValue={["Apple"]}
        onChange={onChange}
      />
      <br />
      <br />
      <Checkbox.Group
        options={options}
        defaultValue={["Pear"]}
        onChange={onChange}
      />
      <br />
      <br />
      <Checkbox.Group
        options={optionsWithDisabled}
        disabled
        defaultValue={["Apple"]}
        onChange={onChange}
      />
    </>
  );
};

export default ChecboxComponent;

import React from 'react'
import { Badge, Space, Switch } from "antd";
import { ClockCircleOutlined } from "@ant-design/icons";


const BadgeComponent = () => {
    const [show, setShow] = React.useState(true);

    return (
      <Space>
        <Switch checked={show} onChange={() => setShow(!show)} />
        <Badge count={show ? 25 : 0} />
        <Badge
          count={
            show ? <ClockCircleOutlined style={{ color: "#f5222d" }} /> : 0
          }
        />
        <Badge
          className="site-badge-count-109"
          count={show ? 109 : 0}
          style={{ backgroundColor: "#52c41a" }}
        />
      </Space>
    );
}

export default BadgeComponent

import React from "react";
import { Button, Tooltip } from "antd";
import { SearchOutlined } from "@ant-design/icons";
const ButtonComponent = () => {
  return (
    <div className="button-container">
      <Tooltip title="search">
        <Button type="primary" shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button type="primary" shape="circle">
        A
      </Button>
      <Button type="primary" icon={<SearchOutlined />}>
        Search
      </Button>
      <Tooltip title="search">
        <Button shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button icon={<SearchOutlined />}>Search</Button>
      <br />
      <Tooltip title="search">
        <Button shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button icon={<SearchOutlined />}>Search</Button>
      <Tooltip title="search">
        <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button type="dashed" icon={<SearchOutlined />}>
        Search
      </Button>
      <Button icon={<SearchOutlined />} href="https://www.google.com" />
      <br />
      <br />
      <Tooltip title="search">
        <Button
          type="primary"
          shape="circle"
          icon={<SearchOutlined />}
          size="large"
        />
      </Tooltip>
      <Button type="primary" shape="circle" size="large">
        A
      </Button>
      <Button type="primary" icon={<SearchOutlined />} size="large">
        Search
      </Button>
      <Tooltip title="search">
        <Button shape="circle" icon={<SearchOutlined />} size="large" />
      </Tooltip>
      <Button icon={<SearchOutlined />} size="large">
        Search
      </Button>
      <br />
      <Tooltip title="search">
        <Button shape="circle" icon={<SearchOutlined />} size="large" />
      </Tooltip>
      <Button icon={<SearchOutlined />} size="large">
        Search
      </Button>
      <Tooltip title="search">
        <Button
          type="dashed"
          shape="circle"
          icon={<SearchOutlined />}
          size="large"
        />
      </Tooltip>
      <Button type="dashed" icon={<SearchOutlined />} size="large">
        Search
      </Button>
      <Button
        icon={<SearchOutlined />}
        size="large"
        href="https://www.google.com"
      />
    </div>
  );
};

export default ButtonComponent;

import type { NextPage } from "next";
import Head from "next/head";
import { Tabs } from "antd";
import ButtonComponent from "components/ButtonComponent";
import BadgeComponent from "components/BadgeComponent";
import ChecboxComponent from "components/ChecboxComponent";

const Home: NextPage = () => {
  return (
    <div className="container">
      <Head>
        <title>Latihan Antd Custom Varibale</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="main">
        <Tabs defaultActiveKey="1">
          <Tabs.TabPane tab="Komponen Button" key="1">
            <ButtonComponent />
          </Tabs.TabPane>
          <Tabs.TabPane tab="Komponen Badge" key="2">
            <BadgeComponent />
          </Tabs.TabPane>
          <Tabs.TabPane tab="Komponen Checkbox" key="3">
            <ChecboxComponent />
          </Tabs.TabPane>
        </Tabs>
      </main>
    </div>
  );
};

export default Home;

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import "antd/dist/antd.css";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

interface SuperComponentProps {
  test1: {
    a: "1" | "2"
  },
  test2: {
    a: "3" | "4"
  }
  helloworld: {
    b: "4" | "b"
  }
};

function SuperComponent<T extends SuperComponentProps[keyof SuperComponentProps]>(props: T) {
  return <p>test 3</p>;
}

// HOW TO USE
<SuperComponent<SuperComponentProps["test1"]> a="1" />

import thunk, { ThunkDispatch } from 'redux-thunk'

export type IRootThunkDispatch = ThunkDispatch<IRootState, null, IRootAction>

const store = createStore<IRootState,IRootAction,{},{}>(
    rootReducer,
    composeEnhancers(
        applyMiddleware(logger),
        applyMiddleware(routerMiddleware(history)),
        applyMiddleware(thunk),
    )
);

export default store;

// store.ts
import {
  RouterState,
  connectRouter,
  routerMiddleware,
  CallHistoryMethodAction
} from 'connected-react-router';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

export interface IRootState{
    board: IBoardState,
    score: IScoreState
    router: RouterState
}

const rootReducer = combineReducers<IRootState>({
    board: boardReducers,
    score: scoreReducers,
    router: connectRouter(history)
});

type  IRootAction = ... | CallHistoryMethodAction;
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

let store = createStore<IRootState,IRootAction,{},{}>(
                rootReducer,
                composeEnhancers(
                    applyMiddleware(logger),
                    applyMiddleware(routerMiddleware(history))
                )
            );

export default store;


//-----------------------------------------
// App.tsx
import { ConnectedRouter } from 'connected-react-router';
import { history } from './store';
import { Link } from 'react-router-dom';
/*Other imports are omitted for simplicity reason*/

class App extends React.Component {
  public render() {
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <div>
            <nav className="nav-bar">
              <Link to="/" className="link">Home</Link>
              <Link to="/board" className="link">Open Board</Link>
              <Link to="/scores" className="link">Score Board</Link>
              <Link to="/about" className="link">About us</Link>
            </nav>
            <div>
                <Switch>
                  <Route path="/" exact={true} component={Home} />
                  <Route path="/scores"  component={Scores} />
                  <Route path="/board" component={Board} />
                  <Route path="/about" component={About} />
                  <Route component={NoMatch} />
                </Switch>
            </div>
          </div>
        </ConnectedRouter>
      </Provider>
    );
  }
}

export default App

import multer from 'multer';

// see customize section
const upload = multer({dest:'uploads/'})

const app = express();
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());

app.post('/contact',upload.single('profile'),(req,res)=>{
    console.log(req.file.key); // get the name of the file
    console.log(req.body); // Other fields are in req.body
    res.redirect('/');
})

// ----------------------------------
// upload options
upload.single("field-name");
upload.array("field-name");
upload.fields([
  { name: 'avatar', maxCount: 1 },
  { name: 'gallery', maxCount: 8 }
])

// ---------------------------------
// customize multer
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, path.resolve('/uploads'));
    },
    filename: function (req, file, cb) {
      cb(null, `${file.fieldname}-${Date.now()}.${file.mimetype.split('/')[1]}`);
    }
  })
const upload = multer({storage})

import {createStore, combineReducers, compose, applyMiddleware} from "redux";

declare global {
    /* tslint:disable:interface-name */
    interface Window {
        __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any
    }
}
....

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default createStore<IRootState,IRootAction,{},{}>(
    rootReducer,
    composeEnhancers(
      applyMiddleware(logger)
    )
);

import React, { useEffect } from 'react'
import { Button, Form } from 'react-bootstrap'
import { useForm } from 'react-hook-form'

type FormState = {
  name: string
  color: string
  gender: string
}

export default function FormDemo() {
  const { register, handleSubmit, watch } = useForm<FormState>({
    defaultValues: {
      name: '',
      color: '#c0ffee',
      gender: '',
    },
  })

  useEffect(() => {
    let sub = watch(data => {
      console.log('update form data:', data)
    })
    return () => sub.unsubscribe()
  }, [watch])

  function submit(data: FormState) {
    console.log('submit form data:', data)
  }

  return (
    <div className="container">
      <h1>Form Demo</h1>
      <Form onSubmit={handleSubmit(submit)}>
        <Form.Group>
          <Form.Label>Name</Form.Label>
          <Form.Control type="text" {...register('name')} />
        </Form.Group>
        <Form.Group>
          <Form.Label>Color</Form.Label>
          <Form.Control
            type="color"
            {...register('color')}
            className="d-inline"
          />
          <Form.Text className="text-muted">
            Custom the background color
          </Form.Text>
        </Form.Group>
        <Form.Group>
          <Form.Label>Gender</Form.Label>
          <Form.Control as="select" custom {...register('gender')}>
            <option value="">Prefer not to say</option>
            <option>M</option>
            <option>F</option>
            <option>T</option>
            <option>Others</option>
          </Form.Control>
        </Form.Group>
        <Button variant="primary" type="submit">
          Submit
        </Button>
      </Form>
    </div>
  )
}

import React from 'react';
import { connect } from 'react-redux';
import { RootState, Item } from '../redux/state';
import { addItem, deleteItem, RootDispatch } from '../redux/action';

type Props = {
    author: string,
    items: Item[],
    handleAddItem: (newItemText: string) => void,
    handleDeleteItem: (targetId: number) => void
}
    
class TodoList extends React.Components<Props, {}> {
  constructor(props: Props) {
    super(props);
    // ...
  }
  
  // using redux dispatcher
  addItem(text: string) {
    this.props.handleAddItem(text);
  }
  
  render() {
    return (
      <>
      	<button onClick={() => this.addItem('123')}>Add item</button>
      	// using redux state
      	{this.props.items.map(item => return <p>item.name</p>)}
      </>
    )
  }
}

const mapStateToProps = (state: RootState) => {
    return {
        author: state.author,
        items: state.items
    }
}

const mapDispatchToProps = (dispatch: RootDispatch) => {
    return {
        handleAddItem: (newItemText: string) => {
            dispatch(addItem(newItemText));
        },
        handleDeleteItem: (targetId: number) => {
            dispatch(deleteItem(targetId));
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

import { createStore }from 'redux';
import { RootAction } from './action';

import { RootState } from './state';
import { rootReducer } from './reducer';

declare global {
    /* tslint:disable:interface-name */
    interface Window {
       __REDUX_DEVTOOLS_EXTENSION__: any
    }
}

const store = createStore<RootState, RootAction, {}, {}>(
    rootReducer, 
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

import { useState } from 'react';
import { useSelector } from 'react-redux';
import { RootState } from '../redux/store';

export default function TodoList() {
  // state from redux store
  const items = useSelector((state: RootState) => state.items);
  
  // normal state
  const [nextId, setNextId] = useState<number>(0);
  
  // proceed to use state as usual
  return (
    <>
    	{items.map(item => {
         	return (
         		<TodoItem
         			text={item.name}
    			/>
         	)
        })}
    </>
  )
}

import React from 'react';

import { connect } from 'react-redux';
import { RootState } from '../redux/store';

type State = { 
  //...
}

class TodoList extends React.Components<RootState, State> {
  // rootstate is integrated into props of class component
  constructor(props: RootState) {
    super(props);
    this.state = { 
      // ... 
    }
  }
  
  render() {
    return (
      <>
      	<this.props.items>
      </>
    )
  }
}

const mapStateToProps = (state: RootState) => {
  return {
    items: state.items;
  }
}

export default connect(mapStateToProps)(TodoList);

import {createStore, Action} from "redux";


export interface IRootState{
    squares : Array<string|null>
    oIsNext: boolean
}

const initialState = {
    squares: [],
    oIsNext: true
}

const rootReducer = (state:IRootState = initialState) => {
    return {
        squares: [null,null,null,null,'O','X',null,null,null],
        oIsNext: true
    }
}

const store = createStore<IRootState,Action<any>,{},{}>(rootReducer);
export default store;

import { Provider} from 'react-redux';
import store from './store';
import Board from './Board';


class App extends React.Component {
  public render() {
    return (
      <Provider store={store}>
        <div className="game">
          <div className="game-board">
            <Board />
          </div>
          <div className="game-info">
            <div>{/* status */}</div>
            <ol>{/* TODO */}</ol>
          </div>
        </div>
      </Provider>
    );
  }
}

import '@testing-library/jest-dom'
import React from 'react';
import {render, screen} from '@testing-library/react'

yarn add bootstrap@4
//----------------------

import 'bootstrap/dist/css/bootstrap.min.css'; // Add this line
import './App.css';

npm install cors @types/cors

import cors from 'cors';
import express from 'express';

app = express();

// enable all routes
app.use(cors());

// enable single route
app.get('/route', cors(), function (req, res, next) {
  ...
})

// configure CORS
const corsOptions = {
  origin: 'http://example.com',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}

app.get('/route', cors(corsOptions), function (req, res, next) {
  ...
})

// enable pre-flight
app.options('/products/:id', cors()) // enable pre-flight request for DELETE request
app.del('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})
  
// enable pre-flight across-the-board
app.options('*', cors()) // include before other routes

import { Component, HostListener } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  public getScreenWidth: any;
  public getScreenHeight: any;
  
  ngOnInit() {
      this.getScreenWidth = window.innerWidth;
      this.getScreenHeight = window.innerHeight;
  }
  
  @HostListener('window:resize', ['$event'])

  onWindowResize() {
    this.getScreenWidth = window.innerWidth;
    this.getScreenHeight = window.innerHeight;
  }
  
}

const Component = React.forwardRef<RefType, PropsType>((props, ref) => {
  return someComponent;
});

export function debounce(fn, timeout = 1000) {
  let timeoutRef = null;

  return (...args) => {
    if (timeoutRef) clearTimeout(timeoutRef);

    timeoutRef = setTimeout(() => {
      return fn(...args);
    }, timeout);
  };
}

import { useReducer } from "react";
import { debounce } from "utils";
import localStorageReducer from "./useLocalStorage.reducer";
import { _getState, _setLocalStorage } from "./useLocalStorage.utils";

export default function useLocalStorage(
  defaultKey = "default",
  defaultInitialState = {}
) {
  const [state, dispatch] = useReducer(
    localStorageReducer,
    null,
    getInitialState
  );

  function getInitialState() {
    const _state = _getState(defaultKey, defaultInitialState, {
      defaultKey,
    });

    _setLocalStorage(defaultKey, _state);

    return _state;
  }

  return [state, dispatch, defaultInitialState];
}

export function _createStorage(dispatch) {
  return (lsKey, state) => {
    dispatch({
      type: "CREATE_STORAGE",
      lsKey,
      state,
    });
  };
}

export function _updateStorageByKey(dispatch) {
  return (stateKey, state) => {
    dispatch({
      type: "UPDATE_STORAGE_BY_KEY",
      state,
      stateKey,
    });
  };
}

export function _updateStorage(dispatch) {
  return (state) => {
    dispatch({
      type: "UPDATE_STORAGE",
      state,
    });
  };
}

export function _deleteStorage(dispatch) {
  return (lsKey) => {
    dispatch({
      type: "DELETE_STORAGE",
      lsKey,
    });
  };
}

export function _updateKey(dispatch) {
  return (lsKey, stateUpdates = {}) => {
    dispatch({
      type: "UPDATE_KEY",
      lsKey,
      stateUpdates,
    });
  };
}

export function _setCurrentKey(dispatch) {
  return (lsKey) => {
    dispatch({
      type: "SET_CURRENT_KEY",
      lsKey,
    });
  };
}

import {
  _getState,
  _setLocalStorage,
  _clearLocalStorage,
  _debouncedSetLocalStorage,
} from "./useLocalStorage.utils";

export default function localStorageReducer(state, action) {
  switch (action.type) {
    case "CREATE_STORAGE": {
      const { lsKey, state: defaultState } = action;
      const { defaultKey } = state;

      const _state = _getState(lsKey, defaultState, { defaultKey });

      _setLocalStorage(lsKey, _state);

      return _state;
    }

    case "UPDATE_STORAGE": {
      const { lsKey } = state;
      const { state: _state } = action;

      const updatedState = {
        ...state,
        ..._state,
      };

      //since certain actions cause a substantial amount of rerenders per ms, it's best to defer access to local storage by debouncing
      _debouncedSetLocalStorage(lsKey, updatedState);

      return updatedState;
    }

    case "UPDATE_STORAGE_BY_KEY": {
      const { lsKey } = state;
      const { state: _state, stateKey } = action;

      const updatedState = {
        ...state,
        [stateKey]: _state,
      };

      _debouncedSetLocalStorage(lsKey, updatedState);

      return updatedState;
    }

    case "DELETE_STORAGE": {
      const { lsKey } = action;
      const { defaultKey } = state;

      if (lsKey === defaultKey) return state;

      _clearLocalStorage(lsKey);

      return _getState(defaultKey);
    }

    case "SET_CURRENT_KEY": {
      const { lsKey } = action;

      return _getState(lsKey);
    }

    //update keys in KEYS
    case "UPDATE_KEY": {
      const { stateUpdates, lsKey } = action;
      const { lsKey: lsKeyPrev, defaultKey } = state;

      if (lsKey === lsKeyPrev) return state;
      if (lsKeyPrev !== defaultKey) _clearLocalStorage(lsKeyPrev); //clear storage with previous key, unless it is the default key

      const _state = _getState(lsKey, state, { ...stateUpdates, lsKey });
      _setLocalStorage(lsKey, _state);

      return _state;
    }

    //useful for when you don't want to update the localStorage
    case "UPDATE_STATE": {
      return action.state;
    }

    default: {
      throw new Error(`Unhandled action type: ${action.type}`);
    }
  }
}


export function _getState(lsKey, defaultState, overwrites = {}) {
  const _state = _getLocalStorage(lsKey, defaultState);

  const state = { ..._state, ...overwrites, lsKey };

  return state;
}

export function _getKeys(key) {
  const _keys = Object.keys(localStorage);
  return _keys.includes(key) ? _keys : [key, ..._keys];
}

export function _getLocalStorage(key, defaultState) {
  const valueInLocalStorage = window.localStorage.getItem(key);
  return JSON.parse(valueInLocalStorage) ?? defaultState;
}

export function _setLocalStorage(key, state) {
  window.localStorage.setItem(key, JSON.stringify(state));
}

export const _debouncedSetLocalStorage = debounce(_setLocalStorage, 100);

export function _clearLocalStorage(key) {
  window.localStorage.removeItem(key);
}

export interface IViewBoxProps {
  x: number;
  y: number;
  zoom: number;
  width: number;
  height: number;
  activeNodeId?: string;
}

type TViewBoxReturn = [
  { viewBox: string; viewBoxProps: IViewBoxProps },
  (arg0: Partial<IViewBoxProps>) => void
];

export default function useViewBox(
  defaultState: IViewBoxProps
): TViewBoxReturn {
  const [viewBoxProps, _configsDispatch] = useLocalStorage(
    "_viewboxConfigs",
    defaultState
  );

  const viewBox = getViewBox(viewBoxProps);
  const updateViewBox = _updateStorage(_configsDispatch);

  return [{ viewBox, viewBoxProps }, updateViewBox];
}

function getViewBox(viewBoxProps: IViewBoxProps) {
  const { x, y, width, height, zoom } = viewBoxProps;

  const xyOffset = 2 ** -zoom;
  const _x = x - (width / 2) * xyOffset;
  const _y = y - (height / 2) * xyOffset;

  const whOffset = 2 ** zoom;
  const _w = width / whOffset;
  const _h = height / whOffset;

  return [_x, _y, _w, _h].join(" ");
}

const useElementMeasure = (
	elRef: React.RefObject<any>,
	effectDeps: unknown[] = []
) => {
	const [{ width, height }, setMeasure] = useState(() => {
		const element = elRef?.current;

		return {
			width: element ? element.clientWidth : 0,
			height: element ? element.clientHeight : 0,
		};
	});

	const measure = useCallback(() => {
		const element = elRef?.current;
		if (!element) {
			return;
		}

		setMeasure({
			width: element.clientWidth,
			height: element.clientHeight,
		});

	}, [elRef, ...effectDeps]);

	useEffect(() => {
		measure();

		window.addEventListener("resize", measure);

		return () => {
			window.removeEventListener("resize", measure);
		};
	}, [measure]);

	return [width, height];
}

var total = value.reduce((prev, next)=>{
  	return prev +(next.quantity * this.productMap(next.productId).price)
},0 )

import { Knex } from "knex";

export async function seed(knex: Knex): Promise<void> {
    await knex('students').del();
    await knex('teachers').del();

    const [teacher_id] = await knex.insert({
        name: "Bob",
        date_of_birth: "1970-01-01"
    }).into('teachers').returning('id');

    return await knex.insert([{
        name: "Peter",
        level: 25,
        date_of_birth: "1995-05-15",
        teacher_id: teacher_id
    },{
        name:"John",
        level: 25,
        date_of_birth: "1985-06-16",
        teacher_id: teacher_id
    },{
        name:"Simon",
        level: 25,
        date_of_birth: "1987-07-17",
        teacher_id: null
    }
    ]).into('students');
};

yarn knex  seed:make -x ts create-teachers-and-students

export async function up(knex: Knex) {
    if(await knex.schema.hasTable('teachers')){
        await knex.schema.alterTable('teachers',(table)=>{
            table.renameColumn("name","teacher_name");
            table.decimal("level",3).alter();
        });  
    }
};

export async function down(knex: Knex) {
    if(await knex.schema.hasTable("teachers")){
        await knex.schema.alterTable('teachers',(table)=>{
            table.renameColumn("teacher_name","name");
            table.string("level").alter();
        });
    }
};

yarn knex migrate:make create-memos

import { Knex } from "knex";

export async function up(knex: Knex)  {
    if(!await knex.schema.hasTable("students")){
        await knex.schema.createTable("students",(table)=>{
            table.increments();
            table.string("name");
            table.string("level");
            table.date("date_of_birth");
            table.integer("teacher_id").unsigned();
            table.foreign('teacher_id').references('teachers.id');
            table.timestamps(false,true);
        });
    }
};

export async function down(knex: Knex){
    await knex.schema.dropTableIfExists("students");
};

import dotenv from 'dotenv';
dotenv.config();

module.exports = {

  development: {
    debug: true,
    client: "pg",
    connection: {
      database: process.env.DB_NAME,
      user: process.env.DB_USERNAME,
      password: process.env.DB_PASSWORD
    },
    pool: {
      min: 2,
      max: 10
    },
    migrations: {
      tableName: "knex_migrations"
    }
  },

  staging: {
    client: "pg",
    connection: {
      database: process.env.DB_NAME,
      user: process.env.DB_USERNAME,
      password: process.env.DB_PASSWORD
    },
    pool: {
      min: 2,
      max: 10
    },
    migrations: {
      tableName: "knex_migrations"
    }
  },

  production: {
    client: "pg",
    connection: {
      database: "my_db",
      user: "username",
      password: "password"
    },
    pool: {
      min: 2,
      max: 10
    },
    migrations: {
      tableName: "knex_migrations"
    }
  }

};

yarn add knex @types/knex pg @types/pg
yarn knex init -x ts
yarn add dotenv @types/dotenv

{
    "sqltools.connections": [
        {
            "previewLimit": 50,
            "server": "localhost",
            "port": 5432,
            "driver": "PostgreSQL",
            "name": "memo_wall",
            "database": "memo_wall",
            "username": "junowong",
            "password": "gfHK$dgm6501"
        }
    ]
}

test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});

test('object assignment', () => {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1, two: 2});
});

`toBeNull matches only null
toBeUndefined matches only undefined
toBeDefined is the opposite of toBeUndefined
toBeTruthy matches anything that an if statement treats as true
toBeFalsy matches anything that an if statement treats as false`

yarn add --dev jest
yarn add --dev typescript ts-jest @types/jest @types/node ts-node ts-node-dev
yarn ts-jest config:init

import {Client} from 'pg';
import dotenv from 'dotenv';
dotenv.config();

export const client = new Client({
    database: process.env.DB_NAME,
    user: process.env.DB_USERNAME,
    password: process.env.DB_PASSWORD
});

client.connect();

/--------.env file ------------/
DB_NAME=memo-wall
DB_USERNAME=gordon
DB_PASSWORD=gordon

let sessionMiddleware = expressSession({
  secret: 'Tecky Academy teaches typescript',
  resave: true,
  saveUninitialized: true,
});

app.use(sessionMiddleware);

io.use((socket, next) => {
  let req = socket.request as express.Request;
  let res = req.res!;
  sessionMiddleware(req, res, next as express.NextFunction);
});

io.on('connection', function (socket) {
    if(!socket.request.session.user){
        socket.disconnect()
    }
});

async function logout(req:express.Request,res:express.Response){
    if(req.session){
        delete req.session['user'];
    }
    res.redirect('/login.html');
}

import {Request,Response,NextFunction} from 'express';

export function isLoggedIn(req:Request,res:Response,next:NextFunction){
    if(req.session?.['user']){
        next();
    }else{
        res.redirect('/login.html');
    }
}

app.post('/apple',(req,res)=>{
    // logic of adding apple.
    if(req.session){
        io.to(`user-${req.session['user'].id}`).emit("new-apple","Congratulations! New Apple Created!");
    }
    res.json({updated:1});
});

io.on('connection', function (socket) {
    ....
    if(socket.request.session['user']){
        socket.join(`user-${socket.request.session['user'].id}`);  
        // One common way is to join the socket to a room named by the `user.id` or other group information.
     }
});

import expressSession from 'express-session';
const app = express();

// Add this line
app.use(expressSession({
    secret: 'Tecky Academy teaches typescript',
    resave:true,
    saveUninitialized:true
}));

const sessionMiddleware = expressSession({
    secret: 'Tecky Academy teaches typescript',
    resave:true,
    saveUninitialized:true,
    cookie:{secure:false}
});

app.use(sessionMiddleware);

io.use((socket,next)=>{
    let req = socket.request as express.Request
    let res = req.res as express.Response
    sessionMiddleware(req, res, next as express.NextFunction
});
//...
io.on('connection', function (socket) {
    // You can set any values you want to session here.
    const req = socket.request as express.Request;
    req.session['key'] = 'XXX';
    // There is no auto save for session.
    socket.request.session.save();

    // You can also send data using socket.emit() although it is not very useful
    socket.emit('any-key','values');
    socket.on("disconnect",()=>{
        //... rest of the code
    })
});

import {Request,Response} from 'express';
import express from 'express';

const app = express();
app.use(express.urlencoded({extended:true}));
app.use(express.json());

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "lib": ["es6", "dom"],
        "sourceMap": true,
        "allowJs": true,
        "jsx": "react",
        "esModuleInterop":true,
        "moduleResolution": "node",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": true
    },
    "exclude": [
        "node_modules",
        "build",
        "scripts",
        "index.js"
    ]
}

import expressSession from 'express-session';
const app = express();

// Add this line
app.use(expressSession({
    secret: 'Tecky Academy teaches typescript',
    resave:true,
    saveUninitialized:true
}));

import express from 'express';
import {Request,Response} from 'express';

const app = express();

app.get('/',function(req:Request,res:Response){
    res.end("Hello World");
})

const PORT = 8080;

app.listen(PORT, () => {
    console.log(`Listening at http://localhost:${PORT}/`);
});

import express from 'express';
import http from 'http';
import {Server as SocketIO} from 'socket.io';

//....
const app = express();
const server = new http.Server(app);
const io = new SocketIO(server);

io.on('connection', function (socket) {
    console.log(socket);
});
//....
const PORT = 8080;
server.listen(PORT, () => {
    console.log(`Listening at http://localhost:${PORT}/`);
});

import { useSelector, TypedUseSelectorHook } from "react-redux";
// Import type of state 
// Import {RootState} from '../store'

export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

{
  "editor.formatOnSave": true,
  "typescript.tsdk": "./node_modules/typescript/lib",
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

const { scrollTop, offsetHeight } = document.documentElement;
const { innerHeight } = window;
const bottomOfWindow = Math.round(scrollTop) + innerHeight === offsetHeight;

if (bottomOfWindow) {
  console.log('Bottom of window');
}

    private resetTheForm(form: FormGroup): void {
      const elements = Object.values(form.controls);
      elements.forEach(element => {
        if (element instanceof FormControl) {
          element.reset();
        } else if (element instanceof FormGroup) {
          this.resetTheForm(element);
        }
      });
    }

   /*
    --------------------------
   */
    ** Pending **
  -Methods:
call(), apply(), bind()



  **

  Book :> The Principle of Object oriented Javscript

    **
   : Dereferencing Objects //Is used to Clear the memory on browser           engine.
var object1 = new Object();
// do something
object1 = null;
    // dereference  
   **
    
    **
    : Deleting a value from Object.
    > delete objName.key;
    **
      
    **
    : Function Example -
  function reflect(value) {
    return value;
  }
// is the same as
var reflect = new Function("value", "return value;"); 
     **
        
      **
  arrName['push']('3'); //This is also valid ( using bracket              notation )
       **

      ** // It will store the values as an Object ( String ).
  let nameVariable = new String();
nameVariable.fname = 'Karan';
nameVariable.lname = 'Singh';
       **
           
       ** hasOwnProperty **
    let obj = { fname: "Karan", lname: "Singh" }

    > console.log('fname' in obj)  //true
    > console.log('lname' in obj) //true

    > console.log('toString' in obj)  //true 
    // ( Inbuilt methods will also return true )

    > console.log(obj.hasOwnProperty('toString')) //False
    **
           
       **
           //Ways to access Properties in Object
         > Object.keys(objName); //Will return keys
         > Object.values(objName); //Will return values 
  
       **
       //To check if Properties are Enumerable                                                (propertyIsEnumerable).
    > (objName.propertyIsEnumerable(key)); //true or false

      Object.defineProperty(obj, prop, descriptor) //Syntax
       **
        //We can change the default state of the Object.

        var person1 = {};
       **
      Object.defineProperty(person1, "name", {
        value: "Nicholas",
        enumerable: true,
        configurable: true,
        writable: true
      }); //It will create 'name' in person1 Object with 'descriptor'.

      Object.defineProperty(person1, "name", {
      enumerable: false
      }); //We can define in Single Lines as well ( Depending upon our need )

      Object.defineProperty(person1, 'property1', {
        value: 42,
        writable: false
      });// 'property1' can not be overwritten.


      **
     //Preventing Object Modification      
       //Syntax
      > Object.preventExtensions(person1); //false
            /*It will not allow to add new properties to object 'person1'.
            */
      //isExtensible() (How to check?)
      > console.log(Object.isExtensible(obj)); //It will tell whether it's               extensible or not ( true / false )

**
       //Freezing the Object. ( Cant not add/remove. ( read-only ) )
        > Object.feeze(objName);

        //isFrozen() ( How to Check? )
       > console.log(Object.isFrozen(objName)); //Will return true or false.


   ** //Three methods which does not allow mathods to add/remove properties.
        > Object.preventExtensions(objName)
        > Object.seal(objName)
        > Object.freeze(objName)
        //To how to check, Use these methods.   
        console.log(Object.isExtensible(person1));
        console.log(Object.isSealed(person1));
        console.log(Object.isFrozen(person1));



     **//Using Prototypes with Constructors

          function Person(name){
            this.name = name;
          }

          Person.prototype.sayName = function(){
            return this.name;
          }

          let karan = new Person("Jaskaran");













/*
 ---------------------------------------------------------------------
*/

--------------------
                                //Number


Number.isNaN(24);
// False.

let number1 = -Infinity;
let number2 = Infinity;  
--------------------
                                   //String


String(77).padStart(6,0);
// 000077


let str = 'Jaskaran Singh Pannu';
str.repeat(10)

console.log("Karan- ".repeat(4));
//Karan- Karan- Karan- Karan-
-------------------
-------------------

-------------------
                                   //Object
  
  
let {name , age} = {name: "Faraji", age: 23};
console.log(name , age);
// → Faraji , 23


let obj = { name  : 'karan' };
consol.log( 'name' in obj);
//true;

     // Prototype ( Just to check if the certain properties are there.
Object.prototype.addNewMethod = function(){ return "Yeah"};
console.log('addNewMethod' in Object);
//true;
console.log('toString' in Object);
//true;

 //hasOwnProperty  ( It will just show the 'obj's properties ( code written ) , Not of it's parent ( Object).
let obj = { name : 'karan' };
obj.hasOwnProperty("name");
//true;
obj.hasOwnProperty('toString');
//False;

 //Get  // Set //Statics.
let obj = {
  //keyword 'get'
  get powerOne(){ return "Power 1" },
  powerTwo : function(){
    return "Power2, Old School."
  }
};
obj.powerOne;
// OR. (The Only difference is, If we are using keyword "get", We don't have to use "()" while calling any function.
obj.powerTwo();
------------------------
                                //Classes
class basics{
  constructor( name  ){
     this.name = name;
  }
  skillOne(skill){
    return this.name + " is " + skill
  }
}

class ChildOne extends basics{
  constructor( name , age , country ){
    super( name )
    this.age = age;
    this.country = country;
  }
  skillTwo(){
    return " Skill Two here... "
  }
}
----------------------
//instanceof
let arr = {};
console.log(arr instanceof Object)
// true.
let arr2 = []
console.log(arr2 instaceof Object);
// true ( Object is main base for all the non-primitives data types ( functions / arrays ).
------------------------
//Object.freeze
let object = Object.freeze({value: 5});
object.value = 10;
console.log(object.value);
// → 5
-----------------------
                               //HOF
  //Data.
const companies = [
  {name: "Company One", category: "Finance", start: 1981, end: 2005},
  {name: "Company Two", category: "Retail", start: 1992, end: 2008},
  {name: "Company Three", category: "Auto", start: 1999, end: 2007},
  {name: "Company Four", category: "Retail", start: 1989, end: 2010},
  {name: "Company Five", category: "Technology", start: 2009, end: 2014},
  {name: "Company Six", category: "Finance", start: 1987, end: 2010},
  {name: "Company Seven", category: "Auto", start: 1986, end: 1996},
  {name: "Company Eight", category: "Technology", start: 2011, end: 2016},
  {name: "Company Nine", category: "Retail", start: 1981, end: 1989}
];
const ages = [  10, 0,10, 40, 50 , 88, 9 , 20 ,89, 100 ,6];


//Sort
let sort = ages.sort((a , b ) => a - b );
sort = companies.sort( (a , b ) =>  a.start -b.start    )

//Reduce , Suming the Arrays.
let totatAges = ages.reduce(( total, item )=> total + item, 0 );
let totalYears = companies.reduce(( total , item ) => total + (item.end - item.start)
,0)

let out = nums.reduce(( firstItem , singleItem ) => {
 let max = firstItem > singleItem ? firstItem : singleItem;
 return max; 
})


// There is another method called => "Find" 

                        /* "Every" */ ( it return boolean value ) 
//It will test whether all elements in the array pass the provided function.
let output = students.every((item)=>{
  return item.grade >= 100;
})

                       /* "SOME"  */  ( it return boolean value )
//Similar to every, but returns true if ANY of the array elements pass the test function
let output = students.some((item)=>{
  return item.grade >= 100;
})



//Combined
let combined = ages
                   .sort((a,b) => a-b)
                   .filter( item => item <= 10 )
                   .map( item => item * 1 ) 
                   .reduce( (total,item)=> total + item ,0 );

//Destructing 
//Objects example
let  {name, age, ...evrythingElse} = {  name : 'Jaskaran',  age : 34, country : "U.S", cool : true }
console.log(name); //Jaskaran
console.log(age); //34
console.log(evrythingElse); // { country:'U.S', cool: true }

//Array Example
let arr = ["Jaskaran","Singh","Pannu"];
let  [firstName, ...everythingElse ]  = arr;
console.log(everythingElse); // ['Singh', 'Pannu']


//Param Destructing
let fullName = ({fN, lN }) =>{ return fN + " " + lN }

let objName = {
  fN : "Karan",
  lN :"Singh"
}

fullName(objName);



/* Async */


//1 way.
fetch("https://icanhazdadjoke.com/slack").then((res)=>{
        res.json().then((data)=>{
        console.log(data)
    })
});

//2nd Way
let link = "https://icanhazdadjoke.com/slack";
let xhr = new XMLHttpRequest();

xhr.open('GET',link, true);
xhr.send();

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
    console.log(xhr.responseText);
 }
}

typeof
type guards
As we’ve seen, JavaScript supports a typeof operator which can give very basic information about the type of values we have at runtime. TypeScript expects this to return a certain set of strings:

"string"
"number"
"bigint"
"boolean"
"symbol"
"undefined"
"object"
"function"

const extraInformationInput = new FormControl();

 this.extraInformationForm = new FormGroup({
      extraInformation: extraInformationInput,
    });

this.extraInformationForm.valueChanges.subscribe(
  change => {
    console.log('change triggered -> ', change);
  }
);
    

// By Maxi.

//Installing Bootstrap ( locally )
 > npm install bootstrap@3 --save


// Data Binding.
..> Output Data
/* 
1.String Interpolation :
Should be a string, Or can be converted to string.
*/
 <h3>My Name is {{ name }}  {{'Singh'}}   {{ lastName() }} </h3> 

/*
2. Property Binding :
*/
  ( [propert] ='data' )

.HTML
<button class="btn btn-primary" [disabled]="!allowNewServer">Click here</button> <b [innerText] = "allowNewServer">  </b>

.TS
  setTimeout(()=>{ this.allowNewServer = true;
  },2000)
// 'disabled' is the property here, We are toggling the boolean value to disable or enabled the between ( if it's true then it will be disabled else btn will be enabled. )


..< React to Events
 ( (event) = 'expression' )

/*
3. Two way Binding : 
*/
  ( [(ng Model)] = 'data' )

/* 
> Commands for npmp pack or Terminal.
*/

// Install Cmd ( Globally ).
npm install-g typescript  

//Adding Bootstrap.
npm install bootstrap --save



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


//Typescript
//Data types
string
number
boolean
string
string[]   //Array of Strings
number[]   //Array of Numbers
any[]      //Array of any Data type
undefined  //undefined
void       //undefined   or if the value won't be returned ( void ( khaali ) )
enum
any

let canBeOneOfTheseTwoType : string | boolean;  // The value can be "string" or "boolean".
let data : number | boolean | string = '980033' ; // Valyue can be 1/3 data types.
let data2 : any = "Jaskaran"; //Any type of data type can used. 

let mixArray:[string, number, string, boolean] = ["Jaskaran", 1996, "Singh", true]; //Structure has to be same.

enum Color {Red, Green, Blue};
let data: Color = Color.Red;   //Will return 0 
let data2: Color = Color.Blue; // Will return 2

//Default Parameter.
function check(a:string, b:string = '99'):string{
    return "Default Parameter"
}

//Optional Parameter.
function check(a:string, b? :string ):string{
    return " b is optional here "
}

//Having multiple data types and optional argument.
function check(n1: number | boolean , n2? :number | string) { 
  return "Optional Paramter and multiple Data types"
}

//Interface
interface IAPIResponse {
    name : string,
    age : number
}

function playerOne(): IAPIResponse {
    return {
        name : 'Jaskaran',
        age : 20
    }
}

function playerTwo(): IAPIResponse {
    return {
        name : "Karan",
        age : 26
    }
}

console.log(playerOne());
console.log( playerTwo());




             /*  --------------- Class 1 ------------------ */




//CMD commands for TSC.
-h, -help
-w, -watch
--pretty
--all
-v, --version
--init    // Initialize
-p, --project
-b, --build
-t, --target
-m, --module

//To Change from TS to JS.
tsc index.ts //It will output the new file in the same directory with "index.js"


       /*   --------------------  Class 2  ------------------------- */

// Module and Component
 
 module1
    ->component1-1
    ->component1-2
    ->component1-3
    ->component1-4

 module2
    ->component2-1
    ->component2-2
    ->component2-3
    ->component2-4

 module3
    ->component3-1
    ->component3-2
    ->component3-3
    ->component3-4
  // Components are small parts of module. And App is divided into multiple modules(  Parent )

Component:
    M : Data ( will control V & C )
    V : template ( .html )
    C : logic  ( .ts )


//Meta Data
@NgModule {   //@NgModular is called decorator
  //I s Module
}
export class{}

@Component {    //@Component is called decorator
  //Is a Component 
}
export class{}

@Injectable {   //@Injectable is called decorator
  //Is a Service
}
export class{}


//On Start
   1. main.ts --> App Module
   2. App Module --> 
     
     
 // Inserting as component    //Default set up.
<div app-products></div>  
@Component({
  selector: '[app-products]'
 }
           
//Inserting as a Class
<div class="app-products"></div>           
@Component({
  selector: '.app-products'
}



    /*   --------------------  Class 3  ------------------------- */ "{}" is a Class.

//Event Binding:
// .html
<button (click) ="willDoSomething();"></button>   //DOM to component.
//.ts

--------------------------------------
/*
 1. Property Binding:
//#CASE ( Passing the values/data from parent Component "App" to child component"Header" )
( PARENT ), 
*/
>app.module.ts
import { FormsModule } from '@angular/forms';
imports: [
  FormsModule
]

  {
     list = [
    { Name: "nike", Product: "Shoes" },
    { Name: "Apple", Product: "Phones" },
    { Name: "BB", Product: "Software" },
    { Name: "Samsung", Product: "Chips" },
  ]
 }

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

 >app.html
  <app-header [productsOne]="list"></app-header>
-------------------------
>header.html
    <tr *ngFor='let item of productsOne'>
      <td> {{item.Name}} </td>
      <td>  {{ item.Product }} </td>
    </tr>
-------------------------
 >header.ts
import {  Input } from '@angular/core';
{
  @Input()
  productsOne: any;
}

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

//#CASE ( Passing the values/data from Child Component "Header" to Parent component"App" )
/*
Event Binding:
*/
>header.html
<button class="btn" (click)="childButtonClicked();">ChildButton</button>
--------------------------------                                    
>header.ts
import {  Output, EventEmitter } from '@angular/core';
 {
     constructor() { 
     this.dataOne = new EventEmitter();
     }
   
     @Output()
     dataOne: EventEmitter<any>;

     childButtonClicked(){
         this.dataOne.emit({
           name : "Karan",
           age : "25"
         }); 
 }
--------------------------------

>app.html
<app-header (dataOne)="dataComingFromChild($event);" ></app-header>
   
---------------------------------
>app.ts                                    
  dataComingFromChild(data:any){
    console.log(data);
  }
-----------------------------------
  
To flow data one direction.
[ngModel] ='val' ; 

 To flow data both the direction.
[(ngModel)] ='val' ;  ( value will be binded )

   
     /* Directives
      1. Components as directives (simple/single component)
      2. Structural Directives
        ngIf
        [hidden]
        ngFor
        ngSwitch
      3. Attribute Directives
       [ngStyle]
       [ngClass]
      4. Custom Directives
      
     
     */
   
// Structural Directives:   
   
   /*
    ngIf
    [hidden]
    ngFor
    ngSwitch
   */
   
"*ngFor" is known as structure directive, As it changes the structure of the web page.   

//ngIF - Structural directive
<div *ngIf='condition'>
  Content will Render if condition is true
</div>
   
//ngClass   
 /*
 Add or Remove CSS classes ( using Logic )
 */

 /*   --------------------  Class 4  ------------------ */
//*ngIf
>> #Case   
header.html
<div>
  <div *ngIf="defaultBool">
    Data is in the First Slot
  </div> 
  <div *ngIf="!defaultBool">
    Data is in the Second Slot
  </div> 
 
  <button class="btn btn-block" (click)='toggleData()'>
    Click to Toggle
  </button>
 </div>
   
header.ts   
  defaultBool:boolean = true;
  toggleData(){
    this.defaultBool = !this.defaultBool;
  }
      ----------------------------------------------------
//Else-if   
 #case  
>header.html   
  <div *ngIf="defaultBool else toggleIDName">
    Data is in the First Slot
  </div> 

 <ng-template #toggleIDName>
  <div>
    Data is in the Second Slot
  </div> 
 </ng-template>
 
  <button class="btn btn-block" (click)='toggleData()'>
    Click to Toggle
  </button>   
   
> header.ts   
  defaultBool:boolean = true;
  toggleData(){
    this.defaultBool = !this.defaultBool;
  }
       ----------------------------------------------------
//[hidden] property: ( mostly used for Small parts )
   
.html
<div [hidden]='defaultHiddenValue'>
 Hidden Example </div>  	 
<button (click)="toggleHidden"> Click to hide </button>
   
.ts
   defaultHiddenValue:boolean = true;
   toggleHidden(){
     this.defaultHiddenValue = !this.defaultHiddenValue;
   } 
  
** The Hidden property will hide the stuff from the web page( Will be visible in Source Code ), Where as 'NgiF' will completely remove/add the Elements/element from DOM,   
      ----------------------------------------------------
// Ngswitch
  #syntax:
 <div [ngSwitch]='companiesList'>
      <p *ngSwitchCae="aws">AWS stuff </p>
      <p *ngSwitchCae="google">google stuff </p>
      <p *ngSwitchCae="MS">MS stuff </p>
      <p *ngSwitchCae="Applce">Applce stuff </p>
      <p *ngSwitchDefault="Defaul Value"> kites </p>
  </div>
   
 
.html
  <div [ngSwitch]='selectCourse'>
    <div *ngSwitchCase="'react'">react</div>
    <div *ngSwitchCase="'angular'">angular</div>
    <div *ngSwitchCase="'vue'">vue</div>
    <div *ngSwitchDefault> Default value..... </div>
  </div>   
<button (click)="reactCourse()">React Developer </button>
<button (click)="angularCourse()">Angular Dev </button>
<button (click)="vueCourse()">Vue Developer </button>  
   
.ts
   {
    selectCourse:string = '';

    reactCourse(){ this.selectCourse = "React"; }
    angularCourse(){ this.selectCourse = "Angular"; }
    vueCourse(){ this.selectCourse = "Vue"; }     
     }
   
      ----------------------------------------------------
      
 //Attribute Directives
      /*
      [ngStyle]
      [ngClass]
      */
      
      
// ngStyle: 
.html
<h1 [ngStyle]= "{ 'color' : selectedColorName }">
 "Some Text here";
</h1>
<button (click)="redColor()"> click to red it </button>
.ts
selectedColorName:string = 'gray'; //By default the color will be gray. 

 redColor(){
   this.selectedColorName = 'red';
 }  
 //We can change the color value dynamically as per our need.
   
   ----------------------------------------------------
// ngClass : attribute Directive.    
.html
  <h2 [ngClass] = "{ 'className1' : variableName == 'average', 'className2' : variableName == 'good' }" >
   {{ selectCourse }} :  {{variableName}}   // Will manipulate the classes depending upon 'variableName' value.
  </h2>

.ts
  variableName:string = "average"; //Default value.
//We can change the variableName value dynamically as per our need, To 'average' or 'good' or anything and then set that value in HTML attribute value. 
 
   ----------------------------------------------------
   /*
 //Custom directives   
    :When inbuilt directives are not sufficient, We create       our own directives as per our need. 
    
     #syntax: 
     @Directive()  //decorator
     class myDirectiveName {
       //class
     }
   */
   
   > ng g directive myCustomDirectiveName //CLI

customDirective.ts
import { ElementRef, HostListener } from '@angular/core';

  constructor( private eleRef: ElementRef ) { 
   }
   @HostListener('mouseenter') onEnter() {
     this.eleRef.nativeElement.style.background = 'gray';
     this.eleRef.nativeElement.style.cursor = 'pointer';
   }
   @HostListener('mouseleave') onLeave(){
    this.eleRef.nativeElement.style.background = 'initial';
   }

header.html
  <div>
    <ol>
      <li appMyCustomDirective>Nike</li>
      <li appMyCustomDirective>UA</li>
      <li appMyCustomDirective>Roots</li>
    </ol> 
  </div>
   
   

  /*
                     PIPES
   : PIPEs are used to improve/increase the functionaility of the     app/page.
   
   Types:
   1.Inbuilt Pipes
   2.Custom Pipes.
  */

1.Inbuilt Pipes
#example 
> header.ts

dob = new Date();
price = 10;
name = 'jaskaran'
 
 > header.html

  <ol>
 <li> {{ name | uppercase }} </li>
 <li> {{ name | lowercase }} </li>
 <li> {{ name | titlecase }} </li>
  </ol> 

  <div> 
    Short date formate: {{ dob | date: 'short' }}   <br>
    Full date formate: {{ dob | date: 'full' }}    <br>
    Custom Format1: {{ dob | date: 'MM/dd/YYYY' }} <br>
    Custom Format2: {{ dob | date: 'dd-MM-YYYY' }} <br>
  </div>

 <div>
   currencyDollar (default) :  {{ price | currency }}  <br>
   currency Pound :  {{ price | currency:'GBP' }}  <br>
   currency Rupee :  {{ price | currency :'INR' }}  <br>
 </div>

> 2.Custom Pipes.
 - cli
 ng g pipe customPipeName

#syntax: ( CLI will automatically generate the structure for us. )

 @Pipe()
 export class customPipeName{
 }

#Example 1.
.custom.pipe.ts
export class CustomPipePipe implements PipeTransform {
  transform(value: string ): string {
    return value + "-Extra String..........";
 //value is the "actual" item to work on.
  }
}

header.html
 {{ 'Jaskaran' | customPipe }}
   //Output will 'Jaskaran-Extra String..........' 

#Example 2.
> footer.ts
  list = [
    { Name: "nike", grade: "A" },
    { Name: "Apple", grade: "B" },
    { Name: "Samsung", grade: "A" },
  ]

> gradingPipe.ts
  transform(value:any, ...args: any[]): any {
    //Value will be the complete data ( "list" ).
     //args will be values provided'Arguments' ( right side of pipe name in HTML ),
    const grade = args[0];
    const filteredStudents = value.filter(( item:any )=>{
      return (item.grade == grade);
    })
    return filteredStudents;
  }

> footer.html
 <tbody>
   <tr *ngFor="let item of list  | filterGrades:'A' ">
         <td> {{ item.Name | uppercase }}  </td>
       <td>       {{ item.grade}}  </td>
   </tr>
 </tbody>


//Services
    :Is used to share the data and the logic between different components. 

     /*   --------------------  Class 5  ---------------- */
   
   
     
    
    
     /* --------------------  Class 6  ------------------ */



     

function removeItem<T>(arr: Array<T>, value: T): Array<T> { 
  const index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

enum Colors {
  'black',
  'brown',
  'red',
  'orange',
  'yellow',
  'green',
  'blue',
  'violet',
  'grey',
  'white'
}

function EnumKeys<T>(enumType: T): (keyof T)[] {
  return (Object.keys(enumType) as Array<keyof T>)
      .filter(value => isNaN(Number(value)) !== false);
}

export const COLORS = EnumKeys(Colors)
// COLORS = ['black','brown','red','orange','yellow','green','blue','violet','grey','white']

type FooFilter<T> = { type: 'Foo', foo: T }
type BarFilter<T> = { type: 'Bar', bar: T }
type Filter = FooFilter<unknown> | BarFilter<unknown>
type FilterShapeBase = [string, Filter][]

type ValueOf<F extends Filter> = 
F extends FooFilter<infer T> ? T
: F extends BarFilter<infer T> ? T
: never

type FilterValues<FilterShape extends FilterShapeBase> = FilterShape extends Array<infer U>
    ? U extends [infer K, infer F] 
        ? K extends string
            ? F extends Filter
                ? { [Key in K]: ValueOf<F> }
                : never
            : never
        : never
    : never

function f<FilterShape extends FilterShapeBase>(filters: FilterShape): FilterValues<FilterShape> {
    const tuples = filters.map(([key, filter]) => filter.type === 'Foo' ? [key, filter.foo] : [key, filter.bar])
    return Object.fromEntries(tuples)
}

/*
HOW TO CONFIGURE THE FILTER FilterShape:

type FilterShape = [
  ['foo_in', StringSearchFilter],
  ['bar_equals', EnumSelectOneFilter<MyEnum>]
]

const filters = [
  ['foo_in', { ... }],
  ['bar_equals', { ... }],
]
*/

  constructor() {
    this.hotelForm = new FormGroup({
      name: new FormControl('', [
        Validators.required,
        Validators.minLength(5),
        Validators.maxLength(30),
      ]),
      city: new FormControl('', [
        Validators.required,
        Validators.pattern(/^[a-zA-Z áÁÍíéőöüéűŐÉÖÜ]{5,30}$/),
      ]),
      category: new FormControl('', Validators.required),
    });
  }

  ngOnInit(): void {}

  saveHotel(): any {
    const submittedHotel = this.hotelForm.value;
    console.log(submittedHotel);

    return submittedHotel;
  }
}
<section class="table-holder">
  <button id="get-button" (click)="getPostList()">Get Blog List</button>
  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Text</th>
        <th>Category</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-row" *ngFor="let post of blogPosts; let i = index">
        <td>{{ post.title }}</td>
        <td>{{ post.text }}</td>
        <td>{{ post.category }}</td>
        <td>
          <button id="delete-button" (click)="deletePost(post.id)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</section>

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:’’;
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

  const target = useRef<HTMLDivElement>(null);

  const listenScrollEvent = (event) => {
    const toLeft = event.deltaY < 0 && target.current.scrollLeft > 0;
    const toRight =
      event.deltaY > 0 &&
      target.current.scrollLeft <
        target.current.scrollWidth - target.current.clientWidth;

    if (toLeft || toRight) {
      event.preventDefault();
      event.stopPropagation();

      target.current.scrollLeft += event.deltaY;
    }
  };

  return (
    <div ref={target} onWheel={listenScrollEvent}>

const IMAGE = ['jpg', 'jpeg', 'jpe', 'tiff', 'tif', 'png', 'bmp', 'gif', 'webp', 'svg', 'ai', 'psd', 'cdr', 'eps', 'ico'];
    const AUDIO = ['aif', 'cda', 'mid', 'mp3', 'mpa', 'ogg', 'wav', 'wma', 'wpl'];
    const ARCHIVE = ['7z', 'arj', 'deb', 'pkg', 'rar', 'rpm', 'tar', 'z', 'zip'];
    const EMAIL = ['email', 'eml', 'emlx', 'msg', 'oft', 'ost', 'pst', 'vcf'];
    const WEBSITE = ['asp', 'cer', 'cfm', 'cgi', 'pl', 'css', 'htm', 'html', 'js', 'jsp', 'part', 'php', 'rss', 'xhtml'];
    const DOCUMENT = [
        'key',
        'odp',
        'pps',
        'ppt',
        'pptx',
        'ods',
        'xls',
        'xlsm',
        'xlsx',
        'doc',
        'docx',
        'odt',
        'pdf',
        'rtf',
        'tex',
        'txt',
        'wpd',
    ];

console.log('Something');

import { Directive, ElementRef, HostBinding, HostListener } from "@angular/core";

@Directive({
    selector: '[appDropdown]'
})

export class DropdownDirective {
@HostBinding('class.open') isActive = false;

@HostListener('document:click', ['$event']) onClick(event: Event) {
        this.isActive = this.elRef.nativeElement.contains(event.target) ? !this.isActive : false;
    }

    constructor(private elRef: ElementRef) {}
}

import { Directive, ElementRef, Renderer } from '@angular/core';

@Directive({
    selector: '[appChbgcolor]'
})
export class ChangeBgColorDirective {

    constructor(private el: ElementRef, private renderer: Renderer) {
        this.ChangeBgColor('red');
    }

    ChangeBgColor(color: string) {

        this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

// Get path to resource on disk
 const onDiskPath = vscode.Uri.file( 
   path.join(context.extensionPath, 'css', 'style.css')
);
// And get the special URI to use with the webview
const cssURI = panel.webview.asWebviewUri(onDiskPath);

const { createCanvas, loadImage } = require("canvas");
const canvas = createCanvas(200, 200);

//TODO: replace with initials extraction logic.
var initials = "MM";

// Create a rectangular canvas which will become th image.
var context = canvas.getContext("2d");
canvas.width = canvas.height = 100;

// Draw the circle in the background using the randomColor.
context.fillStyle = randomColor;
context.beginPath();
context.ellipse(
  canvas.width / 2,
  canvas.height / 2, // Center x and y.
  canvas.width / 2,
  canvas.height / 2, // Horizontal and vertical "radius".
  0, // Rotation, useless for perfect circle.
  0,
  Math.PI * 2 // from and to angle: Full circle in radians.
);
context.fill();

context.font = "700 " + canvas.height / 3 + "px Helvetica";
context.fillStyle = fontColor;
// Make the text's center overlap the image's center.
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(initials, canvas.width / 2, canvas.height / 2);

// Show the image to the world.
console.log(canvas.toDataURL());
const fs = require("fs");
const out = fs.createWriteStream(__dirname + "/test.png");
const stream = canvas.createPNGStream();
stream.pipe(out);
out.on("finish", () => console.log("The PNG file was created."));

function getColors() {
  var randomColor =
    "#" + (0x1000000 | (Math.random() * 0xffffff)).toString(16).substr(1, 6);

  var fontColor = contrast(randomColor);

  return { background: randomColor, font: fontColor };
}

function rgbToPerceivedLuminance({ r, g, b }) {
  // used YIQ color space
  // Y component [0-255]
  return (r * 299 + g * 587 + b * 114) / 1000;
}

function hexToRgb(hex) {
  if (!hex || hex === undefined || hex === "") {
    return undefined;
  }

  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

  return result
    ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16),
      }
    : undefined;
}

function contrast(colorHex, threshold = 128) {
  if (colorHex === undefined) {
    return "#000";
  }

  const rgb = hexToRgb(colorHex);

  if (rgb === undefined) {
    return "#000";
  }

  return rgbToPerceivedLuminance(rgb) >= threshold ? "#000" : "#fff";
}

String.prototype.interpolate = function(params) {
  const names = Object.keys(params);
  const vals = Object.values(params);
  return new Function(...names, `return \`${this}\`;`)(...vals);
}

const template = 'Example text: ${text}';
const result = template.interpolate({
  text: 'Foo Boo'
});
console.log(result);

// app.component.ts

import { Component, OnInit } from '@angular/core';
import {  FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';

const UploadURL = 'http://localhost:3000/api/upload';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Upload a File';

  public uploader: FileUploader = new FileUploader({url: URL, itemAlias: 'photo'});

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
         console.log('FileUpload:uploaded:', item, status, response);
         alert('File uploaded successfully');
     };
 }
}

// app.component.ts

import { Component, OnInit } from '@angular/core';
import {  FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';

const UploadURL = 'http://localhost:3000/api/upload';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Upload a File';

  public uploader: FileUploader = new FileUploader({url: URL, itemAlias: 'photo'});

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
         console.log('FileUpload:uploaded:', item, status, response);
         alert('File uploaded successfully');
     };
 }
}

//* Root Handler
app.get("/", (req, res) =>
  res.sendFile(path.join(__dirname + "/public/index.html"))
);

app.get('api/v1', (req,res) => res.json())

// Set static folder
app.use(express.static(path.join(__dirname, 'public')));

app.use('/api/v1', require('./routes/api/v1'))

app.listen(port, () => {
  console.log(`Server at: http://localhost:${port}`);
});

`Pomoci zpětné uvozovky vytvoříte speciální řetězec, který lze psát na více 
 řádků a dají se do něj vkládat výrazy ${ 1+2 }, proměnné ${ x+y }, pole ${ seznam[0] },
 objekty ${ uzivatelske.jmeno } a dokonce ihned volané funkce ${ function() { return x+y; }() } 
 nebo metody ${ "sidon".toUpperCase() }.`

      {arr.map(({ what ever you want to get from map }) => (
        <div>
			code goes here to display through html elements
        </div>
      ))}

// Bubble sorting using most of the important features in TypeScript

//* index.ts
import { Sorter } from './Sorter';
import { NumbersCollection } from './NumbersCollecton';

// Passing object into helper function to prepare variable for sorter when data is an array
const numbersCollection = new NumbersCollection([10, 3, -5, 0])
// Passing in object now instead of raw data
const sorter = new Sorter(numbersCollection)

sorter.sort()

console.log(numbersCollection.data)



//* Sorter.ts
import { NumbersCollection } from './NumbersCollecton';


export class Sorter {
  constructor(public collection: NumbersCollection)  {}

  sort(): void {
    const { length } = this.collection

    for (let i = 0; i < length; i++) {
      for (let j = 0; j < length - i - 1; j++) {
        if (this.collection.compare(j, j + 1)) {
          this.collection.swap(j, j+1)
        }
        // Only going to work if collecton is a string
        // If collection is a string, do this instead
        // ~~~logic to compare and swap characters in a string
      }
    }
  }
}



//* NumbersCollection.ts

/* Class Structure: */

// File: NumbersCollection.ts
// Class: NumbersCollection {
// Constructor: constructor(permissions, vars: types) {}
// Function(s) function(): type {
  // function body
// } //close function
// } // Close Class




export class NumbersCollection {
  // Require an array of numbers to be passed in and instantiated
  constructor(public data: number[]) {}
  // Need to get length of array
  get length(): number {
    return this.data.length
  }
  // decide if we need to swap 2 elements in a pair (bubble sort)
  /* is -1 > 0 ? If so, swap them
    /       |
  /        |
  [-1] [0] [5] [10] */
  compare(leftIndex: number, rightIndex: number): boolean {
    return this.data[leftIndex] > this.data[rightIndex]
  }

  swap(leftIndex: number, rightIndex: number): void {
    const leftHand = this.data[leftIndex]
    this.data[leftIndex] = this.data[rightIndex]
    this.data[rightIndex] = leftHand

  }

}

// const collection = new NumbersCollection([1,2,3])
// // since 'get' was used, length doesn't need to be called as a function (ex: collection.length())
// collection.length

array.sort((x, y) => +new Date(x.createdAt) - +new Date(y.createdAt));

// BASH
mkdir src
mkdir build
touch src/index.ts
touch .gitignore
touch README.md
tsc -y
npm init -y
npm install nodemon concurrently @types/express --save-dev

// package.json
...
"scripts": {
  "start:build": "tsc -w",
  "start:run": "nodemon ./build/index.js",
  "start": "concurrently npm:start:*"
},
...

// tsconfig.json
...
"outDir": "./build",
"rootDir": "./src",
...

// .gitignore
node_modules
*.env

// README.md
### Start
```bash
npm run start
```

// src/index.ts
import express from 'express'
const port = 3000
const app = express()

console.log("Hello, World!!!")

logSomething("This is a string that I'm logging")

app.listen(port, () => {
  console.log(`Listening on port ${port}`)
})

let rand = Math.random()
rand < 0.5 ? gender = 0 : gender = 1
this.name = `${gender ? '👩‍💼' : '👨‍💼'} ${faker.name.firstName(gender)} ${faker.name.lastName(gender)}`

import { User } from './User'
import { Company } from './Company'

// Instructions to every other class on how they can be an argument to 'addMarker'
// Interface acts as a gatekeeper for props. Does the prop qualify? If so, it can be an argument to the function
interface Mappable {
  location: {
    lat: number;
    lng: number;
  }
}

export class CustomMap {
  private googleMap: google.maps.Map;
  
  constructor(divId: string) {
    this.googleMap = new google.maps.Map(document.getElementById(divId), {
      zoom: 1,
      center: {
        lat: 0,
        lng: 0
      }
    })
  }

  // TS will compare User and Company types and only allow mutual props to be referenced in this function
  addMarker(mappable: Mappable): void {
    // typing 'mappable.' will use intellisense to show props that can be mapped here
    new google.maps.Marker({
      map: this.googleMap,
      position: {
        lat: mappable.location.lat,
        lng: mappable.location.lng
      }
    })
  }

}


// Company and User will be included below for reference
// Company.ts

import faker from 'faker'

export class Company {
  companyName: string;
  catchPhrase: string;
  location: {
    lat: number;
    lng: number;
  }

  constructor() {
    this.companyName = faker.company.companyName()
    this.catchPhrase = faker.company.catchPhrase()
    this.location = {
      lat: parseFloat(faker.address.latitude()),
      lng: parseFloat(faker.address.longitude())
    }

  }
}



// User.ts
import faker from 'faker'

// 'export' will export specific variables - imports will be done in curly braces
// 'export default' should nearly never be used in TypeScript - importing default exports won't use curly braces

export class User {
  name: string;
  location: {
    lat: number;
    lng: number;
  }

  // Objects aren't defined when the class is created so you can not assign values to keys without instantiating the object first
  constructor() {
    this.name = faker.name.firstName()
    this.location = {
      lat: parseFloat(faker.address.longitude()),
      lng: parseFloat(faker.address.latitude())
    } 
  }
}


// Execution - index files:
// index.ts
import faker from 'faker'

// 'export' will export specific variables - imports will be done in curly braces
// 'export default' should nearly never be used in TypeScript - importing default exports won't use curly braces

export class User {
  name: string;
  location: {
    lat: number;
    lng: number;
  }

  // Objects aren't defined when the class is created so you can not assign values to keys without instantiating the object first
  constructor() {
    this.name = faker.name.firstName()
    this.location = {
      lat: parseFloat(faker.address.longitude()),
      lng: parseFloat(faker.address.latitude())
    } 
  }
}

// index.html
// the 'DOCTYPE' heading will cause Google Maps to fail, not sure why
<!-- <!DOCTYPE html> -->
<html>
  <head charset="utf-8">
    <title>Maps</title>
  </head>
  <body>
    <div id="map" style="height: 100%"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNLrJhOMz6idD05pzfn5lhA-TAw-mAZCU"></script>
    <script src="./src/index.ts"></script>
  </body>
</html>

interface IIsObject {
  (item: any): boolean;
}

interface IObject {
  [key: string]: any;
}

interface IDeepMerge {
  (target: IObject, ...sources: Array<IObject>): IObject;
}

/**
 * @description Method to check if an item is an object. Date and Function are considered
 * an object, so if you need to exclude those, please update the method accordingly.
 * @param item - The item that needs to be checked
 * @return {Boolean} Whether or not @item is an object
 */
export const isObject: IIsObject = (item: any): boolean => {
  return (item === Object(item) && !Array.isArray(item));
};

/**
 * @description Method to perform a deep merge of objects
 * @param {Object} target - The targeted object that needs to be merged with the supplied @sources
 * @param {Array<Object>} sources - The source(s) that will be used to update the @target object
 * @return {Object} The final merged object
 */
export const deepMerge: IDeepMerge = (target: IObject, ...sources: Array<IObject>): IObject => {
  // return the target if no sources passed
  if (!sources.length) {
    return target;
  }

  const result: IObject = target;

  if (isObject(result)) {
    const len: number = sources.length;

    for (let i = 0; i < len; i += 1) {
      const elm: any = sources[i];

      if (isObject(elm)) {
        for (const key in elm) {
          if (elm.hasOwnProperty(key)) {
            if (isObject(elm[key])) {
              if (!result[key] || !isObject(result[key])) {
                result[key] = {};
              }
              deepMerge(result[key], elm[key]);
            } else {
              if (Array.isArray(result[key]) && Array.isArray(elm[key])) {
                // concatenate the two arrays and remove any duplicate primitive values
                result[key] = Array.from(new Set(result[key].concat(elm[key])));
              } else {
                result[key] = elm[key];
              }
            }
          }
        }
      }
    }
  }

  return result;
};

import { IOrdersRepository, OrderRepository } from './../repositories/OrderRepository';
import * as Knex  from 'knex';
import { IProductsRepository, ProductsRepository } from './../repositories/ProductsRepository';
import { IUserRepository, UserRepository } from './../repositories/UserRepository';

export interface IUnitOfWork {
    commit(): void;
    rollback(): void
}

// Requires a transaction scope injected on a per-request basis.
export class UnitOfWork implements IUnitOfWork {
    private context: Knex.Transaction;

    public readonly usersRepository: IUserRepository;
    public readonly ordersRepository: IOrdersRepository;
    public readonly productsRepository: IProductsRepository;

    public constructor(transactionContext: Knex.Transaction) {
        this.context = transactionContext;

        this.usersRepository = new UserRepository(transactionContext);
        this.ordersRepository = new OrderRepository(transactionContext);
        this.productsRepository = new ProductsRepository(transactionContext);
    }

    public commit(): void {
        this.context.commit();
    }

    public rollback(): void {
        this.context.rollback();
    }
}

  it.only('Only a Care Team member can view a "Patient Profile".', () => {
    const proUser = users.proUser();
    const confirmedPatient = users.patient();
    userBasePage.createProfessional(proUser, process.env.COUNTRYAPI);
    const patient = userBasePage.createPatient(
      process.env.LANGUAGE,
      false,
      confirmedPatient,
      process.env.COUNTRYAPI,
    );
    const practiseData = fixtureHelper.getFixture('practices').sharedPractice();
    const practice = userBasePage.createSharedPractice(proUser, practiseData);
    userBasePage.addPracticeToPatient(patient, practice.practiceId);
    const proUserTemplateList = userBasePage.createProUsers(
      4,
      proUser,
      practice.id,
    );

    CountryOfResidencePage.open().submitForm(
      process.env.COUNTRY,
      process.env.LANGUAGE,
    );
    IndexPage.login(proUser.email, proUser.password)
      .goToPatientsDashboard()
      .closeFirstUseModal();
    PatientDashboardPage.openUserProfile(patient.firstName);
    PatientProfilePage.closeFirstUseModal().clickOnProfileNavButton();
    NavigationBar.clickMainHeaderHamburgerButton();
    MenuBarFrame.clickMenuSignOutLink();
    IndexPage.login(
      proUserTemplateList[0].email,
      proUserTemplateList[0].password,
      proUserTemplateList[0],
      true,
    )
      .goToPatientsDashboard()
      .closeFirstUseModal();
    PatientDashboardPage.openUserProfile(patient.firstName);
    PatientProfilePage.closeFirstUseModal().clickOnProfileNavButton();
    NavigationBar.clickMainHeaderHamburgerButton();
    MenuBarFrame.clickMenuSignOutLink();
    IndexPage.login(
      proUserTemplateList[1].email,
      proUserTemplateList[1].password,
      proUserTemplateList[1],
      true,
    )
      .goToPatientsDashboard()
      .closeFirstUseModal();
    PatientDashboardPage.openUserProfile(patient.firstName);
    PatientProfilePage.closeFirstUseModal().clickOnProfileNavButton();
    NavigationBar.clickMainHeaderHamburgerButton();
    MenuBarFrame.clickMenuSignOutLink();
    IndexPage.login(
      proUserTemplateList[2].email,
      proUserTemplateList[2].password,
      proUserTemplateList[2],
      true,
    )
      .goToPatientsDashboard()
      .closeFirstUseModal();
    PatientDashboardPage.openUserProfile(patient.firstName);
    PatientProfilePage.closeFirstUseModal().clickOnProfileNavButton();
    NavigationBar.clickMainHeaderHamburgerButton();
    MenuBarFrame.clickMenuSignOutLink();
    IndexPage.login(
      proUserTemplateList[3].email,
      proUserTemplateList[3].password,
      proUserTemplateList[3],
      true,
    )
      .goToPatientsDashboard()
      .closeFirstUseModal();
    PatientDashboardPage.openUserProfile(patient.firstName);
    PatientProfilePage.closeFirstUseModal().clickOnProfileNavButton();
  });

const a = [
    {
        k: 1, me: false, prim: false
    }, {
        k: 2, me: false, prim: false
    }, {
        k: 3, me: false, prim: false
    }, {
        k: 4, me: false, prim: false
    }, {
        k: 5, me: true, prim: true
    }, {
        k: 6, me: false, prim: false
    }
]

a
    .sort((x, y) => (x.prim === y.prim) ? 0 : x.prim ? -1 : 1)
    .sort((x, y) => (x.me === y.me) ? 0 : x.me ? -1 : 1)

console.log(a)

function Test(): void {
 console.log('test')
 }