Removed tag-stuff from yarn - added to CI/CD, added update-database A…

…PI call, updated README (#3)

* added update database API call

* updated CI/CD for tags

* removed yarn tag-related stuff, tag handling is performed in git and CI/CD now

* released major version, since migration to docker

.github/workflows/master.yml

@@ -1,4 +1,4 @@
-name: Master branch CI/CD
+name: Branches and tags CI/CD
 
 on:
   push:
@@ -32,28 +32,32 @@ jobs:
         env:
           CI_REGISTRY: ghcr.io/hetorusnl/vocya-api
           DOCKERFILE: api.Dockerfile
-          BRANCH_NAME: ${{ github.ref_name }}
+          REF_NAME: ${{ github.ref_name }}
+          REF_TYPE: ${{ github.ref_type }} # 'branch' or 'tag'
 
       # build and push the vocya api docker image to docker hub
       - name: Build and Push Image to Dockerhub
         run: ./gha/build-container.sh
         env:
           CI_REGISTRY: hetorusnl/vocya-api
           DOCKERFILE: api.Dockerfile
-          BRANCH_NAME: ${{ github.ref_name }}
+          REF_NAME: ${{ github.ref_name }}
+          REF_TYPE: ${{ github.ref_type }} # 'branch' or 'tag'
 
       # build and push the vocya dashboard docker image to ghcr.io
       - name: Build and Push Image to ghcr.io
         run: ./gha/build-container.sh
         env:
           CI_REGISTRY: ghcr.io/hetorusnl/vocya-dashboard
           DOCKERFILE: dashboard.Dockerfile
-          BRANCH_NAME: ${{ github.ref_name }}
+          REF_NAME: ${{ github.ref_name }}
+          REF_TYPE: ${{ github.ref_type }} # 'branch' or 'tag'
 
       # build and push the vocya dashboard docker image to docker hub
       - name: Build and Push Image to Dockerhub
         run: ./gha/build-container.sh
         env:
           CI_REGISTRY: hetorusnl/vocya-dashboard
           DOCKERFILE: dashboard.Dockerfile
-          BRANCH_NAME: ${{ github.ref_name }}
+          REF_NAME: ${{ github.ref_name }}
+          REF_TYPE: ${{ github.ref_type }} # 'branch' or 'tag'

README.md

@@ -1,6 +1,7 @@
 # Vocya - vocabulary shop
 
-Front-end for the vocjem data; dashboard and API.
+'Vocabulary shop' to view, search and study Japanese words.  
+This is a front-end for the [VocJEM](https://github.com/HetorusNL/vocjem) data; dashboard and API.  
 Both the dashboard and API are available as docker containers:
 
 - https://hub.docker.com/r/hetorusnl/vocya-api
@@ -16,6 +17,8 @@ The current API endpoint can be reached at: https://api.vocya.hetorus.nl/.
 
 Either run the API using the docker container mentioned above, or manually using the steps below.
 
+#### Installing poetry
+
 Install poetry: https://python-poetry.org/docs/
 
 Ensure poetry works by running:  
@@ -25,18 +28,23 @@ Otherwise ensure that the location poetry is installed in, is added to the path.
 Configure poetry to create the virtualenvs in the project folder:  
 `poetry config virtualenvs.in-project true`
 
-Install the required dependencies:  
-`cd api`  
-`poetry install`
+#### Running the API
+
+```bash
+# go to the api directory
+cd api
 
-Modify the path to the VocJEM database file in `database_file` in `main.py`, if that repository is stored in a different location.
+# install the required dependencies
+poetry install
 
-Run the API  
-`cd api`  
-`poetry run python3 main.py`
+# run the API
+poetry run python3 main.py
+```
 
 ### Example queries
 
+_Make sure to change the `api.vocya.hetorus.nl` domain name when running the API locally_
+
 Query all words  
 https://api.vocya.hetorus.nl/words  
 Query words with id='jem1-2'  
@@ -47,11 +55,9 @@ Query words with course='jem1' chapter='jem1-1' and id='jem1-1'
 https://api.vocya.hetorus.nl/course/jem1/chapter/jem1-1/word/jem1-1  
 Searching is no longer supported on the API side, searching within returned words for a course/chapter/all should be performed client-side.
 
-\*change the domain name when running the API locally
-
 ## Dashboard
 
-The front-end dashboard of vocya showing the results of the API calls to the vocya API.
+The front-end dashboard of Vocya showing the results of the API calls to the Vocya API.
 By default 'live search' is enabled, and every keystroke sends a 'search' API call and shows the results.
 When 'live search' is disabled by clicking on the button, a manual search button is enabled to send the 'search' API call when clicked.
 When clicking on the results, a single result page is opened where the 'raw properties' are shown.
@@ -76,43 +82,38 @@ sudo apt remove yarn
 # enable corepack
 corepack enable
 
-# updating the global yarn version
-corepack prepare yarn@stable --activate
-
-# initialize yarn
-yarn init -2
-
 # update to the latest version
 yarn set version stable
+
+# install the dependencies of the project
+yarn install
 ```
 
 ## Scripts
 
 ### Run the development server
 
-run the following command to run the dev server:  
+Run the following command to run the dev server:  
 `yarn start`  
-this starts the development server on `localhost:3000`
+This starts the development server on `localhost:3000`
 
 ### Run a build (without incrementing version number)
 
-run the following command to build the application:  
+Run the following command to build the application:  
 `yarn build`  
-this updates the version number (if changed in `package.json`) and builds the application
+This updates the version number (if changed in `package.json`) and builds the application
 
-### Run a build with version increment and git commit creation
+### Increment the version number of Vocya
 
-// TODO: tagging is not yet working with the squash pull-request way, and not yet available in the github actions workflows
-
-the Semantic Versioning, also known as "semver", is used:  
-version: `major.minor.patch`  
-run one of the following commands:  
+The Semantic Versioning, also known as "semver", is used:  
+Version: `major.minor.patch`  
+Run one of the following commands:  
 `yarn release-patch` // increments the `patch` number of the version  
 `yarn release-minor` // increments the `minor` number of the version  
-`yarn release-major` // increments the `major` number of the version  
-all these three commands also create a git commit and git tag with the message:  
-`v${npm_package_version}` (which is the major.minor.patch version)  
-these three commands also perform a push to the master branch on github and push the tags
+`yarn release-major` // increments the `major` number of the version
+
+After these commands are executed, make sure to create a tag with matching version number (e.g. matching `v${npm_package_version}`), and push this to the repository.
+This causes the CI/CD to create a tagged docker image for both the API and the dashboard with this version number.
 
 ## License
 

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dashboard",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "private": true,
   "dependencies": {
     "axios": "^0.21.1",
@@ -25,8 +25,7 @@
     "release-patch": "yarn version patch && yarn postversion",
     "release-minor": "yarn version minor && yarn postversion",
     "release-major": "yarn version major && yarn postversion",
-    "postversion": "yarn build && yarn git-script",
-    "git-script": "node git-script"
+    "postversion": "yarn build"
   },
   "eslintConfig": {
     "extends": [

dashboard/public/meta.json

@@ -1 +1 @@
-{"version":"1.1.2","buildDateTime":"Tue Jun 13 2023 00:26:45 GMT+0200 (Central European Summer Time)"}
+{"version":"2.0.0","buildDateTime":"Sun Aug 27 2023 00:49:33 GMT+0200 (Central European Summer Time)"}

dashboard/src/components/pages/About.js

@@ -1,7 +1,12 @@
-import React, { Fragment, useEffect, useState } from "react";
+import React, { Fragment, useContext, useEffect, useState } from "react";
 import packageJson from "../../../package.json";
+import VocyaApiContext from "../../context/vocya_api/VocyaApiContext";
 
 const About = () => {
+  const vocyaApiContext = useContext(VocyaApiContext);
+
+  const { dbUpdateStatus } = vocyaApiContext;
+
   const [version, setVersion] = useState("loading build date/time...");
 
   useEffect(() => {
@@ -33,6 +38,16 @@ const About = () => {
       <p>
         <i>Build date/time (local timezone): {version}</i>
       </p>
+      <br></br>
+      <div>
+        <div
+          className="btn"
+          onClick={() => vocyaApiContext.actionUpdateDatabase()}
+        >
+          Update database
+        </div>
+        Database update result: {dbUpdateStatus}
+      </div>
     </Fragment>
   );
 };

dashboard/src/components/utils/Search.js

@@ -128,6 +128,9 @@ const Search = ({
           update={(checked) => setExactMatch(checked)}
           defaultValue={false}
         />
+        {
+          // TODO: add if words: add benkyou button
+        }
       </div>
       <form onSubmit={onSubmit} className="form">
         <input

dashboard/src/components/utils/VocyaAPI.js

@@ -61,3 +61,7 @@ export const apiWords = async () => {
 export const apiWord = async (id) => {
   return await axios.get(`${API_ENDPOINT}/word/${id}`);
 };
+
+export const apiUpdateDatabase = async () => {
+  return await axios.get(`${API_ENDPOINT}/update-database`);
+};

dashboard/src/context/types.js

@@ -14,3 +14,4 @@ export const GET_WORDS = "GET_WORDS";
 export const GET_WORD = "GET_WORD";
 export const SET_LOADING = "SET_LOADING";
 export const SET_IS_SEARCHING = "SET_IS_SEARCHING";
+export const ACTION_UPDATE_DATABASE = "ACTION_UPDATE_DATABASE";

dashboard/src/context/vocya_api/VocyaApiState.js

@@ -18,6 +18,7 @@ import {
   GET_WORD,
   SET_LOADING,
   SET_IS_SEARCHING,
+  ACTION_UPDATE_DATABASE,
 } from "../types";
 import {
   apiChapter,
@@ -34,6 +35,7 @@ import {
   apiCourseWords,
   apiWord,
   apiWords,
+  apiUpdateDatabase,
 } from "../../components/utils/VocyaAPI";
 
 const VocyaApiState = (props) => {
@@ -46,6 +48,7 @@ const VocyaApiState = (props) => {
     word: {},
     loading: false,
     isSearching: false,
+    dbUpdateStatus: "no update performed",
   };
 
   const [state, dispatch] = useReducer(vocyaApiReducer, initialState);
@@ -148,6 +151,14 @@ const VocyaApiState = (props) => {
     dispatch({ type: GET_WORD, payload: res.data[0] });
   };
 
+  // update the Vocjem database
+  const actionUpdateDatabase = async () => {
+    dispatch({ type: ACTION_UPDATE_DATABASE, payload: "updating database..." });
+    const res = await apiUpdateDatabase();
+    const updateResult = res.data.result || "failure";
+    dispatch({ type: ACTION_UPDATE_DATABASE, payload: updateResult });
+  };
+
   // setup page for new content, clearing loading and is searching
   const setupPageForNewContent = () => {
     setLoading(true);
@@ -173,6 +184,7 @@ const VocyaApiState = (props) => {
         word: state.word,
         loading: state.loading,
         isSearching: state.isSearching,
+        dbUpdateStatus: state.dbUpdateStatus,
         getCourses,
         getCourse,
         getCourseChapters,
@@ -189,6 +201,7 @@ const VocyaApiState = (props) => {
         getWord,
         setLoading,
         setIsSearching,
+        actionUpdateDatabase,
       }}
     >
       {props.children}

dashboard/src/context/vocya_api/vocyaApiReducer.js

@@ -15,6 +15,7 @@ import {
   GET_WORD,
   SET_LOADING,
   SET_IS_SEARCHING,
+  ACTION_UPDATE_DATABASE,
 } from "../types";
 
 const vocyaApiReducer = (state, action) => {
@@ -51,6 +52,8 @@ const vocyaApiReducer = (state, action) => {
       return { ...state, loading: action.payload };
     case SET_IS_SEARCHING:
       return { ...state, isSearching: action.payload };
+    case ACTION_UPDATE_DATABASE:
+      return { ...state, dbUpdateStatus: action.payload };
     default:
       return state;
   }

dashboard/yarn.lock

@@ -4257,9 +4257,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30000981, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001125, caniuse-lite@npm:^1.0.30001449":
-  version: 1.0.30001460
-  resolution: "caniuse-lite@npm:1.0.30001460"
-  checksum: dad91eb82aa65aecf33ad6a04ad620b9df6f0152020dc6c1874224e8c6f4aa50695f585201b3dfcd2760b3c43326a86c9505cc03af856698fbef67b267ef786f
+  version: 1.0.30001523
+  resolution: "caniuse-lite@npm:1.0.30001523"
+  checksum: 3a007dc8147d4b5a6c22661d424e6d4e4e9595d0dcb279d25b93161cc7d54363eb12d053f40a186ba7e42a8bc4f59e6e121474b7aa339bf7ec200258400d39bc
   languageName: node
   linkType: hard
 

gha/build-container.sh

@@ -3,13 +3,20 @@
 # magic options for bash to make scripts safer
 set -Eeuxo pipefail
 
-# create a valid docker tag name from the branch name
-VALID_BRANCH_NAME=`echo $BRANCH_NAME | sed 's/[^a-zA-Z0-9]/-/g'`
-# if the branch is master, create an image using 'latest', otherwise the valid branch name
-if [[ $VALID_BRANCH_NAME == "master" ]]; then
-    DOCKER_TAG=latest
-else
-    DOCKER_TAG="test-$VALID_BRANCH_NAME"
+# check if we're running on a tag creation
+if [[ $REF_TYPE == "tag" ]]; then
+    # we're running on tag creation, set DOCKER_TAG to that tag
+    # make sure that the tag specified is valid
+    DOCKER_TAG=`echo $REF_NAME | sed 's/[^a-zA-Z0-9]/-/g'`
+else # we're running on a branch
+    # create a valid docker tag name from the branch name
+    VALID_BRANCH_NAME=`echo $REF_NAME | sed 's/[^a-zA-Z0-9]/-/g'`
+    # if the branch is master, create an image using 'latest', otherwise the valid branch name
+    if [[ $VALID_BRANCH_NAME == "master" ]]; then
+        DOCKER_TAG=latest
+    else
+        DOCKER_TAG="test-$VALID_BRANCH_NAME"
+    fi
 fi
 
 # build the docker image with the configured registry and tag