Add basic logic for fetching data from backend

frontend/src/components/ProxyList.tsx

@@ -2,12 +2,11 @@ import * as React from "react";
 import axios from 'axios';
 
 export interface AppState {
-    timesClicked: number;
-    on: boolean;
+    proxies: Array<any>,
 }
 
 export default class ProxyIPList extends React.Component<{}, AppState> {
-    private initialState: AppState = {timesClicked: 0, on: false};
+    private initialState: AppState = {proxies: []};
 
     constructor(props: {}) {
         super(props);
@@ -19,12 +18,35 @@ export default class ProxyIPList extends React.Component<{}, AppState> {
         return (
             <div>
                 proxy ip list
+
+                {this.renderList()}
+            </div>
+        );
+    }
+
+    renderList(): JSX.Element {
+        return (
+            <div>
+                {this.state.proxies.map(p => {
+                    return (
+                        <div key={'proxy-' + p.id}>
+                            <p>{p.ip}</p>
+                        </div>
+                    )
+                })}
             </div>
         );
     }
 
     componentDidMount() {
-        axios.get('http://localhost:8000/api/v1/proxies')
+        this.loadData();
+    }
+
+    async loadData() {
+        const response = await axios.get('http://localhost:8000/api/v1/proxies');
+        const proxies: [any] = response.data.proxies;
+        console.log(proxies);
+        this.setState({proxies: proxies})
     }
 
 }

frontend/src/index.scss

@@ -1,3 +1,2 @@
 body {
-  background-color: #0e84b5;
 }

scylla/web/server.py

@@ -11,14 +11,16 @@
 
 CORS(app)
 
+
 # @app.route('/')
 # async def test(request: Request):
 #     return json({'hello': 'world', 'args': request.raw_args})
 
 
 @app.route('/api/v1/proxies')
 async def api_v1_proxies(request: Request):
-    proxies = ProxyIP.select().where(ProxyIP.latency > 0).where(ProxyIP.is_valid == True) \
+    proxies = ProxyIP.select().where(ProxyIP.latency > 0).where(ProxyIP.latency < 9999) \
+        .where(ProxyIP.is_valid == True) \
         .order_by(ProxyIP.updated_at.desc(), ProxyIP.latency).limit(20)
 
     logger.debug('Perform SQL query: ', proxies.sql())