.eslintrc

 {
   "extends": "airbnb",
+  "parser": "babel-eslint",
   "globals": {
     "document": false
   },
   "rules": {
     "react/jsx-filename-extension": 0,
+    "react/no-danger": 0,
     "jsx-quotes": ["error", "prefer-single"],
     "import/prefer-default-export": 0,
-    "react/prop-types": 1,
-    "react/prefer-stateless-function": 0
+    "react/prop-types": 0,
+    "react/destructuring-assignment": 0,
+    "react/prefer-stateless-function": 0,
+    "camelcase": 0,
+    "no-alert": "off",
+    "no-undef": "off",
+    "no-console": "off",
+    "no-prototype-builtins": "off",
+    "import/no-cycle": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "react/no-access-state-in-setstate": "off",
+    "consistent-return": "off",
+    "no-case-declarations": "off"
   }
 }
-

.gitlab-ci.yml

+variables:
+  CONTAINER_IMAGE: 'harbor.sch.bme.hu/kszk-kepzes/frontend:$CI_COMMIT_REF_NAME'
+
+stages:
+  - Pre Build
+  - Docker Build
+  - deploy
+
+PreBuild:
+  stage: Pre Build
+  # tags: [kszk]
+  image: node:14.19-alpine3.14
+  script:
+    -   'echo -n "Node version: " && node --version \
+      && echo -n "NPM version: " && npm --version'
+    - npm install
+    - npm run build
+  cache:
+    paths:
+      - build/
+  artifacts:
+    expire_in: 1 day
+    paths:
+      - build/
+  only:
+    - tags
+
+Docker build:
+  stage: Docker Build
+  # tags: [kszk]
+  only:
+    - tags
+  image:
+    name: gcr.io/kaniko-project/executor:debug
+    entrypoint: ['']
+  script:
+    - echo "{\"auths\":{\"harbor.sch.bme.hu\":{\"username\":\"$REGISTRY_USER\",\"password\":\"$REGISTRY_PASSWORD\"}}}" > /kaniko/.docker/config.json
+    - /kaniko/executor --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/Dockerfile --destination $CONTAINER_IMAGE
+
+Deploy to Kubernetes:
+  stage: deploy
+  image: alpine
+  tags: [k9r]
+  environment:
+    name: master
+  before_script:
+    - chmod 600 $KUBECONFIG
+    - apk add --no-cache curl
+    - curl -LO "https://dl.k8s.io/release/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl"
+    - chmod +x ./kubectl
+    - mv ./kubectl /usr/local/bin/kubectl
+    - kubectl version
+  script:
+    - cd k8s
+    - sed -i "s|##IMAGETAG##|${CI_COMMIT_REF_NAME}|" deployment.yaml
+    - kubectl apply -f ./
+  only:
+    - tags

.travis.yml

+language: node_js
+node_js:
+  - "8"
+  - "9"
+
+# command to install dependencies
+install:
+  - npm install
+
+# command to run tests
+script:
+  - ./node_modules/.bin/eslint .
+  - npm run test

Dockerfile

+FROM nginx:1.19.2
+
+# copy the files builded with npm run build
+COPY build /var/www
+COPY nginx.conf /etc/nginx/nginx.conf
+
+EXPOSE 3000
+
+ENTRYPOINT ["nginx","-g","daemon off;"]

README.md

@@ -3,12 +3,25 @@
 ## Run & Install
 ```bash
 npm install
-# or
+
+## or
 yarn install
 
 cp config.js.temp config.js
 
 npm start
-# or
+## or
 yarn start
 ```
+
+# Docker
+```
+sudo docker image build -t kszkepzes-frontend .
+sudo docker container run --publish 3000:3000 --name kszkepzes-frontend kszkepzes-frontend
+```
+
+If you want to run in detached mode
+```
+sudo docker container run --publish 3000:3000 --detach --name kszkepzes-frontend kszkepzes-frontend
+```
+

k8s/deployment.yaml

+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: kszkepzes-frontend
+  namespace: kszk-kepzes-site
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: kszkepzes-frontend
+  strategy:
+    type: Recreate
+  template:
+    metadata:
+      labels:
+        app: kszkepzes-frontend
+    spec:
+      containers:
+        - name: kszkepzes-frontend
+          image: harbor.sch.bme.hu/kszk-kepzes/frontend:##IMAGETAG##
+          imagePullPolicy: 'Always'
+          ports:
+            - containerPort: 3000
+          resources:
+            limits:
+              memory: 200Mi
+      imagePullSecrets:
+        - name: harbor

k8s/ingress.yaml

