major changes:

- introduce flask cache
- use replaceAll together with encodeURI component on client
- many more

server/Pipfile

@@ -4,17 +4,19 @@ verify_ssl = true
 name = "pypi"
 
 [packages]
-flask = "*"
+Flask = "*"
 tk = "*"
-flask-cors = "*"
+Flask-Cors = "*"
 mutagen = "*"
 pymongo = "*"
 click = "*"
 requests = "*"
 watchdog = "*"
 progress = "*"
-pillow = "*"
+Pillow = "*"
 gunicorn = "*"
+Flask-Cache = "*"
+flask-caching = "*"
 
 [dev-packages]
 autopep8 = "*"

server/Pipfile.lock

@@ -1,7 +1,7 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "ac6887caf42c4ea723d7e1e9fc8a94cb42b2cd815c447eb2afd0f35a73f314e1"
+            "sha256": "0d44ec274b82567f0a7ec1f7c5011187bf9e5afe84fa58a17539da72a5c70996"
         },
         "pipfile-spec": 6,
         "requires": {
@@ -47,6 +47,23 @@
             "index": "pypi",
             "version": "==2.0.2"
         },
+        "flask-cache": {
+            "hashes": [
+                "sha256:33187b3ddceeee233fe3db68ffcc118b5498e8ad28edde711bcbdcbf4924ce35",
+                "sha256:90126ca9bc063854ef8ee276e95d38b2b4ec8e45fd77d5751d37971ee27c7ef4",
+                "sha256:ae9d1ac4549517dfbc1f178ccc5429f61f836be3cc109a0b2481c98b3711c329"
+            ],
+            "index": "pypi",
+            "version": "==0.13.1"
+        },
+        "flask-caching": {
+            "hashes": [
+                "sha256:bcda8acbc7508e31e50f63e9b1ab83185b446f6b6318bd9dd1d45626fba2e903",
+                "sha256:cf19b722fcebc2ba03e4ae7c55b532ed53f0cbf683ce36fafe5e881789a01c00"
+            ],
+            "index": "pypi",
+            "version": "==1.10.1"
+        },
         "flask-cors": {
             "hashes": [
                 "sha256:74efc975af1194fc7891ff5cd85b0f7478be4f7f59fe158102e91abb72bb4438",
@@ -308,7 +325,7 @@
                 "sha256:f785375ca2b4e2192786f1e0d2a94c66900d12e780ebae1eccbbab85eb9a7054"
             ],
             "index": "pypi",
-            "version": "== 4.0.1"
+            "version": "==4.0.1"
         },
         "requests": {
             "hashes": [

server/app/__init__.py

@@ -1,11 +1,22 @@
 from flask import Flask
 from flask_cors import CORS
 
+from flask_caching import Cache
+
+config = {
+    "CACHE_TYPE": "SimpleCache",
+    "CACHE_DEFAULT_TIMEOUT": 300
+}
+
+cache = Cache(config = config)
 
 def create_app():
     app = Flask(__name__)
     CORS(app)
 
+    app.config.from_mapping(config)
+    cache.init_app(app)
+
     from . import api
     app.register_blueprint(api.bp, url_prefix='/')
 

server/app/api.py

@@ -1,17 +1,4 @@
-import os
-from re import sub
-import requests
-import urllib
-import time
-
-
-from progress.bar import Bar
-from mutagen.flac import MutagenError
-from flask import Blueprint, request, send_from_directory
-
-from app.models import AllSongs, Folders, Artists
-from app.configs import default_configs
-
+from app.models import Folders, Artists
 from app.helpers import (
     all_songs_instance,
     convert_one_to_json,
@@ -26,6 +13,19 @@ from app.helpers import (
     run_fast_scandir
 )
 
+from app import cache
+
+import os
+import requests
+import urllib
+import time
+
+from progress.bar import Bar
+from mutagen.flac import MutagenError
+
+from flask import Blueprint, request, send_from_directory
+
+
 bp = Blueprint('api', __name__, url_prefix='')
 
 artist_instance = Artists()
@@ -240,19 +240,28 @@ def getArtistData():
     return {'artist': artist_obj_json, 'songs': songs, 'albums': getArtistAlbums()}
 
 
-@bp.route("/")
-def getFolderTree():
-    start = time.time()
-
-    req_dir = request.args.get('f')
-    last_id = request.args.get('last_id')
-
-    if req_dir is not None:
-        requested_dir = os.path.join(home_dir, req_dir)
-        print(requested_dir)
-    else:
+@bp.route("/f/<folder>")
+@cache.cached()
+def getFolderTree(folder: str = None):
+    if folder == "$home":
         requested_dir = home_dir
 
+    else:
+        try:
+            req_dir, last_id = folder.split('::')
+            print(req_dir)
+        except (ValueError):
+            req_dir = folder
+            last_id = None
+
+        req_dir = req_dir.replace('|', '/')
+
+        if req_dir:
+            dir_list = req_dir.split('/')
+            requested_dir = os.path.join(home_dir, *dir_list)
+            
+    print(requested_dir)
+
     dir_content = os.scandir(requested_dir)
 
     folders = []
@@ -284,10 +293,7 @@ def getFolderTree():
     for file in files:
         file['filepath'] = file['filepath'].replace(home_dir, '')
 
-    dir_content.close()
-    end = time.time()
-    print(end - start)
-    return {"requested": req_dir, "files": files[:25], "folders": folders}
+    return {"files": files, "folders": folders}
 
 
 @bp.route('/image/<img_type>/<image_id>')

src/components/FolderView/FolderList.vue

@@ -21,10 +21,7 @@
 
 <script>
 export default {
-  props: ["folders"],
-  setup() {
-    console.log("props.folders");
-  },
+  props: ["folders"]
 };
 </script>
 

src/components/LeftSidebar/Navigation.vue

@@ -45,7 +45,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
+    <router-link :to="{ name: 'FolderView', params: { path: '$home' } }">
       <div class="nav-button" id="folders-button">
         <div class="in">
           <div class="nav-icon image" id="folders-icon"></div>
@@ -54,7 +54,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
+    <router-link :to="{ name: 'FolderView', params: { path: '$home' } }">
       <div class="nav-button" id="folders-button">
         <div class="in">
           <div class="nav-icon image" id="settings-icon"></div>

src/composables/getFiles.js

@@ -6,11 +6,13 @@ const getData = async (path, last_id) => {
   let url;
   const songs = ref(null);
   const folders = ref(null);
+  
+  path = encodeURIComponent(path.replaceAll("/", "|"));
 
   if (last_id) {
-    url = `${folders_uri}/?f=${path}&last_id=${last_id}`;
+    url = `${folders_uri}/f/${path}::${last_id}`;
   } else {
-    url = url = `${folders_uri}/?f=${path}`;
+    url = url = `${folders_uri}/f/${path}`;
   }
 
   const res = await fetch(url);

src/views/FolderView.vue

@@ -59,7 +59,7 @@ export default {
 
       watch(route, (new_route) => {
         path.value = new_route.params.path;
-        getPathFolders(encodeURI(path.value));
+          getPathFolders(path.value);
       });
 
       scrollable.value.onscroll = () => {