|
1 | 1 | import { sql } from "@codemirror/lang-sql"; |
| 2 | +import { |
| 3 | + ErrorBoundary, |
| 4 | + ErrorBoundaryProps, |
| 5 | + FallbackProps, |
| 6 | +} from "react-error-boundary"; |
| 7 | + |
2 | 8 | import { Grid } from "@githubocto/flat-ui"; |
3 | 9 | import CodeMirror from "@uiw/react-codemirror"; |
4 | 10 | import React, { useEffect, useMemo, useRef, useState } from "react"; |
@@ -31,6 +37,23 @@ interface DBExplorerInnerProps { |
31 | 37 |
|
32 | 38 | const VALID_EXTENSIONS = ["csv", "json"]; |
33 | 39 |
|
| 40 | +function ErrorFallback(props: FallbackProps) { |
| 41 | + const { error, resetErrorBoundary } = props; |
| 42 | + return ( |
| 43 | + <ErrorState img={Bug} alt={error.message}> |
| 44 | + <p>{error?.message}</p> |
| 45 | + <div className="mt-4"> |
| 46 | + <button |
| 47 | + className="inline-flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" |
| 48 | + onClick={resetErrorBoundary} |
| 49 | + > |
| 50 | + Reset Query |
| 51 | + </button> |
| 52 | + </div> |
| 53 | + </ErrorState> |
| 54 | + ); |
| 55 | +} |
| 56 | + |
34 | 57 | function DBExplorerInner(props: DBExplorerInnerProps) { |
35 | 58 | const { content, extension, filename, sha } = props; |
36 | 59 | const filenameWithoutExtension = filename.split(".").slice(0, -1).join("."); |
@@ -163,15 +186,22 @@ function DBExplorerInner(props: DBExplorerInnerProps) { |
163 | 186 | </div> |
164 | 187 | )} |
165 | 188 | {data && ( |
166 | | - <Grid |
167 | | - data={data.results} |
168 | | - diffData={undefined} |
169 | | - defaultSort={undefined} |
170 | | - defaultStickyColumnName={undefined} |
171 | | - defaultFilters={{}} |
172 | | - downloadFilename={filename} |
173 | | - onChange={() => {}} |
174 | | - /> |
| 189 | + <ErrorBoundary |
| 190 | + FallbackComponent={ErrorFallback} |
| 191 | + onReset={() => { |
| 192 | + setQuery(`select * from '${filenameWithoutExtension}'`); |
| 193 | + }} |
| 194 | + > |
| 195 | + <Grid |
| 196 | + data={data.results} |
| 197 | + diffData={undefined} |
| 198 | + defaultSort={undefined} |
| 199 | + defaultStickyColumnName={undefined} |
| 200 | + defaultFilters={{}} |
| 201 | + downloadFilename={filename} |
| 202 | + onChange={() => {}} |
| 203 | + /> |
| 204 | + </ErrorBoundary> |
175 | 205 | )} |
176 | 206 | </div> |
177 | 207 | </div> |
|
0 commit comments