😎

Mohsen Taleb mohsentaleb

😎

Full Stack JavaScript Developer with an eye for design.

mohsentaleb / App.tsx

Created March 6, 2022 07:55

	import type { Store } from "./context/reducer";
	import type { Action } from "./context/actions";

	function App() {
	const [state, dispatch] = useReducer<React.Reducer<Store, Action>>(
	reducer,
	initialState
	);

	return (

mohsentaleb / reducer.ts

Created March 6, 2022 07:42

	import type { Action } from "./actions";

	export const initialState = {
	content: "Hello World",
	background: "#ffcc00"
	};

	export type Store = typeof initialState;

	export const reducer = (state: Store, action: Action) => {

mohsentaleb / reducer.js

Created March 6, 2022 07:40

	export const reducer = (state, action) => {
	switch (action.type) {
	case "SET_BACKGROUND_COLOR":
	const background = action.payload.background

	return { ...state, background };
	case "SET_CONTENT":
	const content = action.payload.content;

	return { ...state, content };

mohsentaleb / actions.ts

Created March 6, 2022 07:34

mohsentaleb / type-guard.ts

Created March 6, 2022 07:32

	if (action.type === 'SET_BACKGROUND_COLOR') {
	// typescript would know we're in "SET_BACKGROUND_COLOR" context
	}

mohsentaleb / app-anatomy.tsx

Last active March 6, 2022 07:02

Anatomy of the app

	function App() {
	// initialState = { background: "#ccc", content: "Hello World!"}
	const [state, dispatch] = useReducer(reducer, initialState);

	return (
	<AppContext.Provider value={{ state, dispatch }}>
	<div className="rect" style={{ backgroundColor: state.background }}>
	<span>{state.content}</span>
	</div>
	<BackgroundControl />

mohsentaleb / mui_component_style_override_withstyles.tsx

Created January 7, 2021 06:54


	import { MuiAvatar } from "@material-ui/core"
	import { withStyles, Theme, createStyles } from '@material-ui/core/styles'

	const Avatar = withStyles((theme: Theme) =>
	createStyles({
	colorDefault: {
	// overriding `colorDefault` according to the Avatar API
	backgroundColor: theme.palette.secondary
	}

mohsentaleb / mui_component_style_override_withstyles.jsx

Last active January 7, 2021 06:49

	import { MuiAvatar } from "@material-ui/core"
	import { withStyles } from '@material-ui/core/styles'

	const Avatar = withStyles(
	theme => ({
	colorDefault: {
	// overriding `colorDefault` according to the Avatar API
	backgroundColor: theme.palette.secondary
	}
	}))(MuiAvatar) // Passing the original Avatar component to this HOC

mohsentaleb / meemo.js

Created April 25, 2020 19:59

	const bcrypt = require("bcryptjs");

	bcrypt.hash("password", 8, function(error, hash) {
	console.log(hash);
	});

mohsentaleb / mui_custom_styles_class_component.jsx

Created April 12, 2020 19:19

New Custom Styles (classes) and Theme variable in Class Body

	import { Box } from "@material-ui/core"
	import { withStyles } from "@material-ui/core/styles"

	const styles = theme => ({
	myCustomClass: {
	color: theme.palette.tertiary.dark
	}
	})

	class myComponent extends Component {