Skip to content

Instantly share code, notes, and snippets.

View mustafadalga's full-sized avatar

Mustafa Dalga mustafadalga

View GitHub Profile
@mustafadalga
mustafadalga / GET.test.ts
Created October 27, 2023 08:00
Demonstration of unit testing for Next.js 13 API routes, covering GET and POST methods using mocks with msw.
import { describe, it, expect, beforeAll, afterEach, afterAll } from "vitest";
import { GET } from "./route";
import { createMockRequest, createTestServer } from "@/__tests__/utilities";
import { http, HttpResponse } from "msw";
const url = `${process.env.VITE_API_BASE_URL_V2}/posts`;
const mockPosts = [ {
"userId": 1,
"id": 2,
"title": "qui est esse",
@mustafadalga
mustafadalga / InputRadio.test.tsx
Created October 26, 2023 07:24
Unit Testing a React Radio Input Component: Handling Clicks and State Changes
import { describe, expect, it, vi } from "vitest";
import { render, screen, fireEvent } from '@testing-library/react';
import InputRadio from './InputRadio';
describe('InputRadio Component Tests', () => {
const dummyProps = {
id: 'testRadio',
name: 'test-radio',
label: 'Test Label',
checked: false,
@mustafadalga
mustafadalga / GET.test.ts
Created October 25, 2023 14:29
Demonstration of unit testing for Next.js 13 API routes, covering GET and POST methods with mocks.
import { describe, it, expect, vi } from "vitest";
import { createRequest } from 'node-mocks-http';
import { GET } from "./route";
const mocks = vi.hoisted(() => ({
get: vi.fn(),
}));
vi.mock("axios", async () => {
const actual: any = await vi.importActual("axios");
@mustafadalga
mustafadalga / script.ts
Created October 8, 2023 08:48
Automated Twitter Interest Deselection Script
// Function to sleep for a given duration
function triggerClick(element) {
const event = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true,
});
element.dispatchEvent(event);
}
@mustafadalga
mustafadalga / not-found.tsx
Created September 19, 2023 12:07
Next.js 13: 404 Not Found Page
import Link from "next/link";
export default function NotFound() {
return (
<main className="grid place-items-center p-5 min-h-screen w-full bg-gradient-to-r from-purple-200 to-purple-500 ">
<section className="relative grid gap-3 rounded shadow-lg p-5 lg:p-10 xl:px-20 bg-purple-200">
<h1 className="text-center text-purple-700 font-bold text-8xl lg:text-9xl 2xl:text-[15rem]">404</h1>
<p className="text-purple-900 text-base lg:text-xl xl:text-2xl mb-5">
Oops! The page you are looking for does not exist. It might have been moved or deleted.
@mustafadalga
mustafadalga / api.post.list.route.ts
Created September 11, 2023 11:30
Sending Cookie to API Route in Next.js 13:In a Next.js 13 project, you can send a cookie to an API route by including it in the headers of your Axios request in your server-side function. In the API route, you can access this cookie using request.cookies.get('cookieName').
import { NextRequest, NextResponse } from "next/server";
import { AxiosInstance } from "axios";
import { CookieKeys } from "@/_enums";
import createAuthenticatedApiServiceV2 from "@/_services/createAuthenticatedApiServiceV2";
import handleAxiosError from "@/_utilities/handleAxiosError";
export async function GET(request: NextRequest) {
try {
const jwt: string | undefined = request.cookies.get(CookieKeys.Jwt)?.value;
@mustafadalga
mustafadalga / InputSearch.tsx
Last active September 8, 2023 08:16
Debounced Search Component in React:This React component demonstrates how to implement a debounced search feature using hooks like `useState`, `useEffect`, and `useCallback`.
import { ChangeEvent, useCallback, useEffect, useState } from "react";
import { CiSearch } from "react-icons/ci"
import { useSearch } from "@/store/useSearch";
const Search = () => {
const [ searchText, setSearchText ] = useState("");
const setSearch = useSearch(state => state.setSearch);
const [ debouncedSearchText, setDebouncedSearchText ] = useState(searchText);
const handleSearchText = useCallback((event: ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
@mustafadalga
mustafadalga / Input.tsx
Created August 22, 2023 08:26
Handling Conditional onChange Handlers in React: Integrating Custom Inputs with react-hook-form
import { FieldError } from 'react-hook-form';
import { ChangeEvent } from "react";
interface Props {
label: string;
id: string;
type?: string;
placeholder?: string;
disabled?: boolean;
register?: any;
@mustafadalga
mustafadalga / ClientOnly.tsx
Created August 21, 2023 12:16
The ClientOnly component is designed to ensure that certain parts of your application render only on the client side, skipping server-side rendering (SSR) in Next.js 13.
import dynamic from 'next/dynamic';
import { PropsWithChildren } from "react";
interface Props {
children: PropsWithChildren;
}
const ClientOnly = ({ children }: Props) => {
return <>{children}</>;
};
@mustafadalga
mustafadalga / App.tsx
Created August 13, 2023 10:41
Fetching Data Once Until Page Refresh with React Query:
import { QueryClient, QueryClientProvider } from 'react-query';
import Component from './Component';
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<Component />
</QueryClientProvider>