createdbymahmood’s gists

createdbymahmood / Text.tsx

Last active August 28, 2020 17:25

This is how I render a react Text component with different conditions using Tailwindcss

	import React from 'react';

	// * modules
	import classnames from 'classnames';

	// define all text types
	type VariantProps = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p';
	type LineheightProps =
	\| 'none'
	\| 'light'

createdbymahmood / Button.tsx

Last active January 9, 2021 05:01

This is how I render a react Button component with different conditions

	import React from 'react';
	import classnames from 'classnames';

	// * these are the base custom button props
	type ButtonSizeType = 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';
	type ButtonTypeType =
	\| 'primary'
	\| 'info'
	\| 'light-info'
	\| 'warning'

createdbymahmood / useRequest.tsx

Last active September 13, 2020 06:36

Making a get request using axios & SWR

	import useSWR, { ConfigInterface, responseInterface } from "swr";

	// you can import the next line from your axios instance repository
	import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from "axios";

	export type GetRequest = AxiosRequestConfig \| null;

	interface Return<Data, Error>
	extends Pick<
	responseInterface<AxiosResponse<Data>, AxiosError<Error>>,

createdbymahmood / localStorage.ts

Last active August 28, 2020 12:29

Localstorage helper file

	// This part is picked from the `fluentui` repo -> https://github.com/microsoft/fluentui

	export let _isSSR = false;

	/**
	* Helper to set ssr mode to simulate no window object returned from getWindow helper.
	*
	* @public
	*/
	export function setSSR(isEnabled: boolean): void {

createdbymahmood / AuthInterceptor.ts

Last active October 11, 2020 05:36

This is my ApiService ( in fact, my axios instance ) that I'm using in my Projects, But it's not the perfect one, needs some more review

	import { AxiosRequestConfig, AxiosInstance } from "axios";

	interface AuthRequestConfig {
	/**
	* @default true
	*/
	shouldAuthenticate?: boolean;
	}

	declare module "axios" {

createdbymahmood / withErrorBoundary.tsx

Last active August 28, 2020 12:55

This is my HOC to handle errors on react components in the root level

	// This one is picked from https://github.com/piotrwitek/react-redux-typescript-guide

	import React from 'react';

	const MISSING_ERROR = 'Error was swallowed during propagation.';

	export const withErrorBoundary = <BaseProps extends {}>(
	BaseComponent: React.ComponentType<BaseProps>
	) => {
	type HocProps = {

createdbymahmood / KeyCodes.ts

Created September 8, 2020 13:40

	/**
	* Picked from https://github.com/microsoft/fluentui
	* Simulated enum for keycodes. These will get inlined by uglify when used much like an enum
	*
	* @public
	* {@docCategory KeyCodes}
	*/
	export const KeyCodes = {
	backspace: 8 as 8,
	tab: 9 as 9,

createdbymahmood / Button.test.tsx

Last active October 5, 2020 04:04

This is how I'm testing a button component

	import React from "react";
	import {
	cleanup,
	fireEvent,
	render,
	RenderResult,
	} from "@testing-library/react";

	import { Button, ButtonProps } from "./Button";

createdbymahmood / routeTo.ts

Created October 2, 2020 22:08

react-router routeTo path generator helper 😁

	import { generatePath } from "react-router-dom";
	import { stringify } from "qs";
	import get from "lodash/get";
	import __ROUTES__ from "constants/routes";

	type PathType = keyof typeof __ROUTES__;
	type ParamsType = { [paramName: string]: string \| number \| boolean };

	export const routeTo = (
	path: PathType,

createdbymahmood / AclService.tsx

Last active November 13, 2020 00:23

This is how I handle ACL in React apps

	import React, { FC, Fragment } from "react";
	import { usePermissions } from "services/rbac";
	import { get } from "lodash";

	export type AclProps = {
	permission: string;
	};

	export const AclService: FC<AclProps> = ({ permission, children }) => {
	const { role, permissions } = usePermissions();

Mahmood Bagheri createdbymahmood