Serhii milestone 2 fix (#47)

* chores_lint_errors_and_path_issues * feature_db_py * fix_audio_issue * chores_lint_error * fix_openAPI_switching * chore_module_insert * fix_edit_collection_fix * fix_frontend_critical_update * fix_feedback2_translation_async * chore:lint * chore:loading_issue
kscalelabs · Oct 18, 2024 · fc0b296 · fc0b296
1 parent 5c7b522
commit fc0b296
Show file tree

Hide file tree

Showing 34 changed files with 688 additions and 288 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -23,6 +23,7 @@
     "react-icons": "^5.3.0",
     "react-images-uploading": "^3.1.7",
     "react-scripts": "5.0.1",
+    "socket.io-client": "^4.8.0",
     "typescript": "^4.3.0",
     "web-vitals": "^2.1.4"
   },

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -3,6 +3,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  scroll-behavior: smooth; /* Smooth scrolling for anchor links */
+}
+
 body {
   font-family: "Noto Serif SC", serif;
   /* Use Noto Serif Simplified Chinese font */
@@ -81,7 +85,7 @@ body {
 
     /* Hover and focus states for buttons */
     button:hover {
-      @apply bg-blue-600;
+      @apply opacity-80;
     }
 
     button:focus {

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -4,6 +4,7 @@ import Navbar from "components/nav/Navbar";
 import NotFoundRedirect from "components/NotFoundRedirect";
 import { AuthProvider } from "contexts/AuthContext";
 import { LoadingProvider } from "contexts/LoadingContext";
+import { SocketProvider } from "contexts/SocketContext";
 import { AlertQueue, AlertQueueProvider } from "hooks/alerts";
 import { ThemeProvider } from "hooks/theme";
 import CollectionPage from "pages/Collection";
@@ -23,69 +24,71 @@ const App = () => {
       <ThemeProvider>
         <LoadingProvider>
           <AuthProvider>
-            <AlertQueueProvider>
-              <AlertQueue>
-                <Content>
-                  <Routes>
-                    <Route path="/" element={<Home />} />
-                    <Route path="/404" element={<NotFound />} />
-                    <Route
-                      path="/collections"
-                      element={
-                        <PrivateRoute
-                          element={<Collections />}
-                          requiredSubscription={true} // Set true if subscription is required for this route
-                        />
-                      }
-                    />
-                    <Route
-                      path="/collection"
-                      element={
-                        <PrivateRoute
-                          element={<CollectionPage />}
-                          requiredSubscription={true} // Set true if subscription is required for this route
-                        />
-                      }
-                    />
-                    <Route
-                      path="/collection/new"
-                      element={
-                        <PrivateRoute
-                          element={<CollectionPage />}
-                          requiredSubscription={true} // Set true if subscription is required for this route
-                        />
-                      }
-                    />
-                    <Route
-                      path="/collection/:id"
-                      element={
-                        <PrivateRoute
-                          element={<CollectionPage />}
-                          requiredSubscription={true} // Set true if subscription is required for this route
-                        />
-                      }
-                    />
-                    <Route
-                      path="/subscription"
-                      element={
-                        <PrivateRoute
-                          element={<SubscriptionCancelPage />}
-                          requiredSubscription={true} // Set true if subscription is required for this route
-                        />
-                      }
-                    />
-                    <Route path="/login" element={<LoginPage />} />
-                    <Route
-                      path="/subscription_type"
-                      element={<SubscriptionTypePage />}
-                    />
-                    <Route path="*" element={<NotFoundRedirect />} />
-                  </Routes>
-                </Content>
-                <Navbar />
-                {/* <TopNavbar /> */}
-              </AlertQueue>
-            </AlertQueueProvider>
+            <SocketProvider>
+              <AlertQueueProvider>
+                <AlertQueue>
+                  <Content>
+                    <Routes>
+                      <Route path="/" element={<Home />} />
+                      <Route path="/404" element={<NotFound />} />
+                      <Route
+                        path="/collections"
+                        element={
+                          <PrivateRoute
+                            element={<Collections />}
+                            requiredSubscription={true} // Set true if subscription is required for this route
+                          />
+                        }
+                      />
+                      <Route
+                        path="/collection"
+                        element={
+                          <PrivateRoute
+                            element={<CollectionPage />}
+                            requiredSubscription={true} // Set true if subscription is required for this route
+                          />
+                        }
+                      />
+                      <Route
+                        path="/collection/new"
+                        element={
+                          <PrivateRoute
+                            element={<CollectionPage />}
+                            requiredSubscription={true} // Set true if subscription is required for this route
+                          />
+                        }
+                      />
+                      <Route
+                        path="/collection/:id"
+                        element={
+                          <PrivateRoute
+                            element={<CollectionPage />}
+                            requiredSubscription={true} // Set true if subscription is required for this route
+                          />
+                        }
+                      />
+                      <Route
+                        path="/subscription"
+                        element={
+                          <PrivateRoute
+                            element={<SubscriptionCancelPage />}
+                            requiredSubscription={true} // Set true if subscription is required for this route
+                          />
+                        }
+                      />
+                      <Route path="/login" element={<LoginPage />} />
+                      <Route
+                        path="/subscription_type"
+                        element={<SubscriptionTypePage />}
+                      />
+                      <Route path="*" element={<NotFoundRedirect />} />
+                    </Routes>
+                  </Content>
+                  <Navbar />
+                  {/* <TopNavbar /> */}
+                </AlertQueue>
+              </AlertQueueProvider>
+            </SocketProvider>
           </AuthProvider>
           <LoadingMask />
         </LoadingProvider>

diff --git a/frontend/src/api/api.ts b/frontend/src/api/api.ts
@@ -1,5 +1,5 @@
 import { AxiosInstance } from "axios";
-import { Collection, Image } from "types/model";
+import { Collection, ImageType } from "types/model";
 
 export interface CollectionCreateFragment {
   title: string;
@@ -22,7 +22,7 @@ export class Api {
     const response = await this.api.get(`/`);
     return response.data.message;
   }
-  public async handleUpload(formData: FormData): Promise<Image | null> {
+  public async handleUpload(formData: FormData): Promise<ImageType | null> {
     try {
       const response = await this.api.post("/upload/", formData, {
         headers: {
@@ -61,20 +61,25 @@ export class Api {
     await this.api.get(`/delete_image?id=${image_id}`);
     return null;
   }
-  public async uploadImage(file: File, collection_id: string): Promise<Image> {
+  public async uploadImage(
+    file: File,
+    collection_id: string,
+  ): Promise<ImageType> {
     const response = await this.api.post("/upload", {
       file,
       id: collection_id,
     });
     return response.data;
   }
-  public async getImages(collection_id: string): Promise<Array<Image>> {
+  public async getImages(collection_id: string): Promise<Array<ImageType>> {
     const response = await this.api.get(
       `/get_images?collection_id=${collection_id}`,
     );
     return response.data;
   }
-  public async translateImages(images: Array<string>): Promise<Array<Image>> {
+  public async translateImages(
+    images: Array<string>,
+  ): Promise<Array<ImageType>> {
     const response = await this.api.post("/translate", images, {
       timeout: 300000,
     });

diff --git a/frontend/src/api/auth.ts b/frontend/src/api/auth.ts
@@ -2,7 +2,7 @@
 import axios from "axios";
 import { Response, SigninData, SignupData } from "types/auth";
 
-const API_URL = process.env.REACT_APP_BACKEND_URL || "https://localhost:8080";
+const API_URL = process.env.REACT_APP_BACKEND_URL || "http://localhost:8080";
 
 export const signup = async (data: SignupData): Promise<Response> => {
   const response = await axios.post(`${API_URL}/signup`, data);

diff --git a/frontend/src/components/Audio.tsx b/frontend/src/components/Audio.tsx
@@ -7,10 +7,10 @@ import {
   FaVolumeDown,
   FaVolumeUp,
 } from "react-icons/fa";
-import { Image } from "types/model";
+import { ImageType } from "types/model";
 
 interface AudioPlayerProps {
-  currentImage: Image; // current image
+  currentImage: ImageType; // current image
   index: number; // current transcription index
   handleTranscriptionNext: () => void; //next transcript
   handleTranscriptionPrev: () => void; //prev transcript

diff --git a/frontend/src/components/Book.tsx b/frontend/src/components/Book.tsx
@@ -39,9 +39,9 @@ const Book: React.FC<BookProps> = ({
       {/* Second page */}
       <div className="absolute top-0 w-full h-full bg-gray-100 shadow-lg rounded-sm">
         <div className="p-4 flex flex-col justify-between items-center text-gray-700 text-center h-full">
-          <div>
-            <h2 className="text-lg font-bold mb-2">{title}</h2>
-            <p className="text-sm line-clamp-5">{description}</p>
+          <div className="w-full">
+            <h2 className="text-lg font-bold mb-2 line-clamp-2">{title}</h2>
+            <p className="text-sm line-clamp-5 line-clamp-3">{description}</p>
           </div>
           {is_editable ? (
             <div className="flex flex-col gap-2">
@@ -74,8 +74,8 @@ const Book: React.FC<BookProps> = ({
               alt={title}
               className="object-cover w-full h-full rounded-sm"
             />
-            <div className="absolute top-4 bg-gray-12/70 mt-7 mx-5 p-2 max-h-52 overflow-hidden">
-              <h2 className="text-md text-center">{title}</h2>
+            <div className="absolute max-w-40 top-4 bg-gray-12/60 mt-7 p-2 max-h-52 rounded-md">
+              <h2 className="text-md text-center line-clamp-2">{title}</h2>
             </div>
           </div>
         </div>