started new docs draft

2024-08-26 11:53:21 +02:00
parent f1d754a1cb
commit 341337fc80
75 changed files with 4385 additions and 0 deletions
@@ -0,0 +1,84 @@
+```ts copy filename="mixFetchExample.tsx"
+import React, { useState } from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { mixFetch } from '@nymproject/mix-fetch-full-fat';
+import Stack from '@mui/material/Stack';
+import Paper from '@mui/material/Paper';
+import type { SetupMixFetchOps } from '@nymproject/mix-fetch';
+
+const defaultUrl = 'https://nymtech.net/favicon.svg';
+const args = { mode: 'unsafe-ignore-cors' };
+
+const mixFetchOptions: SetupMixFetchOps = {
+  preferredGateway: '6Gb7ftQdKveMjPyrxDXeAtfYAX7Zg5mVZHtnRC5MmZ1B', // with WSS
+  preferredNetworkRequester:
+    '8rRGWy54oC8drFL9DepMegBt2DLrsqQwCoHMXt9nsnTo.2XjCPVbb4FpQ9hNRcXwb9mTzEAVVk1zf1tcch3wdtNEA@6Gb7ftQdKveMjPyrxDXeAtfYAX7Zg5mVZHtnRC5MmZ1B',
+  mixFetchOverride: {
+    requestTimeoutMs: 60_000,
+  },
+  forceTls: true, // force WSS
+  extra: {},
+};
+
+export const MixFetch = () => {
+  const [url, setUrl] = useState<string>(defaultUrl);
+  const [html, setHtml] = useState<string>();
+  const [busy, setBusy] = useState<boolean>(false);
+
+  const handleFetch = async () => {
+    try {
+      setBusy(true);
+      setHtml(undefined);
+      const response = await mixFetch(url, args, mixFetchOptions);
+      console.log(response);
+      const resHtml = await response.text();
+      setHtml(resHtml);
+    } catch (err) {
+      console.log(err);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div style={{ marginTop: '1rem' }}>
+      <Stack direction="row">
+        <TextField
+          disabled={busy}
+          fullWidth
+          label="URL"
+          type="text"
+          variant="outlined"
+          defaultValue={defaultUrl}
+          onChange={(e) => setUrl(e.target.value)}
+        />
+        <Button variant="outlined" disabled={busy} sx={{ marginLeft: '1rem' }} onClick={handleFetch}>
+          Fetch
+        </Button>
+      </Stack>
+
+      {busy && (
+        <Box mt={4}>
+          <CircularProgress />
+        </Box>
+      )}
+      {html && (
+        <>
+          <Box mt={4}>
+            <strong>Response</strong>
+          </Box>
+          <Paper sx={{ p: 2, mt: 1 }} elevation={4}>
+            <Typography fontFamily="monospace" fontSize="small">
+              {html}
+            </Typography>
+          </Paper>
+        </>
+      )}
+    </div>
+  );
+};
+```