Skip to content

Instantly share code, notes, and snippets.

View mustafadalga's full-sized avatar

Mustafa Dalga mustafadalga

View GitHub Profile
@mustafadalga
mustafadalga / App.tsx
Created April 1, 2024 20:35
Modal Transition Effect in React.js
import { lazy, Suspense, useEffect } from "react";
import useModalStore from "@/hooks/useModalStore.ts";
const Modal = lazy(() => import("@/components/Modal.tsx"))
function Loading() {
return <h2>🌀 Loading...</h2>;
}
function App() {
@mustafadalga
mustafadalga / memo.ts
Created March 31, 2024 16:10
Custom Memoization Function in JavaScript
/**
* This Gist demonstrates a simple yet effective implementation of a memoization function in JavaScript.
* Memoization is an optimization technique used to speed up computer programs by storing the results of expensive function
* calls and returning the cached result when the same inputs occur again.
*/
const memoMap = new Map();
const complexFunction = (a1: number[], a2: number[]): number => {
// Simulate heavy calculations
@mustafadalga
mustafadalga / App.vue
Created March 17, 2024 09:55
Modal Slide In / Up Animation with Transition in vue.js 3
<template>
<div class="app">
<button @click="store.mutations.open()">Open Modal </button>
<Modal v-if="store.state.isModalOpen"/>
</div>
</template>
<script setup>
import store from "./store";
import Modal from "./Modal.vue";
@mustafadalga
mustafadalga / App.vue
Last active March 17, 2024 09:56
Modal Fade In / Fade Out Animation with Transition in vue.js 3
<template>
<div class="app">
<button @click="store.mutations.open()">Open Modal </button>
<Modal v-if="store.state.isModalOpen"/>
</div>
</template>
<script setup>
import store from "./store";
import Modal from "./Modal.vue";
@mustafadalga
mustafadalga / store.ts
Created January 8, 2024 10:36
Unit Testing Vue.js Composables: Verifying Vuex Store Interaction and Reactive Behavior in useCheckUserPosts
import { createStore } from "vuex";
import type { Post } from "@/types";
export interface ApisLoadState {
isCalled: boolean;
isLoaded: boolean;
}
export interface ApiLoadState extends ApisLoadState {
api: string;
@mustafadalga
mustafadalga / amplitude.d.ts
Last active December 17, 2023 14:35
Amplitude Type Declaration
declare global {
interface AmplitudeInstance {
logEvent(eventName: string, eventProperties?: object): void;
identify(identifyObject: object): void;
setUserId(userId: string | null): void;
init(apiKey: string, userId?: string, options?: object, callback?: () => void): void;
}
interface Amplitude {
getInstance(): AmplitudeInstance;
@mustafadalga
mustafadalga / useFetchPosts.test.ts
Created November 18, 2023 11:17
Unit Testing React Hooks with MSW, Vitest, and Testing Library: Fetching and Updating Posts
import { expect, describe, it, beforeAll, afterEach, afterAll, beforeEach } from "vitest";
import { QueryClientProvider } from "react-query";
import { ReactNode } from "react";
import { http, HttpResponse } from "msw";
import { useCommonStore } from "@/_store/useCommonStore";
import { act, renderHook, waitFor } from "@testing-library/react";
import { createTestServer, queryClient } from "@/__tests__/utilities";
import useFetchCustomVariables from "@/_hooks/useFetchCustomVariables";
const successResponse = [
@mustafadalga
mustafadalga / useDeepCompareMemoize.test.ts
Created November 18, 2023 09:24
Unit Tests for useDeepCompareMemoize: Testing Deep Comparison React Hook with Vitest and Testing Library
import { describe, it, expect } from "vitest";
import { renderHook } from "@testing-library/react";
import useDeepCompareMemoize from "./useDeepCompareMemoize";
describe("useDeepCompareMemoize", () => {
it('should return a memoized version of the input value based on deep comparison', () => {
const initialData = { user: { name: 'John', age: 25, city: 'New York' } };
const newData = { user: { name: 'Alice', age: 30, city: 'San Francisco' } };
const identicalData = { user: { name: 'John', age: 25, city: 'New York' } };
@mustafadalga
mustafadalga / mock-functions-cheatsheet.md
Created November 5, 2023 09:11
Summarizes the behavior of mockClear, mockReset, and mockRestore in Jest/Vitest
Function Clears Call History Resets Implementations Restores Original Implementation Scope of Use
mockClear() Clear usage data of the mock function but keep its implementation and return values.
mockReset() Reset the mock function to its initial state, removing any custom behavior or return values.
mockRestore() Restore the original function, removing the mock (only applicable with jest.spyOn).
@mustafadalga
mustafadalga / usePostsStore.test.ts
Created October 31, 2023 18:03
Writing unit tests of zustand state management store with vitest and testing-library
import { act, renderHook } from '@testing-library/react';
import { describe, it, expect, beforeEach } from "vitest";
import { usePostsStore } from "@/_store/usePostsStore";
describe('usePostsStore', () => {
beforeEach(() => {
usePostsStore.getState().reset()
});
it('should return the initial state', () => {