MyFavMirrors/minio
1
0
Fork 0
mirror of https://github.com/minio/minio.git synced 2025-11-20 18:06:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

upgrading react and refactoring components (#5409) (#5444)

Browse Source 
- upgraded react from v16.2.0
- upgraded react-router to v4.2.0 and re-writen the routes
- using prettier to format the code
- added jest to unit test components/reducers/selectors

This provides a skeleton to start of with. Only basic unit test
cases are added, remaining needs to be added.

In terms of functionality, it provides login, listing and searching
buckets. Remaining functionalities will be added in upcoming patches.
This commit is contained in:
Kanagaraj M
2018-02-01 09:23:11 +05:30
committed by Harshavardhana
parent 76be54551f
commit 9ab6a8035f
41 changed files with 2896 additions and 2978 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
browser/app/index.js
View File

@@ -1,5 +1,5 @@
/*
* Minio Cloud Storage (C) 2016 Minio, Inc.
* Minio Cloud Storage (C) 2016, 2018 Minio, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -13,106 +13,31 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import 'babel-polyfill'
import './less/main.less'
import "babel-polyfill"
import "./less/main.less"
import "font-awesome/css/font-awesome.css"
import "material-design-iconic-font/dist/css/material-design-iconic-font.min.css"
import React from 'react'
import ReactDOM from 'react-dom'
import thunkMiddleware from 'redux-thunk'
import createStore from 'redux/lib/createStore'
import applyMiddleware from 'redux/lib/applyMiddleware'
import React from "react"
import ReactDOM from "react-dom"
import { BrowserRouter, Route } from "react-router-dom"
import { Provider } from "react-redux"
import Route from 'react-router/lib/Route'
import Router from 'react-router/lib/Router'
import browserHistory from 'react-router/lib/browserHistory'
import IndexRoute from 'react-router/lib/IndexRoute'
import { minioBrowserPrefix } from "./js/constants"
import configureStore from "./js/store/configure-store"
import hideLoader from "./js/loader"
import App from "./js/components/App"
import Provider from 'react-redux/lib/components/Provider'
import connect from 'react-redux/lib/components/connect'
const store = configureStore()
import Moment from 'moment'
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<Route path={minioBrowserPrefix} component={App} />
</BrowserRouter>
</Provider>,
document.getElementById("root")
)
import { minioBrowserPrefix } from './js/constants.js'
import * as actions from './js/actions.js'
import reducer from './js/reducers.js'
import _Login from './js/components/Login.js'
import _Browse from './js/components/Browse.js'
import fontAwesome from 'font-awesome/css/font-awesome.css'
import MaterialDesignIconicFonts from 'material-design-iconic-font/dist/css/material-design-iconic-font.min.css'
import Web from './js/web'
window.Web = Web
import storage from 'local-storage-fallback'
const store = applyMiddleware(thunkMiddleware)(createStore)(reducer)
const Browse = connect(state => state)(_Browse)
const Login = connect(state => state)(_Login)
let web = new Web(`${window.location.protocol}//${window.location.host}${minioBrowserPrefix}/webrpc`, store.dispatch)
window.web = web
store.dispatch(actions.setWeb(web))
function authNeeded(nextState, replace, cb) {
if (web.LoggedIn()) {
return cb()
}
if (location.pathname === minioBrowserPrefix || location.pathname === minioBrowserPrefix + '/') {
replace(`${minioBrowserPrefix}/login`)
}
return cb()
}
function authNotNeeded(nextState, replace) {
if (web.LoggedIn()) {
replace(`${minioBrowserPrefix}`)
}
}
const App = (props) => {
return <div>
{ props.children }
</div>
}
ReactDOM.render((
<Provider store={ store } web={ web }>
<Router history={ browserHistory }>
<Route path='/' component={ App }>
<Route path={ minioBrowserPrefix } component={ App }>
<IndexRoute component={ Browse } onEnter={ authNeeded } />
<Route path='login' component={ Login } onEnter={ authNotNeeded } />
<Route path=':bucket' component={ Browse } onEnter={ authNeeded } />
<Route path=':bucket/*' component={ Browse } onEnter={ authNeeded } />
</Route>
</Route>
</Router>
</Provider>
), document.getElementById('root'))
//Page loader
let delay = [0, 400]
let i = 0
function handleLoader() {
if (i < 2) {
setTimeout(function() {
document.querySelector('.page-load').classList.add('pl-' + i)
i++
handleLoader()
}, delay[i])
}
}
handleLoader()
if (storage.getItem('newlyUpdated')) {
store.dispatch(actions.showAlert({
type: 'success',
message: "Updated to the latest UI Version."
}))
storage.removeItem('newlyUpdated')
}
hideLoader()