createdbymahmood’s gists

createdbymahmood / Text.withRef.tsx

Created December 3, 2020 11:00

	import React from "react";

	// * modules
	import classnames from "classnames";
	import { Tooltip } from "antd";

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

createdbymahmood / Input-Textarea.tsx

Last active November 30, 2020 09:08

How to render input/textarea based on some conditions

	function isPropsForTextareaElement(
	props: InputProps \| TextareaProps
	): props is TextareaProps {
	return "rows" in props;
	}

	export const TextareaInputGeneralComponent = (
	props: InputProps \| TextareaProps
	) => {
	if (isPropsForTextareaElement(props)) {

createdbymahmood / usage.tsx

Last active December 4, 2020 12:09

Sample for useImperativeHandle

	const Register: FC = props => {
	const formRef = useRef<ImperativeHandleProps>(null!);
	return (
	<Fragment>
	<Form ref={formRef} />
	<button onClick={() => formRef.current.onSomePropFired()}>
	sbt form
	</button>
	</Fragment>
	);

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();

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 / 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 / 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 / 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 / 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 / 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 {

Mahmood Bagheri createdbymahmood