Skip to content

Commit

Permalink
Update Router
Browse files Browse the repository at this point in the history
  • Loading branch information
@BerkeAras
BerkeAras committed Feb 6, 2022
1 parent 26379c1 commit 3be01df
Show file tree
Hide file tree
Showing 14 changed files with 399 additions and 202 deletions.
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,11 @@
"react-ionicons": "^4.0.5",
"react-markdown": "^7.1.1",
"react-newline-to-break": "^1.0.6",
"react-router-dom": "^5.2.0",
"react-router-dom": "^6.2.1",
"react-scripts": "4.0.1",
"react-virtual-scrolling": "^1.1.4",
"rehype-highlight": "^5.0.2",
"rehype-raw": "^6.1.1",
"remark-gfm": "^3.0.1",
"sass": "^1.30.0",
"semantic-ui-css": "^2.4.1",
Expand Down
127 changes: 41 additions & 86 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { Component } from 'react'
import './scss/style.scss'
import { BrowserRouter as Router, Switch, Route, Link, Redirect, useParams } from 'react-router-dom'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { Loader } from 'semantic-ui-react'

import SignIn from './views/auth/SignIn'
Expand All @@ -19,6 +19,7 @@ import SinglePost from './views/SinglePost'
import KnowledgeBase from './views/KnowledgeBase'
import SignUpWrapper from './views/auth/SignUp'
import Topic from './views/Topic'
import Error404 from './views/Error404'

import FirstLogin from './components/User/UserFirstLogin'
import CookieBanner from './components/App/AppCookieBanner'
Expand Down Expand Up @@ -254,103 +255,57 @@ class App extends React.Component {
render() {
return (
<ConfigContext.Provider value={this.state.loadedConfig}>
<Router>
<BrowserRouter>
{this.state.first_login && <FirstLogin handleStateChange={this.handleStateChange} />}
<Switch>
{this.state.isLoggedIn === true && this.state.configLoaded === true && (
<AuthProvider value={this.state.loginData}>
<Route exact path="/">
<Redirect to="/app" />
</Route>
<Route exact path="/app">
<MainApp />
</Route>
<Route exact path="/app/post/:postId">
<SinglePost />
</Route>
<Route exact path="/app/topic/:hashTag">
<Topic />
</Route>
<Route exact path="/logout">
<LogOut />
</Route>
<Route path="/app/user/:email">
<User />
</Route>
<Route path="/app/group/:id" exact>
<Group />
</Route>
<Route path="/app/groups">
<Groups />
</Route>
<Route path="/app/group-request-approved">
<GroupRequestApproved />
</Route>
<Route path="/app/group-request-pending">
<GroupRequestPending />
</Route>
<Route exact path="/app/group/:id/request/:request_id/:request_status">
<GroupRequestUpdate />
</Route>
<Route exact path="/app/knowledgebase">
<KnowledgeBase />
</Route>
<Route exact path="/app/knowledgebase/:folderId">
<KnowledgeBase />
</Route>
<Route exact path="/app/knowledgebase/:folderId/:fileId">
<KnowledgeBase />
</Route>
<Route exact path="/app/knowledgebase/:folderId/:fileId/:historyId">
<KnowledgeBase />
</Route>

{this.state.isLoggedIn === true && this.state.configLoaded === true && (
<AuthProvider value={this.state.loginData}>
<Routes>
<Route exact path="/" element={<Navigate to="/app" />} />
<Route exact path="/app" element={<MainApp />} />
<Route exact path="/app/post/:postId" element={<SinglePost />} />
<Route exact path="/app/topic/:hashTag" element={<Topic />} />
<Route exact path="/logout" element={<LogOut />} />
<Route exact path="/app/user/:email" element={<User />} />
<Route exact path="/app/group/:id" element={<Group />} />
<Route exact path="/app/groups" element={<Groups />} />
<Route exact path="/app/group-request-approved" element={<GroupRequestApproved />} />
<Route exact path="/app/group-request-pending" element={<GroupRequestPending />} />
<Route exact path="/app/group/:id/request/:request_id/:request_status" element={<GroupRequestUpdate />} />
<Route exact path="/app/knowledgebase" element={<KnowledgeBase />} />
<Route exact path="/app/knowledgebase/:folderId" element={<KnowledgeBase />} />
<Route exact path="/app/knowledgebase/:folderId/:fileId" element={<KnowledgeBase />} />
<Route exact path="/app/knowledgebase/:folderId/:fileId/:historyId" element={<KnowledgeBase />} />
{this.state.loggedInUserIsAdmin && (
<>
<Route path="/app/settings/:category">
<Settings />
</Route>
<Route exact path="/app/settings">
<Redirect to="/app/settings/overview" />
</Route>
</>
<React.Fragment>
<Route path="/app/settings/:category" element={<Settings />} />
<Route exact path="/app/settings" element={<Navigate to="/app/settings/overview" />} />
</React.Fragment>
)}
</AuthProvider>
)}
<Route path="*" element={<Error404 />} />
</Routes>
</AuthProvider>
)}
<Routes>
{this.state.isLoggedIn === false && this.state.configLoaded === true && (
<React.Fragment>
<Route exact path="/">
<SignIn />
</Route>
<Route path="/app">
<Redirect to={`/?ref=${window.location.pathname}`} />
</Route>
<Route exact path="/signup">
<SignUpWrapper />
</Route>
<Route path="/signup/activate/:token">
<ActivateAccount />
</Route>
<Route exact path="/password-reset">
<PasswordReset />
</Route>
<Route exact path="/logout">
<LogOut />
</Route>
<Route path="*">
<SignIn />
</Route>
<Route exact path="/" element={<SignIn />} />
<Route path="/app" element={<Navigate to={`/?ref=${window.location.pathname}`} />} />
<Route exact path="/signup" element={<SignUpWrapper />} />
<Route path="/signup/activate/:token" element={<ActivateAccount />} />
<Route exact path="/password-reset" element={<PasswordReset />} />
<Route exact path="/logout" element={<LogOut />} />
<Route path="*" element={<Error404 />} />
</React.Fragment>
)}
{(this.state.isLoggedIn === null || this.state.configLoaded == null || this.state.configLoaded == false) && (
<React.Fragment>
<Route path="/*">
<Loader className="app-loader" active size="large" content="Initializing WorkGroup..." />
</Route>
<Route path="/*" element={<Loader className="app-loader" active size="large" content="Initializing WorkGroup..." />}></Route>
</React.Fragment>
)}
</Switch>
</Routes>
{this.state.configLoaded === true && <CookieBanner isLoggedIn={this.state.isLoggedIn} />}
</Router>
</BrowserRouter>
</ConfigContext.Provider>
)
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Feed/FeedCommentSection/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useRef } from 'react'
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import './style.scss'
import { Feed, Icon, Header, Loader, Button, Comment, Form } from 'semantic-ui-react'
import PropTypes from 'prop-types'
Expand Down Expand Up @@ -168,7 +168,7 @@ class CommentSection extends React.Component {
})
)
) : (
<Redirect to="/" />
<Navigate to="/" />
)}

