Skip to content

Instantly share code, notes, and snippets.

Avatar

Derek Oware Dchole

View GitHub Profile
@Dchole
Dchole / UserProfileList.js
Created Aug 21, 2021
React Suspense solution
View UserProfileList.js
/**
* Core issues
* 1) The Suspense component has no fallback component
* 2) Fetching data with useEffect causes the component to render before fetching the data
* 3) Data was fetched outside the suspense. Data needs to be handled by Suspense it therefore should be fetched inside the Suspense
*/
function getUserProfile(userId) {
return {
profile: wrapPromise(fetchUserProfile(userId))
@Dchole
Dchole / useDebounce.js
Last active Sep 27, 2021
Debouncing with React hooks
View useDebounce.js
import { useEffect, useRef } from "react"
/**
* @callback requestCallback
* @param {any[]} args - arguments passed into callback
*/
/**
* Debounce function to reduce number executions
* @param {requestCallback} cb - callback function to be executed
* @param {number} wait - number of milliseconds to delay function execution
@Dchole
Dchole / App.tsx
Last active Dec 1, 2021
A custom link button with MaterialUI and next/link
View App.tsx
// Usage
import ButtonLink from "@/components/ButtonLink"
function App() {
return (
<ButtonLink
href="/store"
variant="contained"
color="primary"
endIcon={<StoreIcon />}
@Dchole
Dchole / index.html
Created May 3, 2021
Upload user avatar with a custom upload button
View index.html
<main>
<input type="file" name="image" id="image" accept="image/*" />
<div id="preview">
<div id="avatar"></div>
<button
id="upload-button"
aria-labelledby="image"
aria-describedby="image"
>
🙂
@Dchole
Dchole / request-handler.js
Created May 3, 2021
Handling error response in fetch vs in axios
View request-handler.js
import Axios from "axios";
const DISPLAY = document.querySelector("pre");
const FETCH_BTN = document.querySelector("#fetch");
const AXIOS_BTN = document.querySelector("#axios");
const API = "http://localhost:1337/posts";
let error;
@Dchole
Dchole / useDevice.ts
Created Mar 19, 2021
Custom React hook for detecting user's device
View useDevice.ts
import { useEffect, useState } from "react";
export type TDevice = "mobile" | "desktop";
const useDevice = () => {
const [device, setDevice] = useState<TDevice>("mobile");
useEffect(() => {
const { userAgent } = navigator;
userAgent.includes("Mobi") ? setDevice("mobile") : setDevice("desktop");
@Dchole
Dchole / javascript.json
Last active Feb 24, 2021
VSCode snippets for TypeScript React & JavaScript React
View javascript.json
{
"Basic useEffect hook": {
"prefix": "ueh",
"body": ["useEffect(() => {$2}, [$1])"],
"description": "Basic useEffect hook without return function"
},
"Custom Hook": {
"prefix": "ch",
"body": [
"const use${1:$TM_FILENAME_BASE} = () => {",
@Dchole
Dchole / DeviceContext.tsx
Last active May 1, 2021
Store user's device or platform in React Context API
View DeviceContext.tsx
// Context API for device
import { createContext, useEffect, useState } from "react";
export type TDevice = "mobile" | "desktop";
export const DeviceContext = createContext<TDevice>("mobile");
const DeviceContextProvider: React.FC = ({ children }) => {
const [device, setDevice] = useState<TDevice>("mobile");
@Dchole
Dchole / script.js
Last active May 1, 2021
Script to alert user what device they are using in raw vanilla JS
View script.js
const BUTTON = document.querySelector("button");
const { userAgent } = window.navigator;
// Set device to "mobile" if "Mobi" exists in userAgent else set device to "desktop"
const device = userAgent.includes("Mobi") ? "mobile 📱" : "desktop 💻";
BUTTON.addEventListener("click", () => alert(`You are on ${device}`));