convert from connection to pools in mysql

.gitignore

@@ -130,3 +130,5 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
+
+frontend/src/assets/*

backend/src/db_client.py

@@ -1,7 +1,7 @@
 from enum import Enum
-import sys
 import mysql.connector
 import os
+from mysql.connector import pooling
 
 STARTUP_TABLE_CREATION_QUERIES = {
     "users": """CREATE TABLE IF NOT EXISTS users (
@@ -21,7 +21,8 @@ class Severity(Enum):
     ERROR = "ERROR"
 
 class DBClient:
-    def __init__(self):
+    def __init__(self, app):
+        self.app = app
         self.db_server = os.environ.get('DB_SERVER')
         self.db_port = os.environ.get('DB_PORT')
         self.user = 'root'
@@ -29,57 +30,54 @@ class DBClient:
         self.database = os.environ.get('DB_NAME')
 
         self.validate_env_variables()  # Check for required environment variables
-        self.connection = self.open()
+        self.pool = self.create_pool()  # Create a connection pool
-        self.cursor = self.connection.cursor()
         
         self.initialize_database()
 
     def validate_env_variables(self):
         if not self.db_server or not self.db_port or not self.password or not self.database:
-            self.error("Missing one or more environment variables.")
+            self.app.logger.error("Missing one or more environment variables.")
-    
+
-    def open(self):
+    def create_pool(self):
-        return mysql.connector.connect(
+        return pooling.MySQLConnectionPool(
+            pool_name="mypool",
+            pool_size=5,  # Adjust size as needed
             host=self.db_server,
             port=self.db_port,
             user=self.user,
             password=self.password,
-            database=self.database
+            database=self.database,
+            connection_timeout=10  # Timeout in seconds
         )
 
-    def close(self):
-        self.cursor.close()
-        self.connection.close()
-
     def initialize_database(self):
         self.query(STARTUP_TABLE_CREATION_QUERIES['users'])
         self.query(STARTUP_TABLE_CREATION_QUERIES['sessions'])
 
-    def query(self, query_str, params=None):
+    def query(self, query_str, params=None):    
-        try:
+        max_retries = 3
-            self.info(f'Executing query: {query_str}')
+        for attempt in range(max_retries):
-            self.cursor.execute(query_str, params)
+            try:
-
+                self.app.logger.info(f'Executing query: {query_str}')
-            if 'SELECT' in query_str:
+                # Get a connection from the pool
-                return self.cursor.fetchall()  # Return results for SELECT queries
+                connection = self.pool.get_connection()
-            else:
+                with connection.cursor() as cursor:
-                self.commit()  # Commit if it's a non-SELECT query
+                    cursor.execute(query_str, params)
-        except Exception as e:
+                    if 'SELECT' in query_str:
-            self.error(f"Query failed: {str(e)}")
+                        results = cursor.fetchall()
-
+                        self.app.logger.info(f'Query results: {results}')
-    def commit(self):
+                        return results
-        self.info('Committing actions to DB')
+                    else:
-        self.connection.commit()
+                        connection.commit()
-
+                        self.app.logger.info('Query executed successfully, changes committed.')
-    def info(self, message):
+                        break
-        self.message(severity=Severity.INFO, message=message)
+            except mysql.connector.Error as e:
-
+                if e.errno in (2013, 2006):  # Lost connection or connection no longer available
-    def warning(self, message):
+                    self.app.logger.warning(f"Lost connection to MySQL, retrying... {attempt + 1}/{max_retries}")
-        self.message(severity=Severity.WARNING, message=message)
+                    continue  # Retry the query
-
+                else:
-    def error(self, message):
+                    self.app.logger.error(f"Query failed: {str(e)}")
-        self.message(severity=Severity.ERROR, message=message)
+                    return None  # Handle the error accordingly
-
+            finally:
-    def message(self, severity, message):
+                if connection.is_connected():
-        print(f'DBClient [{severity.value}]: {message}')
+                    connection.close()  # Close the connection to return it to the pool
-       

backend/src/server.py

@@ -10,16 +10,18 @@ from flask_cors import CORS
 from dotenv import load_dotenv
 from db_client import DBClient
 from user import registerUserEndpoints
+import logging
 
 load_dotenv()
 app = Flask(__name__)
 app.config['JSON_AS_ASCII'] = False  # Ensures non-ASCII characters are preserved
+logging.basicConfig(level=logging.INFO)
 allowed_origins = [
     "https://nyipyatki.davydovcloud.com",
     "https://nyipyatki-dev.davydovcloud.com",
 ]
 CORS(app, resources={r"*": {"origins": allowed_origins}})  # Only allow example.com
-database = DBClient()
+database = DBClient(app)
 registerUserEndpoints(app=app, database=database)
 
 if __name__ == "__main__":

backend/src/user.py

@@ -14,8 +14,10 @@ def registerUserEndpoints(app, database):
     def user_is_set():
         user_name = request.args.get('userName')
         try:
+            app.logger.info(f'Searching for user {user_name}')
             query = "SELECT * FROM users WHERE Name=%s"
             result = database.query(query, params=(user_name,))
+            app.logger.info(f'Got: {result}')
             return jsonify(bool(result)), 200
         except mysql.connector.Error as err:
             # Log the error or handle it as necessary
@@ -79,6 +81,7 @@ def registerUserEndpoints(app, database):
         query = "SELECT * FROM sessions WHERE Token=%s AND Name=%s"
         try:
             result = database.query(query, params=(token, user_name))
+            app.logger.info(f'Got result: {result}')
             return jsonify(tokenValid=bool(result)), 200
         except Exception as e:
             return jsonify(success=False, message=str(e)), 500

frontend/src/App.css

@@ -1,15 +1,16 @@
 #root {
     width: 100%;
     max-width: 1280px;
-    text-align: center;
+    text-align: center; /* Centered text alignment */
 }
 
 /* Overall Body Style */
 body {
-    background-color: #b8b6b6; /* Light background for contrast */
+    background-color: #ffffff; /* Light background for contrast */
     color: #4b2e2e; /* Darker red brown for readability */
     font-family: 'Arial', sans-serif;
     margin: 0;
+    text-align: center; /* Centered text alignment */
     padding: 20px;
 }
 