<Form onSubmit={this.handleSubmit} reply>
Expand Down
8 changes: 4 additions & 4 deletions src/components/Header/Header/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const Header = () => {
Skip to content
</a>
<div className="nav-header">
<NavLink exact to="/" className="header__logo">
<NavLink to="/" className="header__logo">
<img src={headerLogo} alt="Logo" />
</NavLink>
<SearchField />
Expand All @@ -116,13 +116,13 @@ const Header = () => {
<X></X>
</div>

<NavLink exact className="header__menu-item" activeClassName="header__menu-item--active" to="/app">
<NavLink end className={({ isActive }) => (!isActive ? 'header__menu-item' : 'header__menu-item header__menu-item--active')} to="/app">
Home
</NavLink>
<NavLink exact className="header__menu-item" activeClassName="header__menu-item--active" to="/app/groups">
<NavLink end className={({ isActive }) => (!isActive ? 'header__menu-item' : 'header__menu-item header__menu-item--active')} to="/app/groups">
Groups
</NavLink>
<NavLink className="header__menu-item" activeClassName="header__menu-item--active" to="/app/knowledgebase">
<NavLink className={({ isActive }) => (!isActive ? 'header__menu-item' : 'header__menu-item header__menu-item--active')} to="/app/knowledgebase">
Knowledge Base
</NavLink>
</div>
Expand Down
12 changes: 8 additions & 4 deletions src/components/Header/HeaderDropdown/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react'
import './style.scss'
import { Link, NavLink } from 'react-router-dom'
import { NavLink } from 'react-router-dom'
import PropTypes from 'prop-types'

const HeaderDropdown = (props) => {
Expand Down Expand Up @@ -35,18 +35,22 @@ const HeaderDropdown = (props) => {
}}
className="header__dropdown"
>
<NavLink exact className="header__dropdown-item" activeClassName="header__dropdown-item--active" to={'/app/user/' + localStorage.getItem('user_email')}>
<NavLink
end
className={({ isActive }) => (!isActive ? 'header__dropdown-item' : 'header__dropdown-item header__dropdown-item--active')}
to={'/app/user/' + localStorage.getItem('user_email')}
>
My Account
</NavLink>
{localStorage.getItem('user_admin') !== undefined && localStorage.getItem('user_admin') == '1' && (
<NavLink exact className="header__dropdown-item" activeClassName="header__dropdown-item--active" to="/app/settings">
<NavLink className={({ isActive }) => (!isActive ? 'header__dropdown-item' : 'header__dropdown-item header__dropdown-item--active')} to="/app/settings">
Manage WorkGroup
</NavLink>
)}
<a className="header__dropdown-item" href="https://github.com/BerkeAras/WorkGroup#contact" target="_blank" rel="noreferrer">
Get help
</a>
<NavLink exact className="header__dropdown-item" activeClassName="header__dropdown-item--active" to="/logout">
<NavLink end className={({ isActive }) => (!isActive ? 'header__dropdown-item' : 'header__dropdown-item header__dropdown-item--active')} to="/logout">
Log out
</NavLink>
</div>
Expand Down
70 changes: 70 additions & 0 deletions src/components/KnowledgeBase/KnowledgeBaseFileReader/_code.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
.hljs {
display: block;
overflow-x: auto;
padding: .5em;
color: #0e3560;
background: #f7f7f7;
}
.hljs-comment,
.hljs-quote {
color: #998;
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: #0e3560;
}
.hljs-literal,
.hljs-number,
.hljs-tag .hljs-attr,
.hljs-template-variable,
.hljs-variable {
color: teal;
}
.hljs-doctag,
.hljs-string {
color: #d14;
}
.hljs-section,
.hljs-selector-id,
.hljs-title {
color: #900;
}
.hljs-subst {
font-weight: 400;
}
.hljs-class .hljs-title,
.hljs-type {
color: #458;
}
.hljs-attribute,
.hljs-name,
.hljs-tag {
color: navy;
font-weight: 400;
}
.hljs-link,
.hljs-regexp {
color: #009926;
}
.hljs-bullet,
.hljs-symbol {
color: #990073;
}
.hljs-built_in,
.hljs-builtin-name {
color: #0086b3;
}
.hljs-meta {
color: #999;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.hljs-emphasis {
font-style: italic;
}
6 changes: 5 additions & 1 deletion src/components/KnowledgeBase/KnowledgeBaseFileReader/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { Database, Folder, File, Zap } from 'react-feather'
import { Loader } from 'semantic-ui-react'
import nl2br from 'react-newline-to-break'
import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw'
import rehypeHighlight from 'rehype-highlight'
import PropTypes from 'prop-types'
import './style.scss'

Expand Down Expand Up @@ -140,7 +142,9 @@ function KnowledgeBaseFileReader(props) {
}}
></textarea>
) : (
<ReactMarkdown remarkPlugins={[remarkGfm]}>{fileContent}</ReactMarkdown>
<ReactMarkdown linkTarget="_blank" remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw, rehypeHighlight]}>
{fileContent}
</ReactMarkdown>
)}
</>
) : file.knowledge_base_file_extension == 'txt' ? (
Expand Down
18 changes: 18 additions & 0 deletions src/components/KnowledgeBase/KnowledgeBaseFileReader/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
@import 'code';

.KnowledgeBaseFileReader {
width: 100%;
background: white;
Expand All @@ -20,4 +22,20 @@
&_image {
width: 100%;
}

// Text Styles
p,
ul,
li,
code,
a {
font-size: 18px;
line-height: 25px;
}
a:hover {
color: darken(#4183c4, 20%);
}
h3 {
font-size: 22px;
}
}
12 changes: 8 additions & 4 deletions src/components/KnowledgeBase/KnowledgeBaseSidebar/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'
import { BrowserRouter as Router, Switch, Route, Link, NavLink, useParams } from 'react-router-dom'
import { NavLink } from 'react-router-dom'
import './style.scss'
import { Folder, Home } from 'react-feather'
import PropTypes from 'prop-types'
Expand Down Expand Up @@ -36,7 +36,12 @@ function KnowledgeBaseSidebar(props) {
</div>
) : (
<>
<NavLink exact key="KnowledgeBaseSidebar-home" className="KnowledgeBaseSidebar-item" activeClassName="KnowledgeBaseSidebar-item--active" to="/app/knowledgebase">
<NavLink
end
key="KnowledgeBaseSidebar-home"
className={({ isActive }) => (!isActive ? 'KnowledgeBaseSidebar-item' : 'KnowledgeBaseSidebar-item KnowledgeBaseSidebar-item--active')}
to="/app/knowledgebase"
>
<Home size={18} strokeWidth={2.7} /> Home
</NavLink>
<br />
Expand All @@ -46,9 +51,8 @@ function KnowledgeBaseSidebar(props) {
return (
<NavLink
key={index}
className="KnowledgeBaseSidebar-item"
title={folder.knowledge_base_folder_description}
activeClassName="KnowledgeBaseSidebar-item--active"
className={({ isActive }) => (!isActive ? 'KnowledgeBaseSidebar-item' : 'KnowledgeBaseSidebar-item KnowledgeBaseSidebar-item--active')}
to={'/app/knowledgebase/' + folder.id}
>
<Folder size={18} strokeWidth={2.7} /> {folder.knowledge_base_folder_name}
Expand Down
Loading

0 comments on commit 3be01df

Please sign in to comment.