Skip to content

Instantly share code, notes, and snippets.

View kitze's full-sized avatar
🚀
Solving problems

Kitze kitze

🚀
Solving problems
View GitHub Profile
@kitze
kitze / manager.tsx
Created April 15, 2021 19:31
chakra-alert-manager
import { useDisclosure } from "@chakra-ui/react";
import ConfirmDialog from "app/core/chakra-prompts/ConfirmDialog";
import FormPrompt from "app/core/chakra-prompts/FormPrompt";
import React, { useContext, useState } from "react";
const ChakraPromptsContext = React.createContext<any>(null);
export const useChakraPrompts = () => useContext(ChakraPromptsContext);
const Manager = ({ children }) => {
const [config, setConfig] = useState<any>({});
@kitze
kitze / useMagicalMutation.ts
Created April 14, 2021 14:46
magical mutation for blitz
import { useToast } from "@chakra-ui/react";
import { exists } from "app/core/utils/js-utils";
import { QueryFn, useMutation } from "blitz";
import { MutationOptions } from "react-query";
type ShowLoginOnFailFn = (s: any) => boolean;
type CustomOptions = {
errorMessage?: string;
showLoginOnFail?: boolean | ShowLoginOnFailFn;
@kitze
kitze / Meta.tsx
Created November 18, 2020 09:57
Meta component for Next.js
import Head from 'next/head';
import React from 'react';
import { isDev } from 'utils/is-prod';
const prefix = isDev ? 'http://localhost:3004' : 'https://kitze.io';
const getImage = (url) => `${prefix}/${url}`;
const Meta: React.FC<{
title?: string;
@kitze
kitze / Bio.js
Created November 18, 2020 09:48
MetaPost component for kitze.io
import React from 'react';
import flex from '../../styles/flex';
import { absoluteCorner, fixedSize } from 'styled-mixins';
const textColor = `#e0e0e0`;
const Bio = ({ styles }) => {
return (
<div
style={{
@kitze
kitze / cloudinary-blitz.js
Created November 2, 2020 16:53
cloudinary blitz
import { cloud } from 'app/config/cloudinary';
import { GetCloudinarySignatureSchema } from 'app/data/images/schema';
import { protect } from 'app/utils/auth-utils';
import { Role } from 'app/utils/enums';
import { getEnv } from 'app/utils/get-env';
export default protect(
{ schema: GetCloudinarySignatureSchema, role: Role.User },
async function getCloudinarySignature({ publicId, folder }) {
const timestamp = Math.round(new Date().getTime() / 1000);
@kitze
kitze / layout-styled-components.tsx
Created April 22, 2020 07:50
chakra layout styled components
import { Box as OriginalBox } from "@chakra-ui/core";
import { PseudoBox } from "@chakra-ui/core/dist";
import React from "react";
import styled from "@emotion/styled";
import flex from "styles/flex";
import { fixedHeight, fixedWidth } from "styled-mixins";
import { gridProps, grid } from "styled-mixins";
export interface CommonProps {
wrap?: boolean;
@kitze
kitze / usage.tsx
Created April 15, 2020 17:15
returning a hook from a component
const TrainingView = () => {
const trainingSlug = useSingleParam(routeParams.TrainingSlug);
const result = useTrainingViewQuery({
variables: {
slug: trainingSlug
}
});
return useHandleData(result)(({ me: { trainingSessions } }) => {
let [trainingSession] = trainingSessions;
@kitze
kitze / mst-utils.ts
Created March 20, 2020 09:19
mst-utils
import { types, IAnyModelType, Instance, cast } from "mobx-state-tree";
import React, { useMemo } from "react";
export const createModel = <T extends IAnyModelType>(
model: T,
value?: Record<string, any>
) => types.optional(model, () => model.create(value));
export function castSelf<IStoreInstance, IParentModel>(
store: IStoreInstance,
@kitze
kitze / castSelf.ts
Created February 12, 2020 09:26
Cast Self for mobx-state-tree
import { Instance, cast } from 'mobx-state-tree';
export function castSelf<IStoreInstance, IParentModel>(
store: IStoreInstance,
model: IParentModel
) {
return cast<Instance<IParentModel>>(store as Instance<IParentModel>);
}
@kitze
kitze / use-resizer.ts
Created December 17, 2019 12:13
A hook that gives you resize logic that you can attach to an element
import { useLocalStore } from 'mobx-react-lite';
import { clamp } from 'lodash';
type Props = {
height: number;
maxHeight?: number;
minWidth: number;
minHeight: number;
measureWidth?: boolean;
measureHeight?: boolean;