Skip to content

Instantly share code, notes, and snippets.

View develohpanda's full-sized avatar
✌️
Chillin'

Opender Singh develohpanda

✌️
Chillin'
View GitHub Profile
@develohpanda
develohpanda / LazyLoadClientOnly.tsx
Last active March 19, 2024 03:19
SSR React Utilities
// Used like <LazyLoadClientOnly loader={() => import('/foo')} bar="baz" /> where `bar` is a prop of the `Foo` component.
import {
ComponentProps,
ComponentType,
LazyExoticComponent,
ReactNode,
Suspense,
lazy,
useEffect,
function isNotNullOrUndefined<ValueType>(
value: ValueType | null | undefined
): value is ValueType {
if (value === null || value === undefined) {
return false;
}
return true;
}
import { ComponentType, FC, PropsWithChildren } from 'react';
const Starter: FC<PropsWithChildren> = ({ children }) => <>{children}</>;
export const withWrappers = (...params: ComponentType<PropsWithChildren>[]) =>
params.reduce((Previous, Current) => {
const Wrapped: FC<PropsWithChildren> = ({ children }) => (
<Previous>
<Current>{children}</Current>
</Previous>
@develohpanda
develohpanda / conditional-jest.js
Last active November 18, 2020 09:38
Conditionally run a unit test in jest
it.if = cb => cb() ? it : it.skip;
const isPackage = () => process.env.BUNDLE === 'package'
describe('suite', () => {
it.if(isPackage)('test', () => {
// test single
});
it.if(isPackage).each([1,2])('test each %s', num => {
@develohpanda
develohpanda / useToggleState.js
Last active July 8, 2020 00:57
useToggleState makes it cleaner to use a boolean state toggle
import * as React from 'react';
const useToggleState = (initialState: boolean = false): [boolean, () => void] => {
const [state, set] = React.useState(initialState);
const toggle = React.useCallback(() => set(oldState => !oldState), []);
return [state, toggle];
};
// Consume as
const [visible, toggleVisibility] = useToggleState(false);
@develohpanda
develohpanda / configureRepository.js
Last active August 9, 2021 01:24
Insomnia Designer scripts
function configureRepository(token) {
const set = (elName, value) => {
document.getElementsByName(elName)[0].value = value;
};
set('uri', 'https://github.com/develohpanda/designer.git');
set('authorName', 'gh-sync');
set('authorEmail', '[email protected]');
set('username', 'gh-sync-test');
set('token', token);
@develohpanda
develohpanda / example.yaml
Last active May 4, 2020 22:35
Import via clipboard into Insomnia, and note the folders, requests, default Content-Type header, and environments created
openapi: 3.0.0
info:
version: 1.0.2
title: Example
tags:
- name: folder one # converted to folders
- name: folder two
servers:
- url: https://petstore.swagger.io/v2 # converted to scheme, host, base_path env variables
paths:
@develohpanda
develohpanda / skrub.js
Last active April 17, 2020 03:10
I wanted a challenge
const node = (item?: string, separator?: string) => `${item && `${separator}${item}`}`;
const nodes = [
node(parentEntityType),
node(currentEntityType, ':'),
node(fieldName, '::'),
node(fieldName && entityId, ':::'),
];
return new Key(nodes.join(''));
@develohpanda
develohpanda / RebaseSnippet.md
Last active May 2, 2020 04:14
Rebase snippet

Dependent on PR #

The base for this-branch is not develop and we need to rebase onto develop once old-parent-branch (in the PR above) has been merged. This way history is kept clean and consistent. After re-basing, update the base branch for this PR to be develop and delete this snippet.

git checkout develop
git pull
git rebase --onto develop <old-parent-branch> <this-branch>
git push --force

Make sure you are aware of the ramifications of using git push --force

@develohpanda
develohpanda / hoc-template.tsx
Created February 27, 2019 11:34 — forked from devdoomari3/hoc-template.tsx
Typescript higher order component (hoc) template
/* variation on https://medium.com/@DanHomola/react-higher-order-components-in-typescript-made-simple-6f9b55691af1 */
import * as React from 'react'
import { wrapDisplayName } from 'recompose'
// Props you want the resulting component to take (besides the props of the wrapped component)
interface ExternalProps {}
// Props the HOC adds to the wrapped component
export interface InjectedProps {}