diff --git a/README.md b/README.md index f1c697ae9..f9254371d 100644 --- a/README.md +++ b/README.md @@ -7,27 +7,28 @@ - **[Technical Documentation](/docs/technical/README.md)** - [Work Methodology](/docs/work-methodology.md) - [Useful Commands](/docs/useful-commands.md) - +- [Technologies used on Samf4 🤖](/docs/technical/Samf4Tech.md) +- [Useful Docker aliases](/docs/docker-project-specific-commands.md) ## Installation -We have a script that handles all installation for you. To run the script, a Github Personal Access Token (PAT) is required. -You can make one here https://github.com/settings/tokens/new. Tick scopes `repo`, `read:org` and `admin:public_key`), +We have a script that handles all installation for you. To run the script, a Github Personal Access Token (PAT) is required. +You can make one here https://github.com/settings/tokens/new. Tick scopes `repo`, `read:org` and `admin:public_key`), then store the token somewhere safe (Github will never show it again). -Copy these commands (press button on the right-hand side of the block) +Copy these commands (press button on the right-hand side of the block) and run from the directory you would clone the project. ```sh -# non-interactive -read -s -p "Github PAT token: " TOKEN ; X_INTERACTIVE=n /bin/bash -c "$(curl -fsSL https://$TOKEN@raw.githubusercontent.com/Samfundet/Samfundet4/master/{bash_utils.sh,install.sh})" && . ~/.bash_profile && cd Samfundet4; unset TOKEN; unset X_INTERACTIVE; +# Interactive +read -s -p "Github PAT token: " TOKEN ; X_INTERACTIVE=y /bin/bash -c "$(curl -fsSL https://$TOKEN@raw.githubusercontent.com/Samfundet/Samfundet4/master/{bash_utils.sh,install.sh})" && . ~/.bash_profile && cd Samfundet4; unset TOKEN; unset X_INTERACTIVE; ```
-Interactive (show/hide) +Non-interactive (show/hide) ```sh -# interactive -read -s -p "Github PAT token: " TOKEN ; X_INTERACTIVE=y /bin/bash -c "$(curl -fsSL https://$TOKEN@raw.githubusercontent.com/Samfundet/Samfundet4/master/{bash_utils.sh,install.sh})" && . ~/.bash_profile && cd Samfundet4; unset TOKEN; unset X_INTERACTIVE; +# Non-interactive +read -s -p "Github PAT token: " TOKEN ; X_INTERACTIVE=n /bin/bash -c "$(curl -fsSL https://$TOKEN@raw.githubusercontent.com/Samfundet/Samfundet4/master/{bash_utils.sh,install.sh})" && . ~/.bash_profile && cd Samfundet4; unset TOKEN; unset X_INTERACTIVE; ``` + +### Frontend 🎨🧭 +#### React with TypeScript ⚛️💙 +For frontend development we use [React](https://react.dev/learn) with TypeScript. React is a JavaScript(JS) library that is used to build frontend components with specific properties(props). Also, to manage the state and side effects of these components, by using [React-hooks](https://react.dev/learn#using-hooks). TypeScript is a superset of JS, which means that it builds on JS. TypeScript adds optional static typing to JS and can therefore help to catch errors like type-errors. We use React and TypeScript because they are web technologies used extensively across the modern web. TypeScript also has a relatively low learning curve. + +Something that might be confusing when learning about React (which you might also see be called TSX or JSX) and TypeScript for the first time is how they are two diffrent concepts. You can think of TypeScript as the programming language we use and React as what projects(renders) the HTML of a website(with some nice features for controlling the rendering). This is extremly simplified and also somewhat incorrect, but it Primes your brain to parse the diffrence between TypeScript and React. + +The more detailed explanation of the diffrence is that TypeScript actually is, as mentioned, a superset of JavaScript. It adds and builds features onto JavaScript, like strict typing hence the name(in the end it compiles down to JavaScript), while React is a webtechnology that renders HTML. +React exploits something called a virtual DOM(document object model) to render HTML(in actuality something similar to it) content on the web. Historically when webdevelopers wanted to control how HTML is shown/rendered they have manipulated the [DOM (document object model)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), which controls how we see HTML on the web. This is still possible, but React can be used as a tool to do this in a better way. React is a webtechnology that uses the virtual DOM to render HTML more efficiently, while also makeing it easier to control how the HTML is rendered. + +You will notice our frontend .tsx(TypeScript-React) files have functions in them which contain both what looks like JavaScript and HTML([use this example](/frontend/src/Components/Checkbox/Checkbox.tsx)). As you now might have guessed this is actually TypeScript and React, where what looks like JavaScript is TypeScript and what looks like HTML is actually JSX (JavaScript XML), a syntax extension for JavaScript. Remember, TypeScript compiles to JavaScript! JSX is used in React to describe the structure of the components. It has to be added that the arguments given to the functions, which are called props, and the hooks you might see (e.g. useState) are also features of React. + +More detailed docs for React-hooks is found [here](https://react.dev/reference/react). + +To learn more about TypeScript you can check out the [TypeScript docs](https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html ) or simple [tutorials on W3Schools](https://www.w3schools.com/typescript/typescript_intro.php). + +#### Sass 💅 +On Samfundet4 we use Sass for styling, which is a CSS extension language. You will find that you can write plain [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), but the features added by Sass are extremely useful like variables and at-rules not found in plain CSS. You need to know about the [constants](/frontend/src/_constants.scss) we use and the [mixins](/frontend/src/_mixins.scss) we use, which are custom made at-rules for standard styling. Checking out these two files might save you some time when styling. +Read more about Sass and its documentation [here](https://sass-lang.com/documentation/). + +We also use [PostCSS](https://postcss.org/), this is a tool that you will find is configured in Samfundet4 and works in the background to optimise and make styling load faster. + + +## Developing Samfundet4 👩‍💻 +### Virtual environment and Docker +#### WSL 🪟🐧 +On windows machines samfundet4 has to be run in Windows Subsystem for Linux (WSL). It is not needed on a Mac because macOS is based on Unix, which is similar to Linux. The reason why we develop on Linux architecture is because of how the project will be hosted when live. + +In WSL you might have to look into installing Node.js, npm and nvm. You can look into this [here](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl). + +#### Docker 🐳 +We use a tool called [Docker](https://www.docker.com/), which allows for running environments with necessary dependencies for running the project. Hence running the project in Docker will make sure you have all the dependencies and packages needed to run the project. You can read about Docker here for and overview on this [IBM site](https://www.ibm.com/topics/docker) and will find more in-depth information in [Docker documentation]( https://docs.docker.com/get-started/overview/). + +⚠️🐳The best way to ensure that you can run the project is by using Docker. Docker provides more functionality than running the project locally, like dependency management or resource efficiency. Docker is an extremely useful tool that you will benefit greatly from if you learn to use it. +### Package managers and dependencies 🧱 +If you are new to web development you might not have experience with dependencies. Dependencies are packages or modules that are required for a web development project to run properly and package managers are software that manage these packages and dependencies. + +For our Python-based development, we primarily use pyenv and pipenv. Pyenv allows us to manage multiple versions of Python on the same system, while pipenv helps us create and manage the backend virtual environment for our project. + +For frontend development, we use Node.js as a JavaScript runtime, and we rely on tools like npm and Yarn for managing dependencies. To install Node.js in WSL🪟🐧 follow the [9-step Windows Learn guide](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl#install-wsl-2) and make sure you also follow prompts given by the terminal as you install Node.js this way. + +We use Yarn specifically for managing [Storybook](https://storybook.js.org/) and [Cypress](https://www.cypress.io/). Storybook is a tool for developing frontend components in isolation and Cypress is a tool for testing frontend components. + +To develop on the Samfundet4 project locally you will need to install all package managers and dependencies, but you should use Docker. In [Useful commands](/docs/useful-commands.md) you will find documentation on commands to install dependencies localy. + +### Formatters and linters 📜 +To make the code we write on the project high quality, have a standardised format and generally readable we use the formatters and linters. This is very useful when writing code as a team. The main purpose for this section is so that you will have some idea of why you code might not pass some tests on GitHub when you push your code and make a pull-request(PR). +#### Frontend 🎨🧭 +For frontend we use the formatter Prettier, which formats the code in a standardised way. +Linters are software that analyses code to detect errors, bugs or stylistic inconsistency. Hence we use linter as tools to write better, more high quality code. In frontend we use ESlint for React and stylelint for CSS/SASS. + +**This next paragraph is only applicable if you use VScode:** +To use our code format and linting rules you have to configure a JSON file locally, and of course have the tools installed in your IDE. After installing the project and getting it to run, you need to copy [this JSON file](/.vscode/settings.emil.json), paste it into the same folder, and rename it to 'settings.json'. + +When installing the project for the first time you will have the option to install Prettier and ESlint in VSCode. Stylelint is easily found in VSCode extensions. + +When you push code to the main branch it will be checked automatically (by [GitHub Actions](https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions)) to chech if it follows the formatting and linting rules we use. It is also useful to know that these checks can be run locally by commands in the terminal, which are found in [Useful commands](/docs/useful-commands.md), but it it might be more convenient to run them inside the [frontend docker container in a Bash terminal.](/docs/docker-project-specific-commands.md) + +If you want you can also read the [prettier](https://prettier.io/), [eslint](https://eslint.org/) or [stylelint](https://stylelint.io/) documentation, but this might not be necessary. These tools will give you indication of why your code breaks the rules, and you can see how your code should be written by hovering over the indications. + +#### Backend ⚙️ +In backend we use the Python formatter [yapf](https://pypi.org/project/yapf/) because it is a formatter that offers multiple popular Python formats and standards. The format is configured in a Python file in backend. +For linting we use [flake8](https://flake8.pycqa.org/en/latest/) and [pylint](https://pypi.org/project/pylint/). They have similar functions, but flake8 has some more functionality. These tools are especially helpful because they can highlight code errors and can make suggestions for better code. You can run the backend GitHub Actions checks in Docker, [read more here.](/docs/docker-project-specific-commands.md). We use a tool called [Bandit](https://bandit.readthedocs.io/en/latest/), which is a linter that detects secuity issues in Python code. We also aim to make our Python code more strictly typed, which is why we use [mypy](https://mypy.readthedocs.io/en/stable/index.html). + +# Summation +In summary, Samfundet4 employs Django for the backend, Django REST Framework for APIs, React with TypeScript for the frontend, Sass for styling, and Docker for a consistent development environment. Various package managers and formatters/linters are used to ensure code quality and consistency throughout the project. Before starting your Samfundet4 journey you need to check out the[Work Methodology](/docs/work-methodology.md) and the [Technical Documentation](/docs/technical/README.md). + + diff --git a/frontend/src/AppRoutes.tsx b/frontend/src/AppRoutes.tsx index cb4de21b6..f94ddb898 100644 --- a/frontend/src/AppRoutes.tsx +++ b/frontend/src/AppRoutes.tsx @@ -15,6 +15,7 @@ import { LycheAboutPage, LycheHomePage, NotFoundPage, + RecruitmentAdmissionFormPage, RecruitmentPage, RouteOverviewPage, SaksdokumenterPage, @@ -36,6 +37,7 @@ import { RecruitmentGangAdminPage, RecruitmentGangOverviewPage, RecruitmentPositionFormAdminPage, + RecruitmentUsersWithoutInterview, SaksdokumentFormAdminPage, } from '~/PagesAdmin'; import { useGoatCounter } from '~/hooks'; @@ -48,6 +50,7 @@ import { RecruitmentFormAdminPage } from './PagesAdmin/RecruitmentFormAdminPage' import { SaksdokumentAdminPage } from './PagesAdmin/SaksdokumentAdminPage'; import { PERM } from './permissions'; import { ROUTES } from './routes'; +import { RecruitmentPositionOverviewPage } from './PagesAdmin/RecruitmentPositionOverviewPage/RecruitmentPositionOverviewPage'; export function AppRoutes() { // Must be called within because it uses hook useLocation(). @@ -75,6 +78,7 @@ export function AppRoutes() { } /> } /> } /> + } /> {/* ADMIN ROUTES @@ -171,6 +175,10 @@ export function AppRoutes() { path={ROUTES.frontend.admin_recruitment_edit} element={} /> + } + /> {/* TODO ADD PERMISSIONS */} } /> + } + /> } diff --git a/frontend/src/Components/Dropdown/Dropdown.tsx b/frontend/src/Components/Dropdown/Dropdown.tsx index 77e321e14..1b62660db 100644 --- a/frontend/src/Components/Dropdown/Dropdown.tsx +++ b/frontend/src/Components/Dropdown/Dropdown.tsx @@ -12,6 +12,7 @@ export type DropDownOption = { type DropdownProps = { className?: string; defaultValue?: DropDownOption; + initialValue?: T; options?: DropDownOption[]; label?: string | ReactElement; disabled?: boolean; @@ -22,6 +23,7 @@ type DropdownProps = { export function Dropdown({ options = [], defaultValue, + initialValue, onChange, className, label, @@ -50,9 +52,9 @@ export function Dropdown({ className={classNames(styles.samf_select, error && styles.error)} onChange={handleChange} disabled={disabled} - defaultValue={-1} + defaultValue={initialValue !== undefined ? options.map((e) => e.value).indexOf(initialValue) : -1} > - {defaultValue ? : } + {defaultValue ? : } {options.map((opt, index) => { return (