andrelandgraf

import childProcess from 'child_process';
import fs from 'fs';
import dotenv from 'dotenv';
import prettier from 'prettier';

const rootDir = process.cwd();

dotenv.config({
  path: `${rootDir}/.env.production`,
});

andrelandgraf

import { useMatches } from 'remix';

// this base hook is used in other hooks to quickly search for specific data across all loaderData using useMatches
// see in action: https://codesandbox.io/s/usematches-loader-data-2h798?file=/app/db.server.ts
export default function useLoaderStore<T>(key: string): T | undefined {
  const matchingRoutes = useMatches();
  const route = matchingRoutes.find((route) => route.data && route.data[key]);
  if (!route || !route.data || route.data[key] === undefined) {
    return undefined;
  }

andrelandgraf

/*
 * DEPRECATION NOTICE: This workaround is no longer needed. You can now use ESM packages with Remix by 
 * tracking all ESM packages in your remix.config.js file. This means we can now use react-markdown
 * and are not required to reimplement everything from scratch.
 * Find a nice example implementation here: https://stackblitz.com/edit/node-ydjuwx?file=remix.config.js
 */

/* 
 * react-remark does not support cjs anymore but Remix.run will not work with esm just yet (without async imports)
 * Unfortunately, the older versions of react-remark do not implement useRemarkSync 

andrelandgraf

import { Form as RemixForm } from 'remix';
import type { FC } from 'react';
import type { FormProps, Request } from 'remix';

type FormReqBody = { method: 'get' | 'post' | 'put' | 'delete' } & Record<string, string>;

export async function parseURLSearchParams(request: Request): Promise<Partial<FormReqBody>>;

export async function parseURLSearchParams<ReqBody>(request: Request): Promise<Partial<ReqBody & FormReqBody>>;

andrelandgraf

 
 ​import​ ​type​ ​{​ ​FC​,​ ​HTMLAttributes​,​ ​ReactElement​ ​}​ ​from​ ​'react'​; 
 ​import​ ​{​ ​Children​ ​}​ ​from​ ​'react'​; 
 ​import​ ​invariant​ ​from​ ​'tiny-invariant'​; 
 ​import​ ​Highlight​,​ ​{​ ​Language​,​ ​defaultProps​ ​}​ ​from​ ​'prism-react-renderer'​; 
 ​import​ ​CopyClipboardButton​ ​from​ ​'../button/copyClipboardButton'​; 
  
 ​function​ ​getLanguageFromClassName​(​className​: ​string​)​ ​{ 
 ​  ​const​ ​match​ ​=​ ​className​.​match​(​/​language-​(​\w​+​)​/​)​; 
 ​  ​return​ ​match​ ? ​match​[​1​]​ : ​''​; 

andrelandgraf

import { useCallback, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

export default function useErrorNotifications() {
  const { pushNotification } = useContext(NotificationsContext);
  const [searchParams, setSearchParams] = useSearchParams();
  const errorCode = searchParams.get('error');

  const onClose = useCallback(() => {
    searchParams.delete('error');

andrelandgraf

/*
 * working with resolve()
 */
const doSomethingChained = (name) => {
    console.log('1');
    return new Promise((resolve, reject) => setTimeout(() => {console.log(name); resolve();}, 1500, name));
};

doSomethingChained('Alice').then(() => {
    console.log('2');

andrelandgraf

// summarized and added comments, original source: https://es6.io/ course by Wes Bos
// messing with the prototype
Array.prototype.myFunction = function(){
    // add some array functionality
};

// initialising our array
const names = ["Alice", "Foo", "Bar", "Jon Doe"];

// adding some further properties

andrelandgraf

/**
 * implementing return value of setTimeout() from callback to promise
 * @param ms
 * @returns {Promise<function>}
 */
const sleep = function (ms) {
    // 4.) task 1: we create a new promise and call setTimeout(), 
    //     set timeout creates a new taks 2 that will run after taks 1 has finished & 1500 milliseconds have passed
    // new Promise(function(resolve, reject) { ... });
    return new Promise(resolve => {

andrelandgraf

/*
 * what happens if task 1 takes longer than 1500 milliseconds to be executed? Does task 2 has to wait?
 */
function doSomethingLonger(name, callback){
    // 2.) task 1: we execute console.log('1');
    console.log('1');
    // 3.) task 1: we execute setTimeout. Set timeout creates a new task (task 2) that will be executed in 1500 milliseconds from now on
    setTimeout(callback, 1500, name);
    // 4.) task 1: we execute console.log('2');
    while(true);