Skip to content

Instantly share code, notes, and snippets.

View hypeJunction's full-sized avatar

Ismayil Khayredinov hypeJunction

View GitHub Profile
@hypeJunction
hypeJunction / ApiClient.ts
Last active May 1, 2021 08:30
Solid Design Systems - Data Fetching
import { RequestOptions, Transport } from "./HttpTransportProvider";
import {
createMutationRequest,
createQueryRequest,
} from "./HttpTransportService";
export class ApiClient {
readonly baseUrl: string;
readonly transport: Transport;
@hypeJunction
hypeJunction / App.tsx
Last active May 1, 2021 08:27
Solid Design System - Inversion of Control
import React, { useEffect, useState } from "react";
import { DateTimeFormat } from "./DateTimeProvider";
import { FormattedDateTime } from "./FormattedDateTime";
import { ServiceProvider } from "./ServiceProvider";
import { Services, services } from "./Services";
import { useTimer } from "./Timer";
export const now = () => new Date();
export function App() {
import { createContext, ReactNode, useContext, useEffect, useState } from "react";
export enum DateTimeFormat {
TIME,
ISO,
RELATIVE
}
export interface DateTimeFormatterProps {
format: DateTimeFormat;
import {
DateTimeFormat,
DateTimeFormatterProps,
useDateTimeFormatter,
} from "./utils/datetime";
export const FormattedDateTime = ({ format, date }: DateTimeFormatterProps) => {
const { formatDateTime } = useDateTimeFormatter();
return (
function MessageView () {
const {
context: {
message
}
} = useMachineState()
return (
<>
<p>Your message to {message.recipient} has been sent</p>
function ComposerView () {
const saveDraft = useMachineTransition('save_draft')
const send = useMachineTransition('send')
const {
context: {
message
}
} = useMachineState()
function App () {
return (
<StateMachine
states={states}
initialContext={{
message: {
recipient: '',
text: '',
}
}}
export function Transition
({
transitionName,
payload = {}
}) {
const transition = useMachineTransition(transitionName)
useEffect(() => {
transition.execute(payload)
})
export function useMachineTransition (transitionName) {
const {
states,
state,
setState,
context,
setContext,
} = useContext(StateMachineContext)
return useAsyncCallback(async (payload = {}) => {
const loadDraft = ({ context, setContext }) => {
console.log('Context before action', context);
const draft = localStorage.getItem('draft')
if (draft) {
setContext((state) => {
return {
...state,
message: JSON.parse(draft)