Kornil

// ==UserScript==
// @name         Cantrill Font Fix
// @namespace    https://gist.github.com/Kornil
// @description  Fixes the hard to read fonts on the sidebar on HDR screens
// @version      1.0
// @match        https://learn.cantrill.io/*
// @grant        GM_addStyle
// @updateURL    https://gist.githubusercontent.com/Kornil/91dab9506b301ed7bc10fda5b5fef5a9/raw/cantrill-fix.user.js
// @downloadURL  https://gist.githubusercontent.com/Kornil/91dab9506b301ed7bc10fda5b5fef5a9/raw/cantrill-fix.user.js
// ==/UserScript==

Kornil

const areEqual = (prevProps, nextProps) => (
  prevProps.myProp === nextProps.myProp
);

const Hello = ({ myProp }) => (
  <div>{myProp}</div>
);

export default React.memo(Hello, areEqual);

Kornil

const Hello = () => {
  const inputRef = useRef(null);
  return (
    <input ref={inputRef} type='text' />
    <button onClick={() => inputRef.current.focus()}>click to focus the input</button>
  );
}

Kornil

// Hook reducer
const reducer = (state, action) => {
  switch(action.type) {
    case 'initial data':
      return action.payload;
  }
}

// Hook actions
const fetchData = async () => {

Kornil

const Hello = () => {
  const [isOpen, toggleIsOpen] = React.useState(false);
  return (
    <div>
      <button onClick={(prevValue) => toggleIsOpen(!prevValue)}>click me</button>
      {isOpen ? <p>I'm open!</p> : <p>I'm closed!</p>}
    </div>
  );
};

Kornil

const Hello = () => {
  const [inputValue, setInputValue] = React.useState('');
  return (
    <input
      onChange={(e) => setInputValue(e.target.value)}
      value={inputValue}
    />
  )
}

Kornil

const Hello = () => {
  const [number, updateNumber] = React.useState(0);
  return (
    <div>
      <p>{number}</p>
      <button onClick={(prevNum) => updateNumber(prevNum + 1)}>Add 1</button>
      <button onClick={(prevNum) => updateNumber(prevNum - 1)}>Remove 1</button>
    </div>
  )
}

Kornil

class Modal extends Component {
  private modalRef = createRef;

  closeModal = (e) => {
    const { modalProps } = this.props;
    const node = this.modalRef.current;
    // ignore if click is inside the modal
    if (node && node.contains(e.target)) {
      return;
    }

Kornil

const Header = () => (
  <StyledHeader>
    <nav>
      <ModalContext.Consumer>
        {(modalProps) => (
          <Button onClick={modalProps.showModal}>login</Button>
          {/*
            we pass modalProps so the Modal can use them to render if show is true
            and to provide the hideModal method for our close functionality
          */}

Kornil

import React, { Component, createContext } from "react";

const ModalContext = createContext({
  hideModal: () => null,
  show: false,
  showModal: () => null
});

export default ModalContext;