use new vite

imWildCat · Nov 18, 2023 · 988aac6 · 988aac6
1 parent 24019e4
commit 988aac6
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 54 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,11 +14,13 @@
     "react-dom": "^18.2.0",
     "react-router": "^6.19.0",
     "react-router-dom": "^6.19.0",
+    "react-simple-maps": "^3.0.0",
     "react-tooltip": "^5.23.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "@types/react-simple-maps": "^3.0.3",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react-swc": "^3.5.0",

diff --git a/frontend/src/LegacyApp.tsx b/frontend/src/LegacyApp.tsx
@@ -2,29 +2,32 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import 'milligram';
 import "./index.scss";
-import { HashRouter as Router, NavLink, Route } from 'react-router-dom';
-import ScyllaBannerImage from './images/scylla_banner.png';
+import ScyllaBannerImage from './assets/scylla_banner.png';
 
 import ProxyIPList from "./components/ProxyList";
 import GeoDistribution from "./components/GeoDistribution";
 import Statistics from "./components/Statistics";
 
+import { BrowserRouter as Router, Routes, Route, NavLink } from 'react-router-dom';
 
-const AppRoute = () => (
+export const AppRoute = () => (
     <Router>
         <div>
             <div className="banner">
                 <img src={ScyllaBannerImage.replace('..', '')} alt="banner" />
             </div>
             <ul className="navigation">
-                <li><NavLink exact={true} to="/">Proxy IP List</NavLink></li>
+                <li><NavLink to="/">Proxy IP List</NavLink></li>
                 <li><NavLink to="/geo">Geometric Distribution</NavLink></li>
                 <li><NavLink to="/stats">Statistics</NavLink></li>
             </ul>
 
-            <Route exact path="/" component={ProxyIPList} />
-            <Route path="/geo" component={GeoDistribution} />
-            <Route path="/stats" component={Statistics} />
+            <Routes>
+                <Route path="/" element={<ProxyIPList location={"fixme"} />} />
+                <Route path="/geo" element={<GeoDistribution />} />
+                <Route path="/stats" element={<Statistics />} />
+            </Routes>
+
             <footer>
                 <div>
                     All rights reserved. Project <a href="https://github.com/imWildCat/scylla" target="_blank">Scylla</a>.
@@ -33,10 +36,3 @@ const AppRoute = () => (
         </div>
     </Router>
 );
-
-ReactDOM.render(
-    <div className="container">
-        <AppRoute />
-    </div>,
-    document.getElementById('app')
-);
diff --git a/frontend/src/components/GeoDistribution.tsx b/frontend/src/components/GeoDistribution.tsx
@@ -3,14 +3,13 @@ import axios from "axios";
 import {getBaseURL, Proxy, ResponseJSON} from "../utils";
 import {Tooltip} from "react-tooltip"
 
-const {
+import {
     ComposableMap,
     ZoomableGroup,
     Geographies,
     Geography,
-    Markers,
     Marker,
-} = require('react-simple-maps');
+} from 'react-simple-maps';
 
 export interface GeoDistributionProps {
 }
@@ -31,61 +30,42 @@ export default class GeoDistribution extends React.Component<GeoDistributionProp
     componentDidMount() {
         this.loadData();
     }
-
     render() {
-        // const position = [this.state.lat, this.state.lng];
         return (
             <div>
                 <ComposableMap style={{width: "100%"}}>
                     <ZoomableGroup>
-                        <Geographies
-                            geography={'https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-50m-simplified.json'}>
-                            {(geographies: any, projection: any) => geographies.map((geography: any) => {
-                                    return (
-                                        <Geography
-                                            key={geography.properties.ISO_A3 + '_' + geography.properties.NAME}
-                                            geography={geography}
-                                            projection={projection}
-                                            style={{
-                                                default: {fill: "#D8D8D8"},
-                                                hover: {fill: "#D8D8D8"},
-                                                pressed: {fill: "#D8D8D8"},
-                                            }}
-                                        />
-                                    );
-                                }
-                            )}
+                        <Geographies geography={'https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-50m-simplified.json'}>
+                            {({ geographies }) => geographies.map((geography) => (
+                                <Geography
+                                    key={geography.properties.ISO_A3 + '_' + geography.properties.NAME}
+                                    geography={geography}
+                                    style={{
+                                        default: {fill: "#D8D8D8"},
+                                        hover: {fill: "#D8D8D8"},
+                                        pressed: {fill: "#D8D8D8"},
+                                    }}
+                                />
+                            ))}
                         </Geographies>
-
+                        {/* Render markers here */}
                     </ZoomableGroup>
                 </ComposableMap>
                 <Tooltip />
             </div>
         );
     }
-
     renderMarker(proxy: Proxy): JSX.Element | null {
         const locationStr = proxy.location;
         if (locationStr) {
-            const locations = locationStr.split(',');
+            const locations = locationStr.split(',').map(coord => parseFloat(coord));
 
             return (
                 <Marker
                     key={proxy.id}
-                    proxy={proxy}
-                    marker={{coordinates: [locations[1], locations[0]]}}
-                    style={{
-                        default: {fill: this.mapProxyColor(proxy)},
-                        hover: {fill: "#999"},
-                        pressed: {fill: "#000"},
-                    }}
+                    coordinates={[locations[1], locations[0]]}
                 >
-                    <circle data-html={true} data-tooltip-id={proxy.id} data-tooltip-content={ proxy.ip + ":" + proxy.port + "<br>" + 
-                                                        proxy.country + ", " + proxy.city + "<br>" + 
-                                                        "latency: " + proxy.latency + "<br>" + 
-                                                        "anonymous: " + proxy.is_anonymous + "<br>" + 
-                                                        "https: " + proxy.is_https } 
-                                                        cx={0} cy={0} r={2}/>
+                    {/* ... */}
                 </Marker>
             );
         } else {

diff --git a/frontend_legacy/src/index.html → frontend/src/index.html b/frontend_legacy/src/index.html → frontend/src/index.html
diff --git a/frontend_legacy/src/index.scss → frontend/src/index.scss b/frontend_legacy/src/index.scss → frontend/src/index.scss
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
 import './index.css'
+import { AppRoute } from './LegacyApp.tsx'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <AppRoute />
   </React.StrictMode>,
 )