From 8bcaf7fb77bf6dcabc36f6fc0a01b3cf0c3c2d63 Mon Sep 17 00:00:00 2001 From: Dave <43282177+helloitsdave@users.noreply.github.com> Date: Thu, 22 Feb 2024 00:02:00 +0000 Subject: [PATCH] [frontend] feat: Auto deploy after main merge (#28) --- .../frontend-service-tests-deploy.yml | 63 +++++++++++++++++++ .github/workflows/frontend-service-tests.yml | 2 - frontend/src/App.css | 39 +++++++++--- frontend/src/components/Note.tsx | 50 +++++++++------ 4 files changed, 124 insertions(+), 30 deletions(-) create mode 100644 .github/workflows/frontend-service-tests-deploy.yml diff --git a/.github/workflows/frontend-service-tests-deploy.yml b/.github/workflows/frontend-service-tests-deploy.yml new file mode 100644 index 00000000..bf7c36a4 --- /dev/null +++ b/.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/render-deploy-action@v0.0.8 + with: + service-id: ${{ secrets.MY_RENDER_SERVICE_ID_FE }} + api-key: ${{ secrets.MY_RENDER_API_KEY }} + wait-for-success: true diff --git a/.github/workflows/frontend-service-tests.yml b/.github/workflows/frontend-service-tests.yml index 1ea574bc..c9ce3a11 100644 --- a/.github/workflows/frontend-service-tests.yml +++ b/.github/workflows/frontend-service-tests.yml @@ -1,8 +1,6 @@ name: Frontend Service Tests - Playwright on: - push: - branches: [ "main" ] pull_request: branches: [ "main" ] diff --git a/frontend/src/App.css b/frontend/src/App.css index 9d604ef5..7511f0db 100644 --- a/frontend/src/App.css +++ b/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; } \ No newline at end of file diff --git a/frontend/src/components/Note.tsx b/frontend/src/components/Note.tsx index 49fb4abb..37297b88 100644 --- a/frontend/src/components/Note.tsx +++ b/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 = ({ note, handleEdit, deleteNote }) => { + const handleDeleteMouseDown = (e: React.MouseEvent) => { + // Prevent the click event from propagating to the parent container + e.stopPropagation(); - const handleDeleteMouseDown = (e: React.MouseEvent) => { - // Prevent the click event from propagating to the parent container - e.stopPropagation(); - - // Call the deleteNote function - deleteNote(); - }; - return ( -
-

{note.title}

-

{note.content}

-

Updated {new Date(note.updatedAt ?? "").toLocaleDateString()}

-
- -
-
- ); + // Call the deleteNote function + deleteNote(); + }; + return ( +
+

+ {note.title} +

+

+ {note.content} +

+
+

+ Updated {new Date(note.updatedAt ?? "").toLocaleDateString()} +

+ +
+
+ ); }; export default Note;