+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  namespace: kszk-kepzes-site
+  annotations:
+    cert-manager.io/cluster-issuer: letsencrypt
+    kubernetes.io/tls-acme: "true"
+  name: kszkepzes-frontend
+spec:
+  rules:
+    - host: "ujonc.kszk.bme.hu"
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: kszkepzes-frontend
+                port:
+                  number: 3000
+  tls:
+    - hosts:
+        - "ujonc.kszk.bme.hu"
+      secretName: kszkepzes-cert
\ No newline at end of file

k8s/service.yaml

+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: kszkepzes-frontend
+  namespace: kszk-kepzes-site
+spec:
+  type: ClusterIP
+  ports:
+    - port: 3000
+      targetPort: 3000
+      name: front
+      protocol: TCP
+  selector:
+    app: kszkepzes-frontend

nginx.conf

+# auto detects a good number of processes to run
+worker_processes auto;
+
+#Provides the configuration file context in which the directives that affect connection processing are specified.
+events {
+    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
+    worker_connections 8000;
+    # Tells the worker to accept multiple connections at a time
+    multi_accept on;
+}
+
+
+http {
+    # what times to include
+    include       /etc/nginx/mime.types;
+    # what is the default one
+    default_type  application/octet-stream;
+
+    # Sets the path, format, and configuration for a buffered log write
+    log_format compression '$remote_addr - $remote_user [$time_local] '
+        '"$request" $status $upstream_addr '
+        '"$http_referer" "$http_user_agent"';
+
+    server {
+        # listen on port 80
+        listen 3000;
+        # save logs here
+        access_log /var/log/nginx/access.log compression;
+
+        # where the root here
+        root /var/www;
+        # what file to server as index
+        index index.html index.htm;
+
+        location / {
+            # First attempt to serve request as file, then
+            # as directory, then fall back to redirecting to index.html
+            try_files $uri $uri/ /index.html;
+        }
+
+        # Media: images, icons, video, audio, HTC
+        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
+          expires 1M;
+          access_log off;
+          add_header Cache-Control "public";
+        }
+
+        # Javascript and CSS files
+        location ~* \.(?:css|js)$ {
+            try_files $uri =404;
+            expires 1y;
+            access_log off;
+            add_header Cache-Control "public, max-age=60";
+        }
+
+        # Any route containing a file extension (e.g. /devicesfile.js)
+        location ~ ^.+\..+$ {
+            try_files $uri =404;
+        }
+    }
+}

package.json

 {
   "name": "kszkepzes-frontend",
-  "version": "0.1.0",
-  "proxy": "http://127.0.0.1:8000",
-  "private": true,
+  "version": "0.2.8",
+  "private": false,
   "dependencies": {
-    "axios": "^0.17.1",
-    "prop-types": "^15.6.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-redux": "^5.0.6",
-    "react-router-dom": "^4.2.2",
-    "react-scripts": "1.1.0",
-    "react-slick": "^0.17.1",
-    "redux": "^3.7.2",
+    "axios": "^0.21.1",
+    "eslint-plugin-flowtype": "^4.7.0",
+    "http-proxy-middleware": "^1.0.6",
+    "moment": "^2.29.1",
+    "npm": "^6.14.11",
+    "prop-types": "^15.7.2",
+    "react": "^16.14.0",
+    "react-datepicker": "^2.16.0",
+    "react-dom": "^16.14.0",
+    "react-redux": "^7.2.2",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^3.4.4",
+    "react-slick": "^0.25.2",
+    "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0",
-    "semantic-ui-css": "^2.2.12",
-    "semantic-ui-react": "^0.77.2"
+    "redux-thunk": "^2.3.0",
+    "semantic-ui-calendar-react": "^0.15.3",
+    "semantic-ui-css": "^2.4.0",
+    "semantic-ui-react": "^0.88.2",
+    "slick-carousel": "^1.8.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -25,10 +31,16 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "eslint": "^4.16.0",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.5.1"
-  }
+    "eslint": "6.8.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

public/index.css

+html, body, #root {
+  height: 100%;
+}

public/index.html

-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="hu">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
-    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      rel="shortcut icon"
+      type="image/svg+xml"
+      href="%PUBLIC_URL%/kszk_circle_lightblue.svg"
+    />
+    <link rel="stylesheet" href="%PUBLIC_URL%/index.css" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -21,13 +29,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>KSZKépzés 2025</title>
   </head>
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root" style="height: 100%"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

public/manifest.json

@@ -4,7 +4,6 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "192x192",
       "type": "image/png"
     }
   ],

src/actions/auth.js

