George T Chakama gtchakama

🌿

Full-Stack Developer

👨‍💻 Tech Alchemist | Mastering React Native & Ruby on Rails | Building bridges in the decentralized web | Explorer of endless possibilities.

gtchakama / main.tsx

Created February 10, 2023 18:42

When using React hooks there is no access to access to this.props.location. To capture url parameters use window object.

	const getParams = () => {
	const search = window.location.search;
	const params = new URLSearchParams(search);
	const TokenParam: any = params.get('token');
	console.log(TokenParam);
	}

	useEffect(() => {
	getParams()
	}, [])

gtchakama / main.js

Last active February 10, 2023 23:39

Fix : ReferenceError: window is not defined in JavaScript

	if (typeof window !== 'undefined') {
	console.log('You are on the browser');

	// ✅ Can use window here
	console.log(window.innerWidth);

	window.addEventListener('mousemove', () => {
	console.log('Mouse moved');
	});
	} else {

gtchakama / main.tsx

Created February 23, 2023 17:52

Set types on React useState with TypeScript 💝

	interface PersonProps {
	name: string;
	age: number;
	hobbies: Array<string>;
	isCool: boolean;
	}

	// Boolean type
	const [isCool] = React.useState<boolean>(true);

gtchakama / main.js

Created March 13, 2023 19:20

Recursive JavaScript Lambda

	const AWS = require('aws-sdk')
	const lambda = new AWS.Lambda()
	const sleep = (milliseconds) => {
	return new Promise(resolve => setTimeout(resolve, milliseconds))
	}
	const recursionLimit = 5

	exports.handler = async(event) => {
	await sleep(2000)

gtchakama / main.js

Created March 13, 2023 19:20

Recursive JavaScript Lambda

	const AWS = require('aws-sdk')
	const lambda = new AWS.Lambda()
	const sleep = (milliseconds) => {
	return new Promise(resolve => setTimeout(resolve, milliseconds))
	}
	const recursionLimit = 5

	exports.handler = async(event) => {
	await sleep(2000)

gtchakama / main.js

Created March 21, 2023 04:48

Simple component Selector using select options

	import React, { useState } from "react";
	import ComponantA from "./ComponantA";
	import ComponantB from "./ComponantB";
	import ComponantC from "./ComponantC";

	function ChangeComponantSelect(){
	const [selected,setSelected]=useState('First Componant')

	const handleChange=(e)=>{
	console.log(e.target.value)

gtchakama / main.js

Created March 24, 2023 18:38

NavBar - Tailwind CSS

	import { useState } from 'react'
	import { Dialog } from '@headlessui/react'
	import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'

	const navigation = [
	{ name: 'Product', href: '#' },
	{ name: 'Features', href: '#' },
	{ name: 'Marketplace', href: '#' },
	{ name: 'Company', href: '#' },
	]

gtchakama / api.tsx

Created April 5, 2023 04:21

Reactjs utility function that handles api calls in axios for login , signup , reset password and register

	// api.ts
	import axios, { AxiosResponse } from 'axios';
	import apiConfig from './apiConfig';

	// Define interfaces for request data types
	interface LoginData {
	email: string;
	password: string;
	}

gtchakama / timer.tsx

Created April 6, 2023 13:02

A ReactJS Timer with progress bar

	import { useEffect, useState } from "react";

	const ThirtySecCounter = () => {
	const [timeLeft, setTimeLeft] = useState(30);

	useEffect(() => {
	if (!timeLeft) return;

	const intervalId = setInterval(() => {
	setTimeLeft((prevTimeLeft) => prevTimeLeft - 1);

gtchakama / index.html

Created April 11, 2023 13:36

Cool CSS Explosion

	<!DOCTYPE html>
	<html>
	<head>
	<title>Shaking Particles</title>
	<style>
	.shape {
	position: absolute;
	width: 50px;
	height: 50px;
	transform: scale(0.8);