[frontend] feat: Auto deploy after main merge (#28)

.github/workflows/frontend-service-tests-deploy.yml

@@ -0,0 +1,63 @@
+name: Frontend Service Tests - Deploy to Production
+
+on:
+  push:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      API_URL: http://localhost:5000
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v1
+
+    - name: Use Node.js 18.x
+      uses: actions/setup-node@v3
+      with:
+        node-version: 18.x
+
+    - name: Start service in docker
+      run: |
+        cd ./backend
+        npm run docker:up
+
+    - name: Wait for service to start
+      run: |
+          sleep 15
+
+    - name: Test connectivity
+      run: curl ${API_URL}
+
+    - name: Install and start frontend
+      run: |
+        cd ./frontend
+        npm ci
+        npm run build
+        npm run start &
+
+    - name: Install Playwright
+      run: |
+        cd ./playwright
+        npm ci
+        npx playwright install chromium
+
+    - name: Run Playwright Tests
+      run: |
+        cd ./playwright
+        npm run test
+
+    - name: Stop service in docker
+      run: |
+        cd ./backend
+        npm run docker:down
+
+    - name: Deploy FE to production
+      uses: johnbeynon/[email protected]
+      with:
+        service-id: ${{ secrets.MY_RENDER_SERVICE_ID_FE }}
+        api-key: ${{ secrets.MY_RENDER_API_KEY }}
+        wait-for-success: true

.github/workflows/frontend-service-tests.yml

@@ -1,8 +1,6 @@
 name: Frontend Service Tests - Playwright
 
 on:
-  push:
-    branches: [ "main" ]
   pull_request:
     branches: [ "main" ]
 

frontend/src/App.css

@@ -4,7 +4,7 @@ body {
 
 body {
   margin: 0px;
-  background-color: white;
+  background: linear-gradient(100deg, #83a4d4, #b6fbff);
 }
 
 @media (min-width: 600px) {
@@ -26,13 +26,22 @@ body {
   gap: 20px;
 }
 
+.note-title {
+  border: solid 1px #89CFF0;
+  background-color: #e0f1f3;
+  text-align: center;
+  border-radius: 10px;
+  margin: 10px;
+  padding: 10px;
+}
+
 .note-item {
   display: flex;
   flex-direction: column;
-  border: 1px solid #ccc;
+  border: 1px solid #89CFF0;
   padding: 10px;
   border-radius: 5px;
-  background-color: #f9f9f9;
+  background-color: #f0f9fa;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   width: 300px;
@@ -43,8 +52,15 @@ body {
   height: 100%;
 }
 
+.note-item:hover {
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
+}
+
 .notes-header {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
 }
 
 .notes-header button {
@@ -61,7 +77,6 @@ h2 {
   justify-content: center;
   align-items: center;
   margin-bottom: 20px;
-  background-color: lightgrey;
   width: 100%;
 }
 
@@ -98,13 +113,18 @@ textarea {
 
 .note-form button {
   border-radius: 5px;
-  background-color: rgb(64, 154, 184);
+  background-color: #1677ff;
   border: none;
   padding: 10px;
   font-size: 16px;
   color: white;
 }
 
+.note-form button:hover {
+  background-color: #3f8df9;
+  cursor: pointer;
+}
+
 .notes-header button{
   border-radius: 5px;
   background-color: crimson;
@@ -114,11 +134,13 @@ textarea {
   color: white;
 }
 
-.note-form button:hover {
-  background-color: rgb(106, 175, 198);
+.notes-header button:hover {
+  background-color:lightcoral;
   cursor: pointer;
 }
 
+
+
 .edit-buttons {
   display: flex;
   justify-content: space-evenly;
@@ -146,6 +168,7 @@ textarea {
 .note-content{
   margin-bottom: 30px;
   text-align: center;
+  white-space: pre-line;
 }
 
 .spinner-container {
@@ -156,7 +179,7 @@ textarea {
 }
 
 .note-updated {
-  color: green;
+  color: grey;
     font-size: 14px;
   }
 

frontend/src/components/Note.tsx

@@ -1,30 +1,40 @@
 import type NoteType from "../types/note";
 
 interface NoteProps {
-    note: NoteType;
-    handleEdit: () => void;
-    deleteNote: () => void;
+  note: NoteType;
+  handleEdit: () => void;
+  deleteNote: () => void;
 }
 
 const Note: React.FC<NoteProps> = ({ note, handleEdit, deleteNote }) => {
+  const handleDeleteMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
+    // Prevent the click event from propagating to the parent container
+    e.stopPropagation();
 
-    const handleDeleteMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
-        // Prevent the click event from propagating to the parent container
-        e.stopPropagation();
-
-        // Call the deleteNote function
-        deleteNote();
-    };
-    return (
-        <div data-testid="note" className="note-item" onClick={handleEdit}>
-            <h3 data-testid="note-title">{note.title}</h3>
-            <p className="note-content" data-testid="note-content">{note.content}</p>
-            <p className="note-updated" data-testid="note-updated">Updated {new Date(note.updatedAt ?? "").toLocaleDateString()}</p>
-            <div className="notes-header">
-                    <button data-testid='note-delete-button' onClick={handleDeleteMouseDown}>X</button>
-            </div>
-        </div>
-    );
+    // Call the deleteNote function
+    deleteNote();
+  };
+  return (
+    <div data-testid="note" className="note-item" onClick={handleEdit}>
+      <h3 className="note-title" data-testid="note-title">
+        {note.title}
+      </h3>
+      <p className="note-content" data-testid="note-content">
+        {note.content}
+      </p>
+      <div className="notes-header">
+        <p className="note-updated" data-testid="note-updated">
+          Updated {new Date(note.updatedAt ?? "").toLocaleDateString()}
+        </p>
+        <button
+          data-testid="note-delete-button"
+          onClick={handleDeleteMouseDown}
+        >
+          X
+        </button>
+      </div>
+    </div>
+  );
 };
 
 export default Note;