Skip to content

Instantly share code, notes, and snippets.

View AlexMachin1997's full-sized avatar
🎯

Alex Machin AlexMachin1997

🎯
View GitHub Profile
@AlexMachin1997
AlexMachin1997 / TanStackQuery.ts
Last active April 17, 2024 19:55
Example usage of TanStack table and query (Allows both the use of using a meta framework e.g. nextjs pages directory which will update the url and for you to just use state if you want to just us pure client side actions)
import * as React from 'react';
import { useQuery, QueryKey } from '@tanstack/react-query';
import axios, { AxiosRequestHeaders } from 'axios';
import { newResource, Resource } from '@models/resource';
import { PaginationState, SortingState } from '@tanstack/react-table';
const INITIAL_STATE: { pagination: PaginationState; sort: SortingState } = {
pagination: {
pageIndex: 0,
@AlexMachin1997
AlexMachin1997 / A.ts
Last active July 22, 2023 19:09
A.ts uses generics without inferring from a utility function response. B.ts uses generics with infering the result from the newResource utility function response.
import * as React from 'react';
import { useQuery, QueryKey } from '@tanstack/react-query';
import axios, { AxiosRequestHeaders } from 'axios';
import { newResource, Resource } from '@models/resource';
const INITIAL_STATE = {
page: 1,
resultsPerPage: 20,
sort: '',
const metricsService = require("../services/MetricsService");
const logger = require("../utils/Logger");
/**
* The GET action for /api/v1.0.0/metrics
*/
exports.download = (_, res) => {
try {
// Get the in memory metrics file (Either comes from /metrics folder in the project or the kubernetes persistent storage)
const { name, contentType, lastModified, size } =
@AlexMachin1997
AlexMachin1997 / vite.config.ts
Created March 17, 2023 15:16
vite.config.ts
/// <reference types="vite/client" />
/// <reference types="vitest" />
import { defineConfig, splitVendorChunkPlugin } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
// Provide any plugins required for Vite to work and perform additional setup.
@AlexMachin1997
AlexMachin1997 / index.tsx
Created February 7, 2023 10:43
Attempting to have a strongly typed React Context
import * as React from "react";
import PropTypes from "prop-types";
export const AuthRequiredModalContext = React.createContext<boolean>(false);
interface AuthRequiredContextInterface {
isAuthRequiredModalOpen: boolean;
setIsAuthRequiredModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
}
<Menu as='div' className='relative inline-block text-left'>
<Menu.Button
ref={setReferenceElement}
className='inline-flex w-full justify-center rounded-md bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75'
>
Options
</Menu.Button>
<Transition
as={React.Fragment}
import * as React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useVirtualizer } from '@tanstack/react-virtual';
import { RadioGroup } from '@headlessui/react';
import Icon from '../Icon/Icon';
import CountryFlag from '../../CountryFlag/CountryFlag';