add common route url builder

docs/package.json

@@ -20,10 +20,12 @@
     "framer-motion": "^5.6.0",
     "fuse.js": "^6.5.3",
     "react": "^17.0.2",
+    "react-async-hook": "^4.0.0",
     "react-colorful": "^5.5.1",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.3.1",
+    "react-json-view": "^1.21.3",
     "react-router-dom": "^6.2.1",
     "use-local-storage": "^2.3.6"
   },

docs/src/lib/pages/builder/components/ModalSourceUnavailable.tsx

@@ -31,7 +31,7 @@ const ModalSourceUnavailable = ({ isOpen, source }: { isOpen: boolean; source: s
         </ModalHeader>
         <ModalBody>
           Seems that <Code>{source}</Code> is not available yet. But maybe you are looking for:{' '}
-          <Link as={RouterLink} to="/construction" color="purple.400">
+          <Link as={RouterLink} to="/common" color="purple.400">
             the <Code colorScheme="purple">/common</Code> route
           </Link>
           ?

docs/src/lib/pages/builder/index.tsx

@@ -28,9 +28,9 @@ import ModalEditBadge from './components/ModalEditBadge'
 import ModalSourceUnavailable from './components/ModalSourceUnavailable'
 
 // API prefix for all routes
-const API = 'https://api.swo.moe/stats'
+export const API = 'https://api.swo.moe/stats'
 
-const BuilderItem = ({ value, description }: { value: string; description: string }) => {
+export const BuilderItem = ({ value, description }: { value: string; description: string }) => {
   const { hasCopied, onCopy } = useClipboard(value)
   return (
     <FormControl>

docs/src/lib/pages/common/components/UnderConstruction.tsx

@@ -0,0 +1,14 @@
+import { Box, Text, Image } from '@chakra-ui/react'
+
+const UnderConstruction = () => {
+  return (
+    <Box>
+      <Box maxWidth={[280, 300]} marginX="auto">
+        <Image width={300} src="/assets/flame-design-science.png" />
+      </Box>
+      <Text align="center">Under construction...</Text>
+    </Box>
+  )
+}
+
+export default UnderConstruction

docs/src/lib/pages/common/index.tsx

@@ -0,0 +1,121 @@
+import {
+  Alert,
+  AlertIcon,
+  Box,
+  Button,
+  Center,
+  Code,
+  Divider,
+  Flex,
+  FormControl,
+  FormLabel,
+  Input,
+  Link,
+  SkeletonText,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import React, { useState } from 'react'
+import { useAsync } from 'react-async-hook'
+import { AiOutlineApi } from 'react-icons/ai'
+import ReactJson from 'react-json-view'
+import useLocalStorage from 'use-local-storage'
+import { API, BuilderItem } from '../builder'
+
+const DataContainer = ({ api }: { api: string }) => {
+  const fetchApi = async (api: string) => (await fetch(api)).json()
+  // If the API URL is empty, return empty component
+  if (!api) return <Text>...</Text>
+
+  const { loading, error, result } = useAsync(fetchApi, [api])
+  if (error)
+    return (
+      <Alert status="error">
+        <AlertIcon />
+        <Text>
+          An error occured. Maybe it's because of{' '}
+          <Link color="red.600" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" isExternal>
+            CORS
+          </Link>
+          ?
+        </Text>
+      </Alert>
+    )
+  if (loading) return <SkeletonText spacing={4} noOfLines={4} />
+  return (
+    <Box maxHeight={56} overflowY="scroll">
+      <ReactJson src={result} theme={useColorModeValue('rjv-default', 'railscasts')} />
+    </Box>
+  )
+}
+
+const Common = () => {
+  const [userEnteredApi, setUserEnteredApi] = useLocalStorage<string>('common.api', '')
+  const [apiToFetch, setApiToFetch] = useState<string>('')
+  const onSetUserEnteredApi = (e: React.ChangeEvent<HTMLInputElement>) => setUserEnteredApi(e.target.value)
+
+  const [dataPath, setDataPath] = useLocalStorage<string>('common.datapath', '')
+  const onSetDataPath = (e: React.ChangeEvent<HTMLInputElement>) => setDataPath(e.target.value)
+
+  const apiUrl = `${API}/common/?endpoint=${userEnteredApi}&datapath=${dataPath}`
+
+  return (
+    <Flex gap={4} direction="column">
+      <Center flexDirection="column">
+        <AiOutlineApi size={40} />
+        <Text fontWeight="bold" fontSize="lg" mt={4}>
+          The{' '}
+          <Code colorScheme="orange" fontSize="md">
+            /common
+          </Code>{' '}
+          route
+        </Text>
+      </Center>
+
+      <Alert variant="left-accent" colorScheme="gray" mt={4}>
+        <Text>
+          This route is for querying arbitrary API endpoints with a simple GET request.{' '}
+          <Link href="https://github.com/spencerwooo/substats#advanced-" isExternal color="orange.500">
+            How to use this?
+          </Link>
+        </Text>
+      </Alert>
+
+      <FormControl>
+        <FormLabel fontSize="xs" textTransform="uppercase" fontWeight="medium" letterSpacing="widest">
+          Your Endpoint
+        </FormLabel>
+        <Flex>
+          <Input
+            value={userEnteredApi}
+            placeholder="https://api.example.com/v1/endpoint"
+            onChange={onSetUserEnteredApi}
+          />
+          <Button ml={2} onClick={() => setApiToFetch(userEnteredApi)}>
+            TEST
+          </Button>
+        </Flex>
+      </FormControl>
+
+      <Text mb={-2} fontSize="xs" textTransform="uppercase" fontWeight="medium" letterSpacing="widest">
+        Result
+      </Text>
+      <Box p={4} border="1px" borderColor="inherit" borderRadius="md">
+        <DataContainer api={apiToFetch} />
+      </Box>
+
+      <FormControl>
+        <FormLabel fontSize="xs" textTransform="uppercase" fontWeight="medium" letterSpacing="widest">
+          Your datapath
+        </FormLabel>
+        <Input value={dataPath} placeholder="path.to.your.data" onChange={onSetDataPath} />
+      </FormControl>
+
+      <Divider my={4} />
+
+      <BuilderItem value={apiUrl} description="API URL" />
+    </Flex>
+  )
+}
+
+export default Common

docs/src/lib/pages/home/index.tsx

@@ -51,7 +51,7 @@ const Home = () => {
         <Badge colorScheme="purple" mr={2}>
           new
         </Badge>
-        <Link to="/construction" as={RouterLink}>
+        <Link to="/common" as={RouterLink}>
           <Text mr={2}>
             Looking for: The <Code>/common</Code> route?
           </Text>

docs/src/routes.tsx

@@ -3,6 +3,7 @@ import type { PathRouteProps } from 'react-router-dom'
 import Construction from 'lib/pages/construction'
 import Home from 'lib/pages/home'
 import Builder from 'lib/pages/builder'
+import Common from './lib/pages/common'
 
 export const routes: Array<PathRouteProps> = [
   {
@@ -13,6 +14,10 @@ export const routes: Array<PathRouteProps> = [
     path: '/s/:source',
     element: <Builder />,
   },
+  {
+    path: '/common',
+    element: <Common />,
+  },
   {
     path: '/construction',
     element: <Construction />,