mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

App, Routes and Sidebar components are migrated to functional ones

This commit is contained in:
stz184 2020-11-16 23:26:38 +02:00
parent 24ea00d9ec
commit 18997a0d3e
3 changed files with 72 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ui/src/App.js
View File

@ -1,4 +1,4 @@
import React, { Component } from 'react' import React from 'react'
import { createGlobalStyle } from 'styled-components' import { createGlobalStyle } from 'styled-components'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import Routes from './components/routes/Routes' import Routes from './components/routes/Routes'
@ -23,22 +23,20 @@ const GlobalStyle = createGlobalStyle`
import 'semantic-ui-css/semantic.min.css' import 'semantic-ui-css/semantic.min.css'
class App extends Component { const App = () => {
render() { return (
return ( <>
<> <Helmet>
<Helmet> <meta
<meta name="description"
name="description" content="Simple and User-friendly Photo Gallery for Personal Servers"
content="Simple and User-friendly Photo Gallery for Personal Servers" />
/> </Helmet>
</Helmet> <GlobalStyle />
<GlobalStyle /> <Routes />
<Routes /> <Messages />
<Messages /> </>
</> )
)
}
} }
export default App export default App

60
ui/src/components/routes/Routes.js
View File

@ -24,37 +24,35 @@ const SettingsPage = React.lazy(() =>
import('../../Pages/SettingsPage/SettingsPage') import('../../Pages/SettingsPage/SettingsPage')
) )
class Routes extends React.Component { const Routes = () => {
render() { return (
return ( <React.Suspense
<React.Suspense fallback={
fallback={ <Layout>
<Layout> <Loader active>Loading page</Loader>
<Loader active>Loading page</Loader> </Layout>
</Layout> }
} >
> <Switch>
<Switch> <Route path="/login" component={LoginPage} />
<Route path="/login" component={LoginPage} /> <Route path="/logout">
<Route path="/logout"> {() => {
{() => { clearTokenCookie()
clearTokenCookie() location.href = '/'
location.href = '/' }}
}} </Route>
</Route> <Route path="/initialSetup" component={InitialSetupPage} />
<Route path="/initialSetup" component={InitialSetupPage} /> <Route path="/share" component={SharePage} />
<Route path="/share" component={SharePage} /> <AuthorizedRoute exact path="/albums" component={AlbumsPage} />
<AuthorizedRoute exact path="/albums" component={AlbumsPage} /> <AuthorizedRoute path="/album/:id/:subPage?" component={AlbumPage} />
<AuthorizedRoute path="/album/:id/:subPage?" component={AlbumPage} /> <AuthorizedRoute path="/photos/:subPage?" component={PhotosPage} />
<AuthorizedRoute path="/photos/:subPage?" component={PhotosPage} /> <AuthorizedRoute path="/places" component={PlacesPage} />
<AuthorizedRoute path="/places" component={PlacesPage} /> <AuthorizedRoute admin path="/settings" component={SettingsPage} />
<AuthorizedRoute admin path="/settings" component={SettingsPage} /> <Route path="/" exact render={() => <Redirect to="/photos" />} />
<Route path="/" exact render={() => <Redirect to="/photos" />} /> <Route render={() => <div>Page not found</div>} />
<Route render={() => <div>Page not found</div>} /> </Switch>
</Switch> </React.Suspense>
</React.Suspense> )
)
}
} }
export default Routes export default Routes

62
ui/src/components/sidebar/Sidebar.js
View File

@ -1,4 +1,4 @@
import React, { createContext } from 'react' import React, { createContext, useState } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import styled from 'styled-components' import styled from 'styled-components'
import { Icon } from 'semantic-ui-react' import { Icon } from 'semantic-ui-react'
@ -41,42 +41,36 @@ const SidebarDismissButton = styled(Icon)`
export const SidebarContext = createContext() export const SidebarContext = createContext()
SidebarContext.displayName = 'SidebarContext' SidebarContext.displayName = 'SidebarContext'
class Sidebar extends React.Component { const Sidebar = ({ children }) => {
constructor(props) { const [state, setState] = useState({
super(props) content: null,
})
this.state = { const update = content => {
content: null, setState({ content })
}
this.update = content => {
this.setState({ content })
}
} }
render() { return (
return ( <SidebarContext.Provider
<SidebarContext.Provider value={{ updateSidebar: update, content: state.content }}
value={{ updateSidebar: this.update, content: this.state.content }} >
> {children}
{this.props.children} <SidebarContext.Consumer>
<SidebarContext.Consumer> {value => (
{value => ( <SidebarContainer highlighted={value.content != null}>
<SidebarContainer highlighted={value.content != null}> {value.content}
{value.content} <SidebarDismissButton
<SidebarDismissButton name="angle double right"
name="angle double right" size="big"
size="big" link
link onClick={() => setState({ content: null })}
onClick={() => this.setState({ content: null })} />
/> <div style={{ height: 100 }}></div>
<div style={{ height: 100 }}></div> </SidebarContainer>
</SidebarContainer> )}
)} </SidebarContext.Consumer>
</SidebarContext.Consumer> </SidebarContext.Provider>
</SidebarContext.Provider> )
)
}
} }
Sidebar.propTypes = { Sidebar.propTypes = {