diff --git a/zk/Events.md b/zk/Events.md deleted file mode 100644 index 2ec3671..0000000 --- a/zk/Events.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -tags: - - typescript - - react ---- - -# Events - -Building on the previous examples for React TypeScript we are going to add a -simple form that enables the user to add people to the list. This will -demonstrate how we type components that use event handlers. - -We are going to use the preexisting interface for recording the list items: - -```tsx -interface IState { - people: { - name: string; - age: number; - }[]; -} -``` - -Our form: - -```ts -import {IState as Props}; -``` - -```tsx - -interface IProps { - people: Props["people"] - setPeople: React.Dispatch> -} - -const AddToList = () => { - const [people, setPeople] = useState({}) - const [formVals, setFormVals] = useState({}); - - const handleChange = (e: React.ChangeEvent): void => { - setFormValues({ - ...input, - [e.target.name]: e.target.value, - }); - }; - - const handleClick = (): void => { - if (!input.name || !input.age) return - - setPeople({ - ...people, - { - name: input.name, - age: input.age - } - }) - } - -return ( -
- - -
- - ); -}; -``` - -This follows standard practise for -[controlled-components](Forms.md). The TS -specific additions: - -- We define the change event as being of the type `React.ChangeEvent` and state - that it corresponds to a generic - `HTMLInputElement`. So we are saying that - whenever this function is called we must be passing it an input element so - that we can extract the event associated with its `target` property. - -- We are passing around variations on the `IState` interface in order to type - the values that we are adding to the people array. - -## Further standard types for event handling - -### onClick - -```tsx -handleClick(event: MouseEvent) { - event.preventDefault(); - alert(event.currentTarget.tagName); -} -``` - -### onSubmit - -```tsx -handleSubmit(e: React.SyntheticEvent) { - event.preventDefault(); -} -``` - -> Most event types and their associated generics will be revealed by VS Code -> Intellisense so you don't need to memorize them all diff --git a/zk/events.md b/zk/events.md deleted file mode 100644 index dba2c0e..0000000 --- a/zk/events.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: events -aliases: [] -tags: - - backend - - node-js ---- - -# Node.js `events` module - -In most cases you won't interact with the `events` module directly since other -modules and third-party modules are abstractions on top of it. For instance the -`http` module is using events under the hood to handle requests and responses. - -Another way of putting this is to say that all events in Node inherit from the -`EventEmitter` constructor, which is the class you instantiate to create a new -event. At bottom everything in Node is an event with a callback, created via -event emitters. - -Because Node's runtime is [event-driven](Event_loop.md), it is event-emitter -cycles that are being processed by the Event Loop, although you may know them as -`fs` or `http` (etc) events. The call stack that the Event Loop works through is -just a series of event emissions and their associated callbacks. - -## Event Emitters - -- All objects that emit events are instances of the `EventEmitter` class. This - object exposes an `eventEmitter.on()` function that allows one or more - functions to be attached to named events emitted by the object. -- These functions are **listeners** of the emitter. - -## Basic syntax - -```js -const EventEmitter = require("events"); // import the module - -// Raise an event -const emitter = new EventEmitter("messageLogged"); - -// Register a listener -emitter.on("messagedLogged", function () { - console.log("The listener was called."); -}); -``` - -- If we ran this file, we would see `The listener was called` logged to the - console. -- Without a listener (similar to a subscriber in Angular) nothing happens. -- When the emission occurs the emitter works _synchronously_ through each - listener function that is attached to it. - -## Event arguments - -- Typically we would not just emit a string, we would attach an object to the - emitter to pass more useful data. This data is called an **Event Argument**. -- Refactoring the previous example: - -```js -// Raise an event -const emitter = new EventEmitter("messageLogged", function (eventArg) { - console.log("Listener called", eventArg); -}); - -// Register a listener -emitter.on("messagedLogged", { id: 1, url: "http://www.example.com" }); -``` - -## Extending the `EventEmitter` class - -- It's not best practice to call the EventEmitter class directly in `app.js`. If - we want to use the capabilities of the class we should create our own module - that extends `EventEmitter`, inheriting its functionality with specific - additional features that we want to add. -- So, refactoring the previous example: - -```js -// File: Logger.js - -const EventEmitter = require("events"); - -class Logger extends EventEmitter { - log(message) { - console.log(message); - this.emit("messageLogged", { id: 1, url: "http://www.example.com" }); - } -} -``` - -_The `this` in the `log` method refers to the properties and methods of -`EventEmitter` which we have extended._ - -- We also need to refactor our listener code within `app.js` so that it calls - the extended class rather than the `EventEmitter` class directly: - -```js -// File app.js - -const Logger = require('./Logger') -const logger = new Logger() - -logger.on('messageLogged', function(eventArg){ - console.log('Listener called', eventArg) -} - -logger.log('message') -```