Skip to content

Commit

Permalink
Merge branch 'snackbar'
Browse files Browse the repository at this point in the history
  • Loading branch information
jgentes committed Nov 24, 2023
2 parents 4f517c8 + 0c826a1 commit 93202e1
Show file tree
Hide file tree
Showing 14 changed files with 679 additions and 444 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,6 @@ todo.md
# cloudflare
.wrangler/
functions/

# Sentry Config File
.sentryclirc
10 changes: 0 additions & 10 deletions app/api/db/appState.ts
Original file line number Diff line number Diff line change
Expand Up @@ -94,22 +94,12 @@ const { useStore: modalState, setStore: setModalState } = createStore<
openState: false
})

// NotificationState is an alert handler
const { useStore: notificationState } = createStore<{
message: string | null
variant: 'success' | 'error' | 'warning' | 'info'
}>({
message: '',
variant: 'error'
})

export {
AppState,
audioState,
getAppState,
getAudioState,
modalState,
notificationState,
setAppState,
setAudioState,
setModalState
Expand Down
65 changes: 43 additions & 22 deletions app/components/InitialLoader.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
// InitialLoader is used to hide the flash of unstyled content

import { Icon } from '@iconify-icon/react'
import { CircularProgress, styled } from '@mui/joy'
import { Button, CircularProgress, styled } from '@mui/joy'
import { useNavigate } from '@remix-run/react'
import Logo from '~/components/layout/MixpointLogo'

const LoaderWrapDiv = styled('div')`
Expand Down Expand Up @@ -33,26 +36,44 @@ const LoaderSubtext = styled('span')(({ theme }) => ({
color: theme.palette.text.primary
}))

const InitialLoader = ({ message }: { message?: string }) => (
<LoaderWrapDiv>
<LoaderDiv>
<LoaderRow style={{ paddingBottom: '4px' }}>
<Logo />
{message ? (
<Icon
icon="material-symbols:warning"
height="20px"
style={{ alignSelf: 'center', color: 'action', paddingTop: '4px' }}
/>
) : (
<CircularProgress color="primary" size="sm" variant="soft" />
)}
</LoaderRow>
<LoaderRow style={{ borderTop: '1px solid #e2e2e2' }}>
<LoaderSubtext>{message || 'Please Wait. Loading...'}</LoaderSubtext>
</LoaderRow>
</LoaderDiv>
</LoaderWrapDiv>
)
const InitialLoader = ({ message }: { message?: string }) => {
const navigate = useNavigate()
return (
<LoaderWrapDiv>
{!message ? null : (
<Button
variant="outlined"
color="primary"
size="sm"
sx={{ position: 'fixed', top: '50px' }}
onClick={() => navigate('/')}
>
Go Back
</Button>
)}
<LoaderDiv>
<LoaderRow style={{ paddingBottom: '4px' }}>
<Logo />
{message ? (
<Icon
icon="material-symbols:warning"
height="20px"
style={{
alignSelf: 'center',
color: 'action',
paddingTop: '4px'
}}
/>
) : (
<CircularProgress color="primary" size="sm" variant="soft" />
)}
</LoaderRow>
<LoaderRow style={{ borderTop: '1px solid #e2e2e2' }}>
<LoaderSubtext>{message || 'Please Wait. Loading...'}</LoaderSubtext>
</LoaderRow>
</LoaderDiv>
</LoaderWrapDiv>
)
}

export default InitialLoader
42 changes: 0 additions & 42 deletions app/components/layout/Layout.tsx

This file was deleted.

58 changes: 35 additions & 23 deletions app/entry.client.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,35 @@
import { RemixBrowser } from '@remix-run/react'
import { StrictMode, startTransition } from 'react'
import { hydrateRoot } from 'react-dom/client'

function hydrate() {
startTransition(() => {
hydrateRoot(
// biome-ignore lint/style/noNonNullAssertion: from remix-island
document.getElementById('root')!,
<StrictMode>
<RemixBrowser />
</StrictMode>
)
})
}

if (typeof requestIdleCallback === 'function') {
requestIdleCallback(hydrate)
} else {
// Safari doesn't support requestIdleCallback
// https://caniuse.com/requestidlecallback
setTimeout(hydrate, 1)
}
import * as Sentry from "@sentry/remix";
import { RemixBrowser, useLocation, useMatches } from '@remix-run/react';
import { StrictMode, startTransition, useEffect } from 'react';
import { hydrateRoot } from 'react-dom/client'

Sentry.init({
dsn: "https://0158c725913324618a2d2e625ffb9fde@o4506276018192384.ingest.sentry.io/4506276020092928",
tracesSampleRate: 1,
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1,

integrations: [new Sentry.BrowserTracing({
routingInstrumentation: Sentry.remixRouterInstrumentation(useEffect, useLocation, useMatches)
}), new Sentry.Replay()]
})

function hydrate() {
startTransition(() => {
hydrateRoot(
// biome-ignore lint/style/noNonNullAssertion: from remix-island
document.getElementById('root')!,
<StrictMode>
<RemixBrowser />
</StrictMode>
)
})
}

if (typeof requestIdleCallback === 'function') {
requestIdleCallback(hydrate)
} else {
// Safari doesn't support requestIdleCallback
// https://caniuse.com/requestidlecallback
setTimeout(hydrate, 1)
}
154 changes: 77 additions & 77 deletions app/entry.server.tsx
Original file line number Diff line number Diff line change
@@ -1,77 +1,77 @@
import type { EntryContext } from '@remix-run/cloudflare'
import { RemixServer } from '@remix-run/react'
import { renderHeadToString } from 'remix-island'
import { Head } from './root'

import { renderToReadableStream } from 'react-dom/server'

export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
return handleBrowserRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
)
}

async function handleBrowserRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
const didError = false
const readable = await renderToReadableStream(
<RemixServer context={remixContext} url={request.url} />
)

responseHeaders.set('Content-Type', 'text/html')
const stream = new ReadableStream({
start(controller) {
// Add the HTML head to the response
const head = renderHeadToString({ request, remixContext, Head })
controller.enqueue(
new Uint8Array(
new TextEncoder().encode(
`<!DOCTYPE html><html><head>${head}</head><body><div id="root">`
)
)
)

const reader = readable.getReader()
function read() {
reader
.read()
.then(({ done, value }) => {
if (done) {
controller.enqueue(
new Uint8Array(new TextEncoder().encode('</div></body></html>'))
)
controller.close()
return
}
controller.enqueue(value)
read()
})
.catch(error => {
controller.error(error)
readable.cancel()
})
}
read()
},
cancel() {
readable.cancel()
}
})

return new Response(stream, {
headers: responseHeaders,
status: didError ? 500 : responseStatusCode
})
}
import { type EntryContext } from '@remix-run/cloudflare'
import { RemixServer } from '@remix-run/react'
import { renderHeadToString } from 'remix-island'
import { Head } from './root'

import { renderToReadableStream } from 'react-dom/server'

export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
return handleBrowserRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
)
}

async function handleBrowserRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
const didError = false
const readable = await renderToReadableStream(
<RemixServer context={remixContext} url={request.url} />
)

responseHeaders.set('Content-Type', 'text/html')
const stream = new ReadableStream({
start(controller) {
// Add the HTML head to the response
const head = renderHeadToString({ request, remixContext, Head })
controller.enqueue(
new Uint8Array(
new TextEncoder().encode(
`<!DOCTYPE html><html><head>${head}</head><body><div id="root">`
)
)
)

const reader = readable.getReader()
function read() {
reader
.read()
.then(({ done, value }) => {
if (done) {
controller.enqueue(
new Uint8Array(new TextEncoder().encode('</div></body></html>'))
)
controller.close()
return
}
controller.enqueue(value)
read()
})
.catch(error => {
controller.error(error)
readable.cancel()
})
}
read()
},
cancel() {
readable.cancel()
}
})

return new Response(stream, {
headers: responseHeaders,
status: didError ? 500 : responseStatusCode
})
}
Loading

0 comments on commit 93202e1

Please sign in to comment.