forked from Kieran/void.cat
Use react-router-dom
This commit is contained in:
parent
6f539a4102
commit
ad7b40df57
@ -9,6 +9,7 @@
|
||||
"@testing-library/user-event": "^13.2.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router-dom": "^6.2.1",
|
||||
"react-scripts": "5.0.0",
|
||||
"web-vitals": "^2.1.0"
|
||||
},
|
||||
|
5
VoidCat/spa/src/Admin/Admin.js
Normal file
5
VoidCat/spa/src/Admin/Admin.js
Normal file
@ -0,0 +1,5 @@
|
||||
export function Admin(props) {
|
||||
return (
|
||||
<h1>Admin</h1>
|
||||
);
|
||||
}
|
@ -1,23 +1,20 @@
|
||||
import { Fragment } from 'react';
|
||||
import { FilePreview } from "./FilePreview";
|
||||
import { Dropzone } from "./Dropzone";
|
||||
import { GlobalStats } from "./GlobalStats";
|
||||
import {FooterLinks} from "./FooterLinks";
|
||||
import {BrowserRouter, Routes, Route} from "react-router-dom";
|
||||
import {FilePreview} from "./FilePreview";
|
||||
import {HomePage} from "./HomePage";
|
||||
import {Admin} from "./Admin/Admin";
|
||||
|
||||
import './App.css';
|
||||
|
||||
function App() {
|
||||
let hasPath = window.location.pathname !== "/";
|
||||
return (
|
||||
<div className="app">
|
||||
{hasPath ? <FilePreview id={window.location.pathname.substring(1)} />
|
||||
: (
|
||||
<Fragment>
|
||||
<Dropzone />
|
||||
<GlobalStats />
|
||||
<FooterLinks />
|
||||
</Fragment>
|
||||
)}
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route exact path="/" element={<HomePage/>}/>
|
||||
<Route path="/admin" element={<Admin/>}/>
|
||||
<Route exact path="/:id" element={<FilePreview/>}/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,19 +1,21 @@
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
|
||||
import "./FilePreview.css";
|
||||
import {Fragment, useEffect, useState} from "react";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {TextPreview} from "./TextPreview";
|
||||
|
||||
export function FilePreview(props) {
|
||||
let [info, setInfo] = useState();
|
||||
import "./FilePreview.css";
|
||||
|
||||
export function FilePreview() {
|
||||
const params = useParams();
|
||||
const [info, setInfo] = useState();
|
||||
|
||||
async function loadInfo() {
|
||||
let req = await fetch(`/upload/${props.id}`);
|
||||
let req = await fetch(`/upload/${params.id}`);
|
||||
if (req.ok) {
|
||||
let info = await req.json();
|
||||
setInfo(info);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function renderTypes() {
|
||||
let link = `/d/${info.id}`;
|
||||
if (info.metadata) {
|
||||
@ -21,17 +23,17 @@ export function FilePreview(props) {
|
||||
case "image/jpg":
|
||||
case "image/jpeg":
|
||||
case "image/png": {
|
||||
return <img src={link} alt={info.metadata.name} />;
|
||||
return <img src={link} alt={info.metadata.name}/>;
|
||||
}
|
||||
case "video/mp4":
|
||||
case "video/matroksa":
|
||||
case "video/x-matroska":
|
||||
case "video/webm":
|
||||
case "video/webm":
|
||||
case "video/quicktime": {
|
||||
return <video src={link} controls />;
|
||||
return <video src={link} controls/>;
|
||||
}
|
||||
case "text/plain":{
|
||||
return <TextPreview link={link}></TextPreview>;
|
||||
case "text/plain": {
|
||||
return <TextPreview link={link}/>;
|
||||
}
|
||||
case "application/pdf": {
|
||||
return <object data={link}/>;
|
||||
@ -49,8 +51,7 @@ export function FilePreview(props) {
|
||||
<div className="preview">
|
||||
{info ? (
|
||||
<Fragment>
|
||||
this.Download(
|
||||
<a className="btn" href={`/d/${info.id}`}>{info.metadata?.name ?? info.id}</a>)
|
||||
this.Download(<a className="btn" href={`/d/${info.id}`}>{info.metadata?.name ?? info.id}</a>)
|
||||
{renderTypes()}
|
||||
</Fragment>
|
||||
) : "Not Found"}
|
||||
|
14
VoidCat/spa/src/HomePage.js
Normal file
14
VoidCat/spa/src/HomePage.js
Normal file
@ -0,0 +1,14 @@
|
||||
import {Fragment} from "react";
|
||||
import {Dropzone} from "./Dropzone";
|
||||
import {GlobalStats} from "./GlobalStats";
|
||||
import {FooterLinks} from "./FooterLinks";
|
||||
|
||||
export function HomePage(props) {
|
||||
return (
|
||||
<Fragment>
|
||||
<Dropzone/>
|
||||
<GlobalStats/>
|
||||
<FooterLinks/>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
@ -1022,6 +1022,13 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.7.6":
|
||||
version "7.17.2"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
|
||||
integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/template@^7.16.7", "@babel/template@^7.3.3":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
|
||||
@ -4370,6 +4377,13 @@ he@^1.2.0:
|
||||
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
|
||||
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
|
||||
|
||||
history@^5.2.0:
|
||||
version "5.2.0"
|
||||
resolved "https://registry.yarnpkg.com/history/-/history-5.2.0.tgz#7cdd31cf9bac3c5d31f09c231c9928fad0007b7c"
|
||||
integrity sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
|
||||
hoopy@^0.1.4:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
|
||||
@ -6899,6 +6913,21 @@ react-refresh@^0.11.0:
|
||||
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
|
||||
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
|
||||
|
||||
react-router-dom@^6.2.1:
|
||||
version "6.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.1.tgz#32ec81829152fbb8a7b045bf593a22eadf019bec"
|
||||
integrity sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==
|
||||
dependencies:
|
||||
history "^5.2.0"
|
||||
react-router "6.2.1"
|
||||
|
||||
react-router@6.2.1:
|
||||
version "6.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.2.1.tgz#be2a97a6006ce1d9123c28934e604faef51448a3"
|
||||
integrity sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==
|
||||
dependencies:
|
||||
history "^5.2.0"
|
||||
|
||||
react-scripts@5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.0.tgz#6547a6d7f8b64364ef95273767466cc577cb4b60"
|
||||
|
Loading…
Reference in New Issue
Block a user