Karan-Palan

// Callbacks

function square(n) {
  return n * n;
}

function cube(n) {
  return n * n * n;
}

Karan-Palan

// Promise.all

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("P1 Sucess"), 3000);
});

const p2 = new Promise((resolve, reject) => {
  //setTimeout(() => resolve("P2 Sucess"), 1000);
  setTimeout(() => reject("P2 failure"), 1000);
});

Karan-Palan

// Promise.all Settled

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("P1 Sucess"), 3000);
});

const p2 = new Promise((resolve, reject) => {
  //setTimeout(() => resolve("P2 Sucess"), 1000);
  setTimeout(() => reject("P2 failure"), 1000);
});

Karan-Palan

// Promise.any

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => reject("P1 failure"), 3000);
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("P2 Sucess"), 5000);
});

Karan-Palan

// Real world usecase of Async await


const API_URL = "https://api.github.com/users/Karan-Palan"

async function handlePromise()  {
    const data = await fetch(API_URL);

    const jsonValue = await data.json()
    

Karan-Palan

import React, { useState, useEffect } from 'react';
import ProjectBuilder from 'musicblocks-v4-builder-framework';

interface BuilderWrapperProps {}

const BuilderWrapper: React.FC<BuilderWrapperProps> = (props) => {
  const [builderInstance, setBuilderInstance] = useState<ProjectBuilder | null>(null);

  useEffect(() => {
    // Initialize the Project Builder instance

Karan-Palan

import React from 'react';
import BuilderWrapper from './BuilderWrapper';

const App: React.FC = () => {
  return (
    <div>
      {/* Existing MusicBlocks Code */}
      <BuilderWrapper />
    </div>
  );

Karan-Palan

import React, { useState, useEffect } from 'react';
import ProjectBuilder from 'musicblocks-v4-builder-framework';
import { SpecificationAPI, SyntaxTreeAPI } from 'musicblocks-v4-programming-framework';

interface BuilderWrapperProps {}

const BuilderWrapper: React.FC<BuilderWrapperProps> = (props) => {
  const [builderInstance, setBuilderInstance] = useState<ProjectBuilder | null>(null);
  const [specificationAPI, setSpecificationAPI] = useState<SpecificationAPI | null>(null);
  const [syntaxTreeAPI, setSyntaxTreeAPI] = useState<SyntaxTreeAPI | null>(null);

Karan-Palan

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

interface PaletteProps {
  onItemClick: (item: any) => void;
}

const Palette: React.FC<PaletteProps> = (props) => {
  const [items, setItems] = useState<any[]>([]);

  useEffect(() => {

Karan-Palan

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

const Brick: React.FC<{ x: number; y: number; width: number; height: number }> = ({ x, y, width, height }) => {
  return (
    <rect x={x} y={y} width={width} height={height} fill="blue" />
  );
};

const SVGResize: React.FC = () => {
  const [brickSize, setBrickSize] = useState({ width: 100, height: 100 });