Javascript - Day 34

Promise.any

Note: If you haven't completed the Promise.all question, you should attempt that first.

" Promise.any() takes an iterable of elements (usually Promises). It returns a single promise that resolves as soon as any of the elements in the iterable fulfills, with the value of the fulfilled promise. If no promises in the iterable fulfill (if all of the given elements are rejected), then the returned promise is rejected with an AggregateError, a new subclass of Error that groups together individual errors. "

" If an empty iterable is passed, then the promise returned by this method is rejected synchronously. The rejected reason is an AggregateError object whose errors property is an empty array. "

Let's implement our own version of Promise.any(), a promiseAny function, with the difference being the function takes in an array instead of an iterable and AggregateErrors returned just have to return an array of error reasons, the message doesn't have to be set. Refer to the AggregateError constructor examples on MDN.

Be sure to read the description carefully and implement accordingly!

Examples

const p0 = Promise.resolve(42);
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(21);
  }, 100);
});

await promiseAny([p0, p1]); // 42

const p0 = new Promise((resolve) => {
  setTimeout(() => {
    resolve(42);
  }, 100);
});
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Err!');
  }, 400);
});

await promiseAny([p0, p1]); // 42

const p0 = new Promise((resolve) => {
  setTimeout(() => {
    reject(42);
  }, 400);
});
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Err!');
  }, 100);
});

try {
  await promiseAny([p0, p1]);
} catch (err) {
  console.log(e instanceof AggregateError); // true
  console.log(e.errors); // [ 42, "Err!" ]
}

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - Day 35

Squash Object

Implement a function that returns a new object after squashing the input object into a single level of depth where nested keys are "squashed" together with a period delimiter (.).

Examples

const object = {
  a: 5,
  b: 6,
  c: {
    f: 9,
    g: {
      m: 17,
      n: 3,
    },
  },
};

squashObject(object); // { a: 5, b: 6, 'c.f': 9, 'c.g.m': 17, 'c.g.n': 3 }

Any keys with null-ish values (null and undefined) are still included in the returned object.

const object = {
  a: { b: null, c: undefined },
};
squashObject(object); // { 'a.b': null, 'a.c': undefined }

It should also work with properties that have arrays as the value:

const object = { a: { b: [1, 2, 3], c: ['foo'] } };
squashObject(object); // { 'a.b.0': 1, 'a.b.1': 2, 'a.b.2': 3, 'a.c.0': 'foo' }

Empty keys should be treated as if that "layer" doesn't exist.

const object = {
  foo: {
    '': { '': 1, bar: 2 },
  },
};
squashObject(object); // { foo: 1, 'foo.bar': 2 }

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript + React - Day 36

useInputControl

Implement a useInputControl hook that manages a controlled input value and tracks additional form input states like:

[Property : Tracks : When it becomes true : When it becomes false]

* Touched : If input has been focused then blurred : When the user blurs the input (focus -> blur) : Never resets automatically

* Dirty : If value has been changed before : When the user types something Never resets automatically : -

* Different : If value is different from the original : When the value is different from the initial : When the value is same as the initial

The handleX functions returned by the hook are meant to be called on the relevant event handlers of <input> in order for the hook to work as intended.

export default function Component() {
  const nameInput = useInputControl('Oliver');

  return (
    <form>
      <div>
        <label htmlFor="name">Name</label>
        <input
          id="name"
          value={nameInput.value}
          onChange={nameInput.handleChange}
          onBlur={nameInput.handleBlur}
        />
      </div>
      <p>Touched: {nameInput.touched.toString()}</p>
      <p>Dirty: {nameInput.dirty.toString()}</p>
      <p>Different: {nameInput.different.toString()}</p>
      <button type="submit" disabled={!nameInput.different}>
        Submit
      </button>
      <button type="button" onClick={nameInput.reset}>
        Reset
      </button>
    <form>
  );
}

Arguments

- initialValue: string: The initial value of the input

Returns

The hook returns an object with the following properties:

- value: string: The current value of the input
- dirty: boolean: Whether the user has been modified at least once
- touched: boolean: Whether the input was focused and blurred
- different: boolean: Whether the value is different from the initial value
- handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void: A function that updates the value of the input
- handleBlur: (event: React.FocusEvent<HTMLInputElement>) => void: A function that to be called when the input is blurred
- reset: () => void: A function to reset to the initial value as well as the value of all states

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript + React - Day 37

useMediaQuery

Implement a useMediaQuery hook that subscribes and responds to media query changes (e.g. screen size, resolution, orientation, etc.).

export default function Component() {
  const isSmallDevice = useMediaQuery('only screen and (max-width: 768px)');

  return <div>{isSmallDevice && <a href="#">Menu</a>}</div>;
}

Hint: The window.matchMedia API would be helpful.

Arguments

- query: string: The media query to match. It must be a valid CSS media query string

Returns

The hook returns a boolean value that indicates whether the media query is a match.

@danceswithcode
@alithecodeguy

#js #javascript #interview87