50 |
115 |
116 |
129 | );
130 | };
131 |
132 | export default App;
133 |
--------------------------------------------------------------------------------
/src/common/EventBus.ts:
--------------------------------------------------------------------------------
1 | const eventBus = {
2 | on(event: string, callback: EventListener) {
3 | document.addEventListener(event, (e) => callback(e));
4 | },
5 | dispatch(event: string, data?: any) {
6 | document.dispatchEvent(new CustomEvent(event, { detail: data }));
7 | },
8 | remove(event: string, callback: EventListener) {
9 | document.removeEventListener(event, callback);
10 | },
11 | };
12 |
13 | export default eventBus;
14 |
--------------------------------------------------------------------------------
/src/components/BoardAdmin.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 |
3 | import { getAdminBoard } from "../services/user.service";
4 | import EventBus from "../common/EventBus";
5 |
6 | const BoardAdmin: React.FC = () => {
7 | const [content, setContent] = useState
117 |
118 |
127 |
128 |
33 |
34 |
36 |
37 | );
38 | };
39 |
40 | export default BoardAdmin;
41 |
--------------------------------------------------------------------------------
/src/components/BoardModerator.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 |
3 | import { getModeratorBoard } from "../services/user.service";
4 | import EventBus from "../common/EventBus";
5 |
6 | const BoardModerator: React.FC = () => {
7 | const [content, setContent] = useState{content}
35 |
33 |
34 |
36 |
37 | );
38 | };
39 |
40 | export default BoardModerator;
41 |
--------------------------------------------------------------------------------
/src/components/BoardUser.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 |
3 | import { getUserBoard } from "../services/user.service";
4 | import EventBus from "../common/EventBus";
5 |
6 | const BoardUser: React.FC = () => {
7 | const [content, setContent] = useState{content}
35 |
33 |
34 |
36 |
37 | );
38 | };
39 |
40 | export default BoardUser;
41 |
--------------------------------------------------------------------------------
/src/components/Home.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 |
3 | import { getPublicContent } from "../services/user.service";
4 |
5 | const Home: React.FC = () => {
6 | const [content, setContent] = useState{content}
35 |
26 |
27 |
29 |
30 | );
31 | };
32 |
33 | export default Home;
34 |
--------------------------------------------------------------------------------
/src/components/Login.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { NavigateFunction, useNavigate } from 'react-router-dom';
3 | import { Formik, Field, Form, ErrorMessage } from "formik";
4 | import * as Yup from "yup";
5 |
6 | import { login } from "../services/auth.service";
7 |
8 | type Props = {}
9 |
10 | const Login: React.FC{content}
28 |
56 |
108 | );
109 | };
110 |
111 | export default Login;
112 |
--------------------------------------------------------------------------------
/src/components/Profile.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { getCurrentUser } from "../services/auth.service";
3 |
4 | const Profile: React.FC = () => {
5 | const currentUser = getCurrentUser();
6 |
7 | return (
8 |
57 | 
62 |
67 |
105 |
106 |
107 | 
62 |
9 |
10 |
14 |
30 | );
31 | };
32 |
33 | export default Profile;
34 |
--------------------------------------------------------------------------------
/src/components/Register.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Formik, Field, Form, ErrorMessage } from "formik";
3 | import * as Yup from "yup";
4 |
5 | import IUser from "../types/user.type";
6 | import { register } from "../services/auth.service";
7 |
8 | const Register: React.FC = () => {
9 | const [successful, setSuccessful] = useState11 | {currentUser.username} Profile 12 |
13 |15 | Token: {currentUser.accessToken.substring(0, 20)} ...{" "} 16 | {currentUser.accessToken.substr(currentUser.accessToken.length - 20)} 17 |
18 |19 | Id: {currentUser.id} 20 |
21 |22 | Email: {currentUser.email} 23 |
24 | Authorities: 25 |-
26 | {currentUser.roles &&
27 | currentUser.roles.map((role: string, index: number) =>
- {role} )} 28 |
68 |
138 | );
139 | };
140 |
141 | export default Register;
142 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import ReactDOM from 'react-dom/client';
2 | import { BrowserRouter } from "react-router-dom";
3 |
4 | import './index.css';
5 | import App from './App';
6 | import reportWebVitals from './reportWebVitals';
7 |
8 | const root = ReactDOM.createRoot(
9 | document.getElementById('root') as HTMLElement
10 | );
11 |
12 | root.render(
13 |
69 |
74 |
79 |
135 |
136 |
137 |
74 |