Set up basic frontend UI

lhbin · Apr 29, 2018 · 470324a · 470324a
1 parent ac56e34
commit 470324a
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 0 deletions.
diff --git a/frontend/src/components/ProxyList.tsx b/frontend/src/components/ProxyList.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+import axios from 'axios';
+
+export interface AppState {
+    timesClicked: number;
+    on: boolean;
+}
+
+export default class ProxyIPList extends React.Component<{}, AppState> {
+    private initialState: AppState = {timesClicked: 0, on: false};
+
+    constructor(props: {}) {
+        super(props);
+        this.state = this.initialState;
+    }
+
+    render(): JSX.Element {
+        // const { timesClicked, on } = this.state;
+        return (
+            <div>
+                proxy ip list
+            </div>
+        );
+    }
+
+    componentDidMount() {
+        axios.get('http://localhost:8000/api/v1/proxies')
+    }
+
+}
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+<div id="app"></div>
+<script src="./index.tsx"></script>
+</body>
+</html>
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
@@ -0,0 +1,3 @@
+body {
+  background-color: #0e84b5;
+}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import "./index.scss";
+import ProxyIPList from "./components/ProxyList";
+
+// import App from "./components/App";
+
+ReactDOM.render(
+    <div className="container">
+        <ProxyIPList/>
+    </div>,
+    document.getElementById('app')
+);
diff --git a/package.json b/package.json
@@ -8,6 +8,10 @@
     "test": "tests"
   },
   "scripts": {
+    "start": "parcel serve frontend/src/index.html",
+    "build": "cross-env NODE_ENV=production parcel build src/index.html --public-url .",
+    "watch": "parcel watch src/index.html",
+    "predeploy": "npm run build",
     "test": "null"
   },
   "repository": {
@@ -25,7 +29,16 @@
   },
   "homepage": "https://github.com/imWildCat/scylla#readme",
   "devDependencies": {
+    "@types/react": "^16.3.13",
+    "@types/react-dom": "^16.0.5",
+    "cross-env": "^5.1.4",
     "parcel-bundler": "^1.7.1",
     "typescript": "^2.8.3"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "node-sass": "^4.9.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.3.2"
   }
 }
diff --git a/scylla/web/server.py b/scylla/web/server.py
@@ -2,12 +2,14 @@
 from sanic import Sanic
 from sanic.request import Request
 from sanic.response import json
+from sanic_cors import CORS
 
 from scylla.database import ProxyIP
 from scylla.loggings import logger
 
 app = Sanic()
 
+CORS(app)
 
 # @app.route('/')
 # async def test(request: Request):

diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "newLine": "LF",
+    "outDir": "./lib/",
+    "target": "es5",
+    "sourceMap": true,
+    "declaration": true,
+    "jsx": "preserve",
+    "lib": [
+      "es2017",
+      "dom"
+    ],
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    ".git",
+    "node_modules",
+    "scylla",
+    "./tests",
+    "./docs"
+  ]
+}