fix docker compose prod to support postgres. start working on annotat…

…ion handling

backend/src/main/java/com/guitar/tutorial/model/PDFAnnotation.java

@@ -17,7 +17,11 @@ public class PDFAnnotation {
     @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Long id;
 
-    private Long tutorialId; // To associate annotation with a song
-    private String username;
-    private String annotationText;
+    private Long tutorialId; // Assuming tablatureUrl corresponds to tutorialId
+
+    private String contentText;
+    private String contentImage;
+    private String position;
+    private String commentText;
+    private String commentEmoji;
 }

backend/src/main/resources/data.sql

@@ -25,8 +25,8 @@ INSERT INTO playlist_tutorials (playlist_id, tutorial_id) VALUES
     (1, 3);  -- Beginner Songs also contains tutorial 3
 
 -- Insert test data into annotations table
-INSERT INTO annotations (tutorial_id, username, annotation_text) VALUES
-    (1, 'user1', 'The chord changes in the chorus are tricky.'),
-    (1, 'user2', 'I recommend using alternate picking here.'),
-    (2, 'user3', 'Pay attention to the finger placement during the intro.'),
-    (3, 'user4', 'Great strumming technique explained! Need more practice on this.');
+-- INSERT INTO annotations (tutorial_id, username, annotation_text) VALUES
+--     (1, 'user1', 'The chord changes in the chorus are tricky.'),
+--     (1, 'user2', 'I recommend using alternate picking here.'),
+--     (2, 'user3', 'Pay attention to the finger placement during the intro.'),
+--     (3, 'user4', 'Great strumming technique explained! Need more practice on this.');

docker-compose.prod.yml

@@ -9,6 +9,9 @@ services:
     image: postgres:15-alpine
     container_name: postgres
     environment:
+      POSTGRES_USER: myuser          # Creates the "myuser" role
+      POSTGRES_PASSWORD: mypassword  # Password for "myuser"
+      POSTGRES_DB: guitardb          # Creates the "guitardb" database
       # Set the profile to prod and connect to Postgres
       SPRING_PROFILES_ACTIVE: prod
       SPRING_DATASOURCE_URL: jdbc:postgresql://postgres:5432/guitardb
@@ -21,7 +24,7 @@ services:
     networks:
       - guitartuto-network
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U myuser"]
+      test: ["CMD-SHELL", "pg_isready -U myuser -d guitardb"]
       interval: 10s
       retries: 5
       start_period: 5s

frontend/src/api/api.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import axios from "axios";
 
@@ -87,3 +88,26 @@ export const getPlaylists = async (): Promise<Playlist[]> => {
 export const createPlaylist = async (name: string): Promise<void> => {
   await api.post("/playlists", { name });
 };
+
+
+// Post a new annotation (highlight)
+export const postAnnotation = async (
+  tutorialId: string,
+  content: any,
+  position: any,
+  comment: { text: string; emoji: string }
+): Promise<void> => {
+  await api.post("/annotations/", {
+    tutorialId,
+    content,
+    position,
+    comment,
+  });
+};
+
+// Delete an annotation by its ID
+export const deleteAnnotation = async (annotationId: string): Promise<void> => {
+  await api.delete(`/annotations/${annotationId}`);
+};
+
+

frontend/src/components/TutorialPlayer/pdf/PDFViewer.tsx

@@ -6,8 +6,7 @@ import {
   PdfLoader,
   Popup,
   Tip,
-} from "react-pdf-highlighter";
-import type {
+
   Content,
   IHighlight,
   NewHighlight,
@@ -21,7 +20,9 @@ import { testHighlights as _testHighlights } from "./test-highlights";
 import { pdfjs } from "react-pdf";
 import { Box } from "@mui/material";
 
-// Configure the worker path for PDF.js
+import { postAnnotation, deleteAnnotation } from "../../../api/api"; // Import the API function
+
+
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.mjs`;
 
 interface PDFViewerProps {
@@ -51,7 +52,6 @@ const HighlightPopup = ({
   ) : null;
 
 const PDFViewer: React.FC<PDFViewerProps> = ({ tablatureUrl }) => {
-  // const [url, setUrl] = useState(tablatureUrl);
   const [highlights, setHighlights] = useState<Array<IHighlight>>(
     testHighlights[tablatureUrl] ? [...testHighlights[tablatureUrl]] : []
   );
@@ -81,22 +81,35 @@ const PDFViewer: React.FC<PDFViewerProps> = ({ tablatureUrl }) => {
   const getHighlightById = (id: string) =>
     highlights?.find((highlight) => highlight.id === id);
 
-  const addHighlight = (highlight: NewHighlight) => {
-    console.log("Saving highlight", highlight);
-    setHighlights((prevHighlights) => [
-      { ...highlight, id: getNextId() },
-      ...prevHighlights,
-    ]);
-  };
 
-  const updateHighlight = (
+const addHighlight = async (highlight: NewHighlight) => {
+  const newHighlight = { ...highlight, id: getNextId() };
+  console.log("Saving highlight", newHighlight);
+
+  setHighlights((prevHighlights) => [newHighlight, ...prevHighlights]);
+
+  try {
+    await postAnnotation(
+      tablatureUrl, // tutorial ID (assuming tablatureUrl is the ID)
+      highlight.content,
+      highlight.position,
+      highlight.comment
+    );
+    console.log("Highlight saved successfully");
+  } catch (error) {
+    console.error("Error saving highlight", error);
+  }
+};
+
+  const updateHighlight = async (
     highlightId: string,
     position: Partial<ScaledPosition>,
     content: Partial<Content>
   ) => {
     console.log("Updating highlight", highlightId, position, content);
+
     setHighlights((prevHighlights) =>
-      prevHighlights?.map((h) => {
+      prevHighlights.map((h) => {
         const {
           id,
           position: originalPosition,
@@ -113,6 +126,40 @@ const PDFViewer: React.FC<PDFViewerProps> = ({ tablatureUrl }) => {
           : h;
       })
     );
+
+    try {
+      const response = await fetch(`/api/annotations/${highlightId}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          position,
+          content,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to update highlight");
+      }
+
+      const updatedHighlight = await response.json();
+      console.log("Highlight updated", updatedHighlight);
+    } catch (error) {
+      console.error("Error updating highlight", error);
+    }
+  };
+
+  const removeHighlight = async (highlightId: string) => {
+    try {
+      await deleteAnnotation(highlightId);
+      setHighlights((prevHighlights) =>
+        prevHighlights.filter((h) => h.id !== highlightId)
+      );
+      console.log("Highlight deleted successfully");
+    } catch (error) {
+      console.error("Error deleting highlight", error);
+    }
   };
 
   return (