Merge pull request #32 from 10-academy-w-9/frontend

Front end and Backend communication complete

app/__init__.py

@@ -3,6 +3,7 @@
 from flask_jwt_extended import JWTManager
 from flask_bcrypt import Bcrypt
 import threading
+from flask_cors import CORS  
 
 db = SQLAlchemy()
 jwt = JWTManager()
@@ -19,11 +20,14 @@ def create_app():
     jwt.init_app(app)
     bcrypt.init_app(app)
 
+    CORS(app)
+
     with app.app_context():
-        from app.routes import auth, backtest, index
+        from app.routes import auth, backtest, index, data
         app.register_blueprint(auth.bp)
         app.register_blueprint(backtest.bp)
         app.register_blueprint(index.bp)
+        app.register_blueprint(data.bp)
         db.create_all()
 
     return app

app/models/backtest.py

@@ -39,3 +39,9 @@ class Metric(db.Model):
     backtest_id = db.Column(db.Integer, db.ForeignKey('backtests.id'), nullable=False)
     metric_name = db.Column(db.String(255))
     metric_value = db.Column(db.Numeric(10, 2))
+
+class Coin(db.Model):
+    __tablename__ = 'coins'
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String(255))
+    description = db.Column(db.Text)

app/routes/data.py

@@ -0,0 +1,31 @@
+# Import necessary modules
+import threading
+from flask import Blueprint, request, jsonify, current_app
+from flask_jwt_extended import jwt_required
+from app import db
+from app.models.backtest import Indicator, Coin
+from app.services.backtest_service import run_backtest_by_id
+from app.services.kafka_service import kafka_service
+
+# Define Blueprint
+bp = Blueprint('data', __name__)
+
+# Endpoint for fetching coins
+@bp.route('/coins', methods=['GET'])
+@jwt_required()
+def fetch_coins():
+    # Assuming you have a model named Coin
+    coins = Coin.query.all()
+    coin_list = [{'id': coin.id, 'name': coin.name, 'symbol': coin.symbol} for coin in coins]
+
+    return jsonify({'coins': coin_list}), 200
+
+# Endpoint for fetching indicators
+@bp.route('/indicators', methods=['GET'])
+@jwt_required()
+def fetch_indicators():
+    # Assuming you have a model named Indicator
+    indicators = Indicator.query.all()
+    indicator_list = [{'id': indicator.id, 'name': indicator.name, 'description': indicator.description} for indicator in indicators]
+    print(indicator_list)
+    return jsonify({'indicators': indicator_list}), 200

frontend/src/App.js

@@ -1,19 +1,48 @@
-// src/App.js
+// App.js
 
-import React from 'react';
-import './App.css';
+import React, { useState, useEffect } from 'react';
 import Login from './Login';
 import BacktestForm from './BacktestForm';
 
 function App() {
+  const [token, setToken] = useState('');
+
+  // Function to check if user is authenticated
+  useEffect(() => {
+    const storedToken = localStorage.getItem('token');
+    if (storedToken) {
+      setToken(storedToken);
+    }
+  }, [token]);
+
+  // Function to handle logout (optional)
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    setToken('');
+  };
+
   return (
-    <div className="App">
-      {/* <header className="App-header">
-        <h1>Welcome to Backtest App</h1>
-      </header> */}
-      <main>
-        <BacktestForm />
-      </main>
+    <div className="min-h-screen flex flex-col">
+      {token ? (
+        <>
+          <nav className="bg-gray-800 p-4">
+            <div className="container mx-auto flex justify-between items-center">
+              <h1 className="text-white text-xl">Backtest Application</h1>
+              <button
+                onClick={handleLogout}
+                className="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-md"
+              >
+                Logout
+              </button>
+            </div>
+          </nav>
+          <div className="container mx-auto mt-4">
+            <BacktestForm token={token} />
+          </div>
+        </>
+      ) : (
+        <Login setToken={setToken} />
+      )}
     </div>
   );
 }

frontend/src/BacktestForm.js

@@ -3,17 +3,16 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 
-const API_BASE_URL = 'https://your-api-base-url.com/api'; // Replace with your actual API base URL
+const API_BASE_URL = 'http://localhost:5000/'; 
 
-const BacktestForm = () => {
+const BacktestForm = ({ token }) => {
   const [formData, setFormData] = useState({
     coin: '',
     name: '',
     start_date: '',
     end_date: '',
     parameters: [{ indicator_id: '', value: '' }],
   });
-  const [token, setToken] = useState('');
   const [coins, setCoins] = useState([]);
   const [indicators, setIndicators] = useState([]);
 
@@ -156,7 +155,7 @@ const BacktestForm = () => {
           {formData.parameters.map((param, index) => (
             <div key={index} className="flex items-center space-x-4">
               <div className="flex-grow">
-                <label htmlFor={`indicator_id_${index}`} className="block text-sm font-medium text-gray-700">Indicator ID:</label>
+                <label htmlFor={`indicator_id_${index}`} className="block text-sm font-medium text-gray-700">Indicator:</label>
                 <select
                   id={`indicator_id_${index}`}
                   name="indicator_id"

frontend/src/Login.js

@@ -1,10 +1,11 @@
-// src/Login.js
+// Login.js
+
 import React, { useState } from 'react';
 import axios from 'axios';
 
-const API_BASE_URL = 'https://your-api-base-url.com/api'; // Replace with your actual API base URL
+const API_BASE_URL = 'http://localhost:5000'; 
 
-const Login = () => {
+const Login = ({ setToken }) => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
 
@@ -17,12 +18,16 @@ const Login = () => {
         username,
         password,
       });
-      
+
       // Assuming your API returns a token upon successful login
-      const { token } = response.data;
-      // Store the token in localStorage or sessionStorage
-      localStorage.setItem('token', token);
-
+      const { access_token } = response.data;
+      console.log('The access token is', response.data);
+      // Store the token in localStorage (you can also use sessionStorage)
+      localStorage.setItem('token', access_token);
+
+      // Set the token in parent component (App.js or where Login is used)
+      setToken(access_token);
+
       // Redirect to another page or handle successful login
       console.log('Login successful!');
     } catch (error) {

frontend/src/index.css

@@ -1,4 +1,3 @@
-/* src/index.css */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

frontend/tailwind.config.js

@@ -1,8 +1,10 @@
-// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
   theme: {
     extend: {},
   },
   plugins: [],
-}
+}

requirements.txt

@@ -16,4 +16,5 @@ mlflow
 psycopg2
 python-dotenv
 ccxt
-yfinance
+yfinance
+flask_cors