bro.config.js

@@ -11,7 +11,7 @@ module.exports = {
   /* use https://admin.bro-js.ru/ to create config, navigations and features */
   navigations: {
     'kfu-24-teacher.main': '/kfu-24-teacher',
-    'kfu-24-teacher.detail': '/kfu-24-teacher/:id'
+    'kfu-24-teacher.detail': '/kfu-24-teacher/detail'
   },
   features: {
     'kfu-24-teacher': {

package.json

@@ -17,14 +17,9 @@
         "@brojs/cli": "^1.6.3",
         "@emotion/react": "^11.13.5",
         "@emotion/styled": "^11.13.5",
-        "@reduxjs/toolkit": "^2.5.0",
-        "axios": "^1.7.9",
         "express": "^4.19.2",
-        "keycloak-connect": "^26.0.7",
-        "keycloak-js": "^26.0.7",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-redux": "^9.2.0",
         "react-router-dom": "^6.28.0"
     },
     "devDependencies": {

src/container/detail/index.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import Heading from '../../components/heading';
 import { HeadingVariant } from '../../components/heading/types';
-import { useParams } from 'react-router-dom';
 
 const DetailPage = (): React.ReactElement => {
-  const { id } = useParams();
+  return <Heading variant={HeadingVariant.h2}>Detail Page</Heading>;
-  return <Heading variant={HeadingVariant.h2}>Detail Page {id} </Heading>;
 };
 
 export default DetailPage;

src/container/list/index.tsx

@@ -1,9 +1,30 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Heading from '../../components/heading';
-import { useGetListQuery } from '../../store/api';
 
 const ListPage = (): React.ReactElement => {
-  const { data, isLoading, error } = useGetListQuery(undefined);
+  const [error, setError] = useState<string>(null);
+  const [data, setData] = useState<Array<{ id: number; title: string; description: string }>>();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const handle = async () => {
+      setIsLoading(true);
+      try {
+        const res = await fetch('/api/list');
+        const data = await res.json();
+        if (res.ok) {
+          setData(data);
+        } else {
+          setError(data.message);
+        }
+      } catch (e) {
+        setError(e.message);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    handle();
+  }, []);
 
   return (
     <>

src/container/main/index.tsx

@@ -1,22 +1,9 @@
 import React from 'react';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './router';
-import { store } from '../../store';
-import { Provider } from 'react-redux';
-import { useKeycloak } from './keycloak';
 
-const Main = (): React.ReactElement | string => {
+const Main = (): React.ReactElement => {
-  const { isLoading } = useKeycloak();
+  return <RouterProvider router={router} />;
-
-  if (isLoading) {
-    return 'Loading...';
-  }
-
-  return (
-    <Provider store={store}>
-      <RouterProvider router={router} />
-    </Provider>
-  );
 };
 
 export default Main;

src/container/main/keycloak.ts

@@ -1,53 +0,0 @@
-import Keycloak from 'keycloak-js';
-import { useEffect, useState } from 'react';
-import { setToken } from '../../service/network';
-
-const keycloak = new Keycloak({
-  url: 'https://kc.bro-js.ru/',
-  realm: 'open',
-  clientId: 'kfu-m-24-1'
-});
-
-export interface User {
-  email: string;
-  email_verified: boolean;
-  family_name: string;
-  given_name: string;
-  name: string;
-  preferred_username: string;
-  id: string;
-}
-
-export const useKeycloak = () => {
-  const [isLoading, setIsLoading] = useState(true);
-  const [user, setUser] = useState();
-
-  useEffect(() => {
-    const handle = async () => {
-      setIsLoading(true);
-      try {
-        const authenticated = await keycloak.init({ onLoad: 'login-required' });
-        if (authenticated) {
-          setToken(keycloak.token);
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const { sub, ...user } = (await keycloak.loadUserInfo()) as any;
-          console.log(user);
-          setUser({ ...user, id: sub });
-          console.log('User is authenticated');
-        } else {
-          console.log('User is not authenticated');
-        }
-      } catch (error) {
-        console.error('Failed to initialize adapter:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    handle();
-  }, []);
-
-  return {
-    isLoading,
-    user
-  };
-};

src/service/list/index.ts

@@ -1,11 +0,0 @@
-import { network } from '../network';
-import { GetListResponse } from './types';
-
-class ListService {
-  async getList() {
-    const res = await network.get<GetListResponse>('/list');
-    return res.data;
-  }
-}
-
-export const listService = new ListService();

src/service/list/types.ts

@@ -1,7 +0,0 @@
-export interface ListItem {
-  id: number;
-  title: string;
-  description: string;
-}
-
-export type GetListResponse = Array<ListItem>;

src/service/network.ts

@@ -1,10 +0,0 @@
-import axios from 'axios';
-import { getConfigValue } from '@brojs/cli';
-
-const baseUrl = getConfigValue('kfu-24-teacher.api');
-
-export const network = axios.create({ baseURL: baseUrl });
-
-export const setToken = (token: string) => {
-  network.defaults.headers.authorization = `Bearer ${token}`;
-};

src/store/api.ts

@@ -1,29 +0,0 @@
-// Need to use the React-specific entry point to import createApi
-import { createApi, fetchBaseQuery, QueryReturnValue } from '@reduxjs/toolkit/query/react';
-import { GetListResponse } from '../service/list/types';
-import { listService } from '../service/list';
-
-const createQueryFromPromise =
-  <ARGS, RES>(fn: (...args: Array<ARGS>) => Promise<RES>) =>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  async (...args): Promise<QueryReturnValue<RES, any, any>> => {
-    try {
-      const data = await fn(...args);
-      return { data };
-    } catch (e: unknown) {
-      return { error: e };
-    }
-  };
-
-// Define a service using a base URL and expected endpoints
-export const api = createApi({
-  reducerPath: 'api',
-  baseQuery: fetchBaseQuery({ baseUrl: '' }),
-  endpoints: (builder) => ({
-    getList: builder.query<GetListResponse, undefined>({
-      queryFn: createQueryFromPromise(() => listService.getList())
-    })
-  })
-});
-
-export const { useGetListQuery } = api;

src/store/index.ts

@@ -1,20 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit';
-import { api } from './api';
-import { setupListeners } from '@reduxjs/toolkit/query';
-
-export const store = configureStore({
-  reducer: {
-    // Add the generated reducer as a specific top-level slice
-    [api.reducerPath]: api.reducer
-  },
-  // Adding the api middleware enables caching, invalidation, polling,
-  // and other useful features of `rtk-query`.
-  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware)
-});
-
-setupListeners(store.dispatch);
-
-// Infer the `RootState` and `AppDispatch` types from the store itself
-export type RootState = ReturnType<typeof store.getState>;
-// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
-export type AppDispatch = typeof store.dispatch;

stubs/api/index.js

@@ -1,6 +1,5 @@
 const router = require('express').Router();
 const listRouter = require('./list');
-const keycloak = require('./keycloak');
 module.exports = router;
 
 const delay =
@@ -9,6 +8,5 @@ const delay =
     setTimeout(next, ms);
   };
 
-router.use(keycloak.middleware());
 router.use(delay());
 router.use('/list', listRouter);

stubs/api/keycloak.js

@@ -1,12 +0,0 @@
-const Keycloak = require('keycloak-connect');
-
-const kcConfig = {
-  clientId: 'kfu-m-24-1',
-  bearerOnly: true,
-  serverUrl: 'https://kc.bro-js.ru/',
-  realm: 'open'
-};
-
-const keycloak = new Keycloak({}, kcConfig);
-
-module.exports = keycloak;

stubs/api/list/index.js

@@ -3,9 +3,8 @@ const router = require('express').Router();
 module.exports = router;
 
 const data = require('./data/list.json');
-const keycloak = require('../keycloak');
 
-router.get('/', keycloak.protect(), (req, res) => {
+router.get('/', (req, res) => {
   res.send(data);
   // res.status(500).send({
   //   message: 'Internal server error'

tsconfig.json

@@ -9,7 +9,7 @@
         "esModuleInterop": true,
         "noImplicitAny": false,
         "module": "esnext",
-        "moduleResolution": "Bundler",
+        "moduleResolution": "node",
         "target": "es6",
         "jsx": "react",
         "typeRoots": ["node_modules/@types", "src/typings"],