Edited compose file to use watch options (#13)

* Edited compose file to use watch options

* Add counter info desplay for API version

* 1.3.3

CHANGELOG.md

@@ -5,6 +5,21 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.3] - 2024-03-24
+### Changed
+- Docker compose file update: added watch option.
+### Added
+- Display API version when clicking on header.
+
+
+### [1.3.2] - 2023-11-20
+### Fixed
+- Fix/rendering issue when download failed.
+
+### [1.3.1] - 2023-07-16
+### Fixed
+- Improve error handling: handle situation when server is offline.
+
 ## [1.3.0] - 2023-07-14
 ### Added
 - Allow retrying failed download.

README.md

@@ -26,6 +26,12 @@ $ npm run devserver
 
 App should be automatically opened on http://localhost:8080
 
+### Running application locally using Docker Compose
+```
+$ docker compose watch
+```
+App should be automatically opened on http://localhost:8080
+
 ## Deploying on Fly.io
 ```shell
 $ fly deploy --build-arg API_URL=https://link-to-ytdl-backend.api

docker-compose.yaml → compose.yaml

@@ -1,19 +1,26 @@
-version: '3.7'
+version: "3.8"
 services:
-  ytdl-web:
-    container_name: "ytdl-web"
+  app-dev:
+    container_name: "ytdl-web-dev"
     build:
       context: .
       target: dev
     ports:
       - 8080:8080
-    volumes:
-      - "./src/:/app/src"
+    develop:
+      watch:
+        - action: sync
+          path: .
+          target: /app/
+          ignore:
+            - node_modules/
+        - action: rebuild
+          path: ./package.json
     environment:
       - VITE_API_URL=http://127.0.0.1:8000/api
     networks:
       - default
-  ytdl-web-prod:
+  app-prod:
     container_name: "ytdl-web-prod"
     build:
       context: .

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ytdl_web",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Web app client for YTDL server",
   "main": "index.js",
   "scripts": {
@@ -22,7 +22,7 @@
     "prop-types": "^15.7.2",
     "react": "^18.x.x",
     "react-dom": "^18.2.0",
-    "react-toastify": "^9.0.8",
+    "react-toastify": "^10.0.4",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {

src/App.jsx

@@ -135,7 +135,7 @@ const App = () => {
                     draggable
                     pauseOnHover
                 />
-                <Header version={appVersion} />
+                <Header version={appVersion} apiVersion={apiVersion}/>
                 <SearchBar isDesktop={isDesktop} setPreview={setPreview} />
                 {preview && <Preview preview={preview} onDonwloadEnqueue={onDownloadsFetched} setPreview={setPreview} />}
                 {renderDownloads()}

src/components/Header.jsx

@@ -1,5 +1,6 @@
-import React from "react";
+import React, {useState} from "react";
 import PropTypes from "prop-types";
+import { toast } from 'react-toastify';
 
 import styled from 'styled-components';
 
@@ -32,10 +33,22 @@ const Description = styled.p`
     margin-top: 10px;
 `;
 
-const Header = ({ version }) => {
+const Header = ({ version, apiVersion }) => {
+
+    const [counter, setCounter] = useState(0)
+
+    const onClickHeader = () => {
+        if (counter === 3) {
+            toast.info(`API version: ${apiVersion}`);
+            setCounter(0)
+        }
+        else {
+            setCounter(counter + 1);
+        }
+    }
     return (
         <header>
-            <HeaderTitle>
+            <HeaderTitle onClick={onClickHeader}>
                 <AppTitle>YTDL</AppTitle>
                 {version && <Version>ver. {version}</Version>}
             </HeaderTitle>
@@ -45,7 +58,8 @@ const Header = ({ version }) => {
 }
 
 Header.propTypes = {
-    version: PropTypes.string.isRequired
+    version: PropTypes.string.isRequired,
+    apiVersion: PropTypes.string
 }
 
 export default Header;