@@ -17,7 +18,6 @@ body {
 header {
     background-color: #a41e34; /* Christmas red */
     color: white;
-    text-align: center;
     padding: 20px 0;
     border-bottom: 5px solid #b7c9b5; /* Light green border */
 }
@@ -26,19 +26,6 @@ header h1 {
     font-size: 2.5em;
 }
 
-/* Navigation Menu */
-nav a {
-    text-decoration: none;
-    color: white;
-    padding: 15px 25px;
-    border-radius: 5px;
-    transition: background-color 0.3s;
-}
-
-nav a:hover {
-    background-color: #c28f8f; /* Softer red when hovering */
-}
-
 /* Section Style */
 section {
     background-color: #e4f7e0; /* Light green background */
@@ -56,43 +43,38 @@ button {
     border-radius: 5px;
     cursor: pointer;
     font-size: 1.1em;
+    display: inline-block; /* Centers button in the container */
 }
 
 button:hover {
     background-color: #9b6bb5; /* Darker purple on hover */
 }
 
+button:disabled {
+    background-color: #d3d3d3; /* Light gray for disabled button */
+    color: #a9a9a9; /* Darker gray for text */
+    cursor: not-allowed; /* Show not-allowed cursor */
+}
+
 /* Footer Style */
 footer {
-    text-align: center;
+    text-align: center; /* Centered */
     padding: 20px;
     background-color: #a41e34; /* Same red as header */
     color: white;
     position: relative;
 }
 
-/* Christmas Decorations */
+/* Snowflakes Background */
-.christmas-tree {
-    background-image: url('path/to/christmas-tree.png'); /* Add a Christmas tree image */
-    width: 50px;
-    height: 100px;
-    display: inline-block;
-    background-size: cover;
-}
-
 .snowflakes {
     position: absolute;
-    z-index: 1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-image: url('path/to/snowflake-pattern.png'); /* Snowflakes pattern */
+    background-image: url('./assets/snowflakes.png'); /* Snowflakes pattern */
-    opacity: 0.3; /* Make it subtle */
-    pointer-events: none; /* Allow clicks to go through */
 }
 
-
 /* General table styles */
 table {
     width: 100%;
@@ -100,78 +82,60 @@ table {
     margin: 20px 0;
     font-size: 1em;
     font-family: 'Arial', sans-serif;
+    text-align: center; /* Centered table text */
 }
 
 /* Table header styles */
 th {
-    background-color: #a41e34;
+    background-color: #060698; /* Christmas red */
-    /* Christmas red */
     color: white;
-    text-align: left;
     padding: 10px 15px;
-    border-bottom: 3px solid #b7c9b5;
+    border-bottom: 3px solid #b7c9b5; /* Light green border for header */
-    /* Light green border for header */
 }
 
 /* Table cell styles */
 td {
     border: 1px solid #ddd;
-    padding: 10px 15px;
+    padding: 10px 15px; /* Added padding for better spacing */
-    /* Added padding for better spacing */
+    background-color: #e4f7e0; /* Light green background for cells */
-    background-color: #e4f7e0;
-    /* Light green background for cells */
 }
 
 /* Zebra striping for table rows */
 tr:nth-child(even) {
-    background-color: #f9f9f9;
+    background-color: #f9f9f9; /* Light gray for even rows */
-    /* Light gray for even rows */
 }
 
 /* Hover effect for rows */
 tr:hover {
-    background-color: #c28f8f;
+    background-color: #c28f8f; /* Softer red when hovering */
-    /* Softer red when hovering */
 }
 
 /* Additional table styling for Christmas theme */
 table {
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for depth */
-    /* Shadow for depth */
+    border-radius: 8px; /* Rounded corners */
-    border-radius: 8px;
+    overflow: hidden; /* Ensures border radius works */
-    /* Rounded corners */
-    overflow: hidden;
-    /* Ensures border radius works */
 }
 
 /* Add some festive decorations */
 th::after {
-    content: '🎄';
+    content: '🎄'; /* Small Christmas tree icon in the header */
-    /* Small Christmas tree icon in the header */
     margin-left: 10px;
-    font-size: 1.2em;
+    font-size: 1.2em; /* Slightly larger */
-    /* Slightly larger */
 }
 
 td {
-    position: relative;
+    position: relative; /* For potential decorations */
-    /* For potential decorations */
 }
 
 td::before {
-    content: '';
+    content: ''; /* Placeholder for decoration */
-    /* Placeholder for decoration */
     position: absolute;
-    background-image: url('path/to/snowflake-icon.png');
+    background-image: url('path/to/snowflake-icon.png'); /* Snowflake icon */
-    /* Snowflake icon */
+    width: 16px; /* Adjust as necessary */
-    width: 16px;
-    /* Adjust as necessary */
     height: 16px;
-    opacity: 0.1;
+    opacity: 0.1; /* Very subtle */
-    /* Very subtle */
+    top: 5px; /* Position it nicely */
-    top: 5px;
-    /* Position it nicely */
     left: 5px;
-    pointer-events: none;
+    pointer-events: none; /* Ignore mouse events */
-    /* Ignore mouse events */
+}
-}

frontend/src/App.tsx

@@ -7,11 +7,13 @@ import Program from './components/Program'
 function App() {
   return (
     <>
+    <div className='snowflakes'>
       <InitialSetup/>
       <Greeting/>
       <br/>
       <Hosting/>
       <Program/>
+      </div>
     </>
   )
 }

frontend/src/components/InitialSetup.tsx

@@ -32,9 +32,8 @@ const InitialSetup = () => {
             const isTokenValid = await validToken(token, selectedName);
             setIsSubmitted(isTokenValid);
         };
-        if (selectedName !== undefined) checkUserPassword(selectedName)
+        if (token !== undefined && selectedName !== undefined) validateToken();
-        if (token && selectedName) validateToken();
+    }, []); 
-    }, [selectedName]); 
 
 
     const handlePasswordCreate = async () => {