-import ax from 'axios';
-import { GET_USERDATA, PROFILE_CHANGE, GROUP_CHANGE, LOGOUT } from './types';
+import {
+  GET_DEADLINE,
+  GET_USERDATA,
+  GROUP_CHANGE,
+  PROFILE_CHANGE,
+} from './types';
 
-const axios = ax.create({
-  xsrfCookieName: 'csrftoken',
-  xsrfHeaderName: 'X-CSRFToken',
-});
+import axios from './session';
 
-export const getUserData = () => (
-  async (dispatch) => {
+export const getUserData = () => async (dispatch) => {
+  try {
     const user = await axios.get('/api/v1/profiles/me');
     const {
-      id, join_date: joinDate, nick, motivation, signed, groups,
+      id,
+      join_date: joinDate,
+      nick,
+      motivation_about: motivationAbout,
+      motivation_profession: motivationProfession,
+      motivation_exercise: motivationExercise,
+      full_name,
+      signed,
+      groups,
+      role,
+      bits,
     } = user.data;
+    let permission;
+    switch (role) {
+      case 'Applicant':
+        permission = 1;
+        break;
+      case 'Student':
+        permission = 2;
+        break;
+      case 'Staff':
+        permission = 3;
+        break;
+      default:
+        permission = 0;
+        break;
+    }
+
     dispatch({
       type: GET_USERDATA,
       payload: {
-        id, joinDate, nick, motivation, signed, groups,
+        id,
+        joinDate,
+        nick,
+        motivationAbout,
+        motivationProfession,
+        motivationExercise,
+        full_name,
+        signed,
+        groups,
+        role,
+        permission,
+        bits,
       },
     });
+  } catch (e) {
+    console.log(e);
+
+    // Invalid session bug workaround
+    if (!e.response) {
+      window.location = "/oidc/logout"
+    }
   }
-);
+};
+
+export const getDeadline = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/profiles/deadline');
 
-export const textChange = ({ target: { name, value } }) => (
-  (dispatch) => {
-    dispatch({ type: PROFILE_CHANGE, payload: value, target: name });
+    dispatch({
+      type: GET_DEADLINE,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
   }
-);
+};
+
+export const textChange = ({ target: { name, value } }) => (dispatch) => {
+  dispatch({ type: PROFILE_CHANGE, payload: value, target: name });
+};
 
-export const groupChange = groups => (
-  dispatch => (dispatch({ type: GROUP_CHANGE, payload: groups }))
-);
+export const groupChange = (groups) => (dispatch) =>
+  dispatch({ type: GROUP_CHANGE, payload: groups });
 
 export const submitRegistration = ({
-  nick, groups, signed, motivation, id,
-}) => (
-  async (dispatch) => {
+  nick,
+  groups,
+  signed,
+  motivationAbout,
+  motivationProfession,
+  motivationExercise,
+  id,
+}) => async () => {
+  try {
     const response = await axios.patch(`/api/v1/profiles/${id}/`, {
-      nick, groups, signed, motivation,
+      nick,
+      groups,
+      signed,
+      motivation_about: motivationAbout,
+      motivation_profession: motivationProfession,
+      motivation_exercise: motivationExercise,
     });
     if (response.data.id === id) {
       alert('Sikeres mentés!');
     } else {
       alert('Mentés nem sikerült!');
     }
+  } catch (e) {
+    console.log(e, e.response);
+    alert('Mentés nem sikerült!');
   }
-);
-
-export const logout = () => (
-  async (dispatch) => {
-    const response = await axios.get('/api/v1/logout/');
-    if (response) {
-      dispatch({ action: LOGOUT });
-    }
-  }
-);
+};

src/actions/groups.js

+import { GET_GROUPS } from './types';
+import axios from './session';
+
+export const getGroups = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/groups');
+    dispatch({
+      type: GET_GROUPS,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};

src/actions/home.js

+import { GET_IMAGES } from './types';
+import axios from './session';
+
+export const getImages = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/images');
+    dispatch({
+      type: GET_IMAGES,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};

src/actions/homework.js

+import {
+  ADD_DOCUMENT,
+  ADD_SOLUTION,
+  ADD_TASK,
+  CHECK,
+  CLEAR_WRITE,
+  CORRECT_SOLUTION,
+  DELETE_TASK,
+  EDIT_TASK,
+  GET_DOCUMENTS,
+  GET_PROFILES,
+  GET_SOLUTIONS,
+  GET_TASKS,
+  SELECT_SOLUTION,
+  SELECT_TASK,
+  SETCHECKTRUE,
+  WRITE_SOLUTION,
+  WRITE_SOLUTION_FILE,
+  WRITE_TASK,
+} from './types';
+
+import axios from './session';
+
+export const getTasks = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/homework/tasks/');
+    dispatch({
+      type: GET_TASKS,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const getSolutions = (taskId) => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/homework/solutions/', {
+      task: taskId,
+    });
+    dispatch({
+      type: GET_SOLUTIONS,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const addTask = ({ title, text, deadline, bits }) => async (
+  dispatch
+) => {
+  try {
+    const response = await axios.post('/api/v1/homework/tasks/', {
+      title,
+      text,
+      deadline,
+      bits,
+    });
+    if (response.data.id) {
+      dispatch({
+        type: ADD_TASK,
+        payload: response.data,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const editTask = ({ id, title, text, deadline, bits }) => async (
+  dispatch
+) => {
+  try {
+    const response = await axios.patch(`/api/v1/homework/tasks/${id}/`, {
+      title,
+      text,
+      deadline,
+      bits,
+    });
+    if (response.data.id) {
+      dispatch({
+        type: EDIT_TASK,
+        payload: response.data,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const deleteTask = (task) => async (dispatch) => {
+  try {
+    const response = await axios.delete(`/api/v1/homework/tasks/${task.id}/`);
+    if (!response.data.id) {
+      dispatch({
+        type: DELETE_TASK,
+        payload: task,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const setSelectedTask = (task) => (dispatch) => {
+  dispatch({ type: SELECT_TASK, payload: task });
+};
+
+export const addDocument = ({ name, description, file, solution }) => async (
+  dispatch
+) => {
+  try {
+    const formData = new FormData();
+    formData.append('name', name);
+    formData.append('description', description);
+    formData.append('file', file);
+    formData.append('solution', solution);
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+    };
+    const response = await axios.post('/api/v1/documents/', formData, config);
+    if (response.data.id) {
+      dispatch({
+        type: ADD_DOCUMENT,
+        payload: response.data,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const addSolution = ({
+  task,
+  accepted,
+  corrected,
+  note,
+  name,
+  description,
+  file,
+}) => async (dispatch) => {
+  try {
+    const response = await axios.post('/api/v1/homework/solutions/', {
+      task,
+      accepted,
+      corrected,
+      note,
+    });
+    if (response.data.id) {
+      dispatch({
+        type: ADD_SOLUTION,
+        payload: response.data,
+      });
+    }
+
+    const solution = response.data.id;
+
+    const formData = new FormData();
+    formData.append('name', name);
+    formData.append('description', description);
+    formData.append('file', file);
+    formData.append('solution', solution);
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+    };
+    const responsedoc = await axios.post(
+      '/api/v1/documents/',
+      formData,
+      config
+    );
+    if (responsedoc.data.id) {
+      dispatch({
+        type: ADD_DOCUMENT,
+        payload: responsedoc.data,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const getDocuments = (solutionID) => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/documents', {
+      params: { solution: solutionID },
+    });
+    dispatch({
+      type: GET_DOCUMENTS,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const writeSolution = ({ target: { name, value } }) => (dispatch) => {
+  dispatch({ type: WRITE_SOLUTION, payload: value, target: name });
+};
+
+export const writeSolutionFile = ({ target: { files } }) => (dispatch) => {
+  dispatch({ type: WRITE_SOLUTION_FILE, payload: files[0], target: 'file' });
+};
+
+export const writeTask = ({ target: { name, value } }) => (dispatch) => {
+  dispatch({ type: WRITE_TASK, payload: value, target: name });
+};
+
+export const writeTaskDeadline = ({ name, value }) => (dispatch) => {
+  dispatch({ type: WRITE_TASK, payload: value, target: name });
+};
+
+export const clearWrite = () => (dispatch) => {
+  dispatch({ type: CLEAR_WRITE });
+};
+
+export const getProfiles = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/profiles/');
+    dispatch({
+      type: GET_PROFILES,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const correctSolution = (id, corrected, accepted, note) => async (
+  dispatch
+) => {
+  try {
+    const response = await axios.patch(`/api/v1/homework/solutions/${id}/`, {
+      corrected,
+      accepted,
+      note,
+    });
+    if (response.data.id) {
+      dispatch({
+        type: CORRECT_SOLUTION,
+        payload: response.data,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const check = (name) => (dispatch) => {
+  dispatch({ type: CHECK, target: name });
+};
+
+export const setchecktrue = (name) => (dispatch) => {
+  dispatch({ type: SETCHECKTRUE, target: name });
+};
+
+export const selectSolution = (solution) => (dispatch) => {
+  dispatch({
+    type: SELECT_SOLUTION,
+    payload: solution,
+  });
+};