552 - Fix /media routes, also add /django-admin and /static rew…

…rites (#556)

* cleanup: remove now-unnecessary BE_PREFIX var

* route BE to test.strom.sk by default - no need for local BE. update README

* `/media` route rewrite

* fix `/media` links

* refactor, comments

* `/django-admin` and `/static` route rewrite

* for superuser, add `/django-admin` to menu

* fix BE /api on server

* fix #551: don't prefetch media files

.env

@@ -1,20 +1,20 @@
 # uncomment for debug server logs
 # DEBUG=true
 
+### BE URL
+# nizsie povolene vars prepisuju vyssie - zakomentuj podla potreby
+
 ## developovanie proti lokalnemu BE
 BE_PROTOCOL=http
 BE_HOSTNAME=localhost
 BE_PORT=8000
-BE_PREFIX=/api
 
 ## developovanie proti BE na test.strom.sk
-# BE_PROTOCOL=https
-# BE_HOSTNAME=test.strom.sk
-# BE_PORT=
-# BE_PREFIX=/api
+BE_PROTOCOL=https
+BE_HOSTNAME=test.strom.sk
+BE_PORT=
 
 ## developovanie proti BE na strom.sk
 # BE_PROTOCOL=https
 # BE_HOSTNAME=strom.sk
-# BE_PORT=
-# BE_PREFIX=/api
+# BE_PORT=

README.md

@@ -1,64 +1,90 @@
-# Návod na spustenie
+# webstrom-frontend
+
+- [Spustenie backendu](#spustenie-backendu)
+  - [Lokálny BE](#lokálny-be)
+- [Spustenie frontendu](#spustenie-frontendu)
+- [CSS types (deprecated)](#css-types-deprecated)
+- [IDE setup](#ide-setup)
 
 ## Spustenie backendu
 
-Na testovanie frontendu je potrebné mať prístup k API rozhraniu na backende. Návod na rozbehanie backendu sa nachádza vo [webstrom-backend](https://github.com/ZdruzenieSTROM/webstrom-backend/blob/master/README.md) repozitári.
+Defaultne sú API requesty smerované na deploynutý test BE (test.strom.sk). Zmeniť to môžeš v [.env](.env).
+
+### Lokálny BE
+
+Ak potrebuješ urobiť nejaké zmeny aj na BE (a otestovať, že to s FE funguje), musíš si spustiť BE lokálne a nasmerovať naň FE.
+Ak ti deployed BE stačí, pokračuj na [Spustenie frontendu](#spustenie-frontendu).
+
+Návod na rozbehanie backendu sa nachádza vo [webstrom-backend](https://github.com/ZdruzenieSTROM/webstrom-backend/blob/master/README.md) repozitári.
 
 Po inštalácii potrebných balíkov a vytvorení databázy spusti backend django server pomocou:
 
-```
+```sh
 python manage.py runserver
 ```
 
 Tento príkaz spustí server na `localhost:8000`, kde sa dá pristupovať k API a k django admin stránke.
 
+Zakomentuj/odkomentuj riadky v [.env](.env), aby requesty smerovali na BE na `localhost:8000`.
+
 ## Spustenie frontendu
 
 Naklonuj si projekt z GitHubu a prepni sa do priečinku projektu:
 
-```
+```sh
 git clone https://github.com/ZdruzenieSTROM/webstrom-frontend
 cd webstrom-frontend
 ```
 
-Na nainštalovanie potrebných balíkov je potrebné mať nainštalovaný [node.js](https://nodejs.org/en/) spolu so správcom balíkov [yarn](https://classic.yarnpkg.com/en/docs/install/#windows-stable) a potrebné balíky pre projekt sa nainštalujú pomocou:
+Potrebuješ:
 
-```
+- [Node.js](https://nodejs.org/en/) - javascriptový engine
+  - check, či ho máš: `node -v`
+  - dá sa nainštalovať priamo zo stránky, ale ideálne je použiť [nvm (Node Version Manager)](https://github.com/nvm-sh/nvm) (neboj sa inštalačných inštrukcií)
+- [Yarn](https://yarnpkg.com/getting-started/install) - správca JS balíkov
+
+Potrebné balíky pre projekt sa nainštalujú pomocou:
+
+```sh
 yarn install
 ```
 
 alebo len
 
-```
+```sh
 yarn
 ```
 
 Development server sa spustí pomocou príkazu:
 
-```
+```sh
 yarn dev
 ```
 
 Tento príkaz spustí server na `localhost:3000`, ktorý reaguje na zmeny vo frontendovom kóde a automaticky sa reloaduje.
 
-## CSS types
+## CSS types (deprecated)
 
-Na pregenerovanie CSS typov, popisujúcich typy pre `styles` z `*.module.css` do súborov `*.module.scss.d.ts` je potrebné spustiť
+DEPRECATED: `.module.scss` súborov sa snažíme zbaviť.
 
-```
+Na pregenerovanie CSS typov pre `styles` z `*.module.scss` (do súborov `*.module.scss.d.ts`) je potrebné spustiť:
+
+```sh
 yarn css-types
 ```
 
-Ak chceme aby sa tieto typy generovali automaticky počas vyvvíjania, je tu príkaz
+Ak chceme aby sa tieto typy generovali automaticky počas vyvíjania, je tu príkaz:
 
-```
+```sh
 yarn css-types-watch
 ```
 
-# IDE setup
+## IDE setup
 
-Používame VSCode, nainštaluj si doň [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) rozšírenie. V repe máme `.vscode` config, preto sa kód pri uložení automaticky formátuje. Rozšírenie je možné doinštalovať pomocou `Ctrl+P` a spustením:
+Používame VSCode, nainštaluj si doň [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) rozšírenie (formátuje kód). V repe máme `.vscode` config, v ktorom zapíname "fix-on-save" - kód sa teda formátuje pri uložení súboru.
 
-```
+Rozšírenie je takisto možné doinštalovať pomocou `Ctrl+P` a spustením:
+
+```sh
 ext install dbaeumer.vscode-eslint
 ```

deployment/Dockerfile

@@ -3,7 +3,6 @@ FROM node:20
 ARG BE_PROTOCOL
 ARG BE_HOSTNAME
 ARG BE_PORT
-ARG BE_PREFIX
 
 WORKDIR /app
 

deployment/compose-test.yaml

@@ -9,7 +9,6 @@ services:
         - BE_PROTOCOL=http
         - BE_HOSTNAME=localhost
         - BE_PORT=8920
-        - BE_PREFIX=/api
 
     image: webstrom-test-frontend
 
@@ -18,7 +17,6 @@ services:
       - BE_PROTOCOL=http
       - BE_HOSTNAME=localhost
       - BE_PORT=8920
-      - BE_PREFIX=/api
 
     network_mode: host
 

deployment/local-mac/Dockerfile

@@ -3,7 +3,6 @@ FROM node:20
 ARG BE_PROTOCOL
 ARG BE_HOSTNAME
 ARG BE_PORT
-ARG BE_PREFIX
 
 WORKDIR /app
 

deployment/local-mac/compose.yaml

@@ -7,7 +7,6 @@ services:
         - BE_PROTOCOL=http
         - BE_HOSTNAME=host.docker.internal
         - BE_PORT=8000
-        - BE_PREFIX=/api
 
     image: webstrom-test-frontend
 
@@ -16,7 +15,6 @@ services:
       - BE_PROTOCOL=http
       - BE_HOSTNAME=host.docker.internal
       - BE_PORT=8000
-      - BE_PREFIX=/api
 
     ports:
       - '3000:3000'

src/api/apiAxios.ts

@@ -2,11 +2,16 @@ import axios from 'axios'
 
 import {apiInterceptor} from '@/api/apiInterceptor'
 import {debugServer} from '@/utils/debugServer'
-import {getInternalBeServerUrl} from '@/utils/urlBase'
+import {getBackendServerUrl} from '@/utils/urlBase'
 
 export const newApiAxios = (base: 'server' | 'client') => {
   const instance = axios.create({
-    baseURL: base === 'server' ? getInternalBeServerUrl() : '/api',
+    // axios requesty mozu byt z FE next serveru alebo z browsru.
+    // - server vola BE URL (podla env vars) priamo
+    // - browser vola lokalnu /api URL
+    //   - na deployed verzii (test.strom.sk, strom.sk) to chyti nginx a posle na deployed BE
+    //   - na localhoste to chyti next middleware, kde to rewritneme na BE URL (podla env vars)
+    baseURL: base === 'server' ? `${getBackendServerUrl()}/api` : '/api',
     // auth pozostava z comba:
     // 1. `sessionid` httpOnly cookie - nastavuje a maze su server pri login/logout
     // 2. CSRF hlavicka - server nastavuje cookie, ktorej hodnotu treba vlozit do hlavicky. axios riesi automaticky podla tohto configu
@@ -24,6 +29,8 @@ export const newApiAxios = (base: 'server' | 'client') => {
 
       debugServer('[SERVER API]', method?.toUpperCase(), url && baseURL ? new URL(url, baseURL).href : url)
 
+      // server-side requesty z deployed FE na deployed BE potrebuju tieto hlavicky
+      // TODO: ked pojdeme do produkcie, asi bude treba riesit nejakym env varom
       config.headers['X-Forwarded-Host'] = 'test.strom.sk'
       config.headers['X-Forwarded-Proto'] = 'https'
 

src/api/apiInterceptor.ts

@@ -1,14 +1,14 @@
 import axios from 'axios'
 
-import {addApiTrailingSlash} from '@/utils/addApiTrailingSlash'
+import {addTrailingSlash} from '@/utils/trailingSlash'
 
 type RequestInterceptor = Parameters<typeof axios.interceptors.request.use>[0]
 
 export const apiInterceptor: RequestInterceptor = (config) => {
   if (config.url) {
     const [pathname, query] = config.url.split('?')
 
-    const newPathname = addApiTrailingSlash(pathname)
+    const newPathname = addTrailingSlash(pathname)
 
     config.url = `${newPathname}${query ? `?${query}` : ''}`
   }

src/components/Archive/Archive.tsx

@@ -23,7 +23,7 @@ const PublicationButton: FC<{
   publication: Publication
 }> = ({publication}) => {
   return (
-    <Link variant="button2" href={`/api${publication.file}`} target="_blank">
+    <Link variant="button2" href={publication.file} target="_blank">
       {publication.name}
     </Link>
   )

src/components/Clickable/Link.tsx

@@ -13,9 +13,27 @@ type LinkProps = {
   active?: boolean
   sx?: SxProps<Theme>
   textSx?: SxProps<Theme>
-} & Pick<ComponentProps<typeof NextLink>, 'target'>
+} & Pick<ComponentProps<typeof NextLink>, 'target' | 'prefetch'>
+
+export const Link: FC<LinkProps> = ({
+  children,
+  href,
+  disabled,
+  target,
+  variant,
+  invertColors,
+  active,
+  sx,
+  textSx,
+  prefetch: overridePrefetch,
+}) => {
+  // https://nextjs.org/docs/pages/api-reference/components/link#prefetch
+  // by default, next.js prefetchuje stranky vsetkych linkov vo viewporte. pre media PDFka je to zbytocne heavy.
+  // inak aj pri `false` sa stale prefetchne pri hoveri, co je acceptable.
+  const isMedia = href?.startsWith('/media')
+  const defaultPrefetch = !isMedia
+  const prefetch = overridePrefetch ?? defaultPrefetch
 
-export const Link: FC<LinkProps> = ({children, href, disabled, target, variant, invertColors, active, sx, textSx}) => {
   if (disabled) {
     return (
       <Box
@@ -47,6 +65,7 @@ export const Link: FC<LinkProps> = ({children, href, disabled, target, variant,
       component={NextLink}
       href={href ?? ''}
       target={target}
+      prefetch={prefetch}
       sx={{
         ...getButtonWrapperSx({invertColors, disabled, active}),
         ...sx,

src/components/CompetitionPage/CompetitionPage.tsx

@@ -94,19 +94,19 @@ export const CompetitionPage: FC<CompetitionPageProps> = ({
               </Grid>
               <Grid xs={2} display="flex" justifyContent="end">
                 {results && (
-                  <Link variant="button2" key={results.id} href={`/api${results.file}`} target="_blank">
+                  <Link variant="button2" key={results.id} href={results.file} target="_blank">
                     {PublicationTypes.RESULTS.display_name}
                   </Link>
                 )}
               </Grid>
               <Grid xs={2} display="flex" justifyContent="end">
                 {solutions ? (
-                  <Link variant="button2" key={solutions.id} href={`/api${solutions.file}`} target="_blank">
+                  <Link variant="button2" key={solutions.id} href={solutions.file} target="_blank">
                     {PublicationTypes.SOLUTIONS.display_name}
                   </Link>
                 ) : (
                   problems && (
-                    <Link variant="button2" key={problems.id} href={`/api${problems.file}`} target="_blank">
+                    <Link variant="button2" key={problems.id} href={problems.file} target="_blank">
                       {PublicationTypes.PROBLEMS.display_name}
                     </Link>
                   )

src/components/CompetitionPage/UpcomingOrCurrentEventInfo.tsx

@@ -47,7 +47,7 @@ export const UpcomingOrCurrentEventInfo: FC<{event: Event; name: string; shortNa
       </Typography>
       <Stack direction="row" sx={{justifyContent: 'end', gap: {xs: 1, sm: 2}}}>
         {invitationFile && (
-          <Link variant="button2" href={`/api/${invitationFile.name}`}>
+          <Link variant="button2" href={invitationFile.name ?? undefined} target="_blank">
             Pozvánka
           </Link>
         )}

src/components/PageLayout/MenuMain/MenuMain.tsx

@@ -17,7 +17,7 @@ import {BottomButtons} from './BottomButtons'
 export const MenuMain: FC = () => {
   const {seminar, seminarId} = useSeminarInfo()
 
-  const {hasPermissions} = useHasPermissions()
+  const {hasPermissions, isSuperuser} = useHasPermissions()
 
   const [isVisible, setIsVisible] = useState(false)
   const toggleMenu = () => setIsVisible((currentIsVisible) => !currentIsVisible)
@@ -125,6 +125,7 @@ export const MenuMain: FC = () => {
               <Stack>
                 <MenuMainItem caption="Opravovanie" url={`/${seminar}/admin/opravovanie/`} />
                 <MenuMainItem caption="Admin" url="/admin" />
+                {isSuperuser && <MenuMainItem caption="Django Admin" url="/django-admin" />}
               </Stack>
             </>
           )}

src/components/PublicationUploader/PublicationUploader.tsx

@@ -32,7 +32,7 @@ export const PublicationUploader: FC<PublicationUploaderProps> = ({semesterId, o
     <Stack direction="row" gap={2} alignItems="center">
       <Typography variant="body1">{order}. Časopis:</Typography>
       {publication && (
-        <Link variant="button2" href={`/api${publication.file}`} target="_blank">
+        <Link variant="button2" href={publication.file} target="_blank">
           {publication.name}
         </Link>
       )}