forked from Gitlink/forgeplus-react
516 lines
13 KiB
JavaScript
516 lines
13 KiB
JavaScript
import React, { Component } from 'react';
|
||
import './App.css';
|
||
import { ConfigProvider } from 'antd'
|
||
import zhCN from 'antd/lib/locale-provider/zh_CN';
|
||
import {
|
||
// BrowserRouter as Router,
|
||
Route,
|
||
Switch
|
||
} from 'react-router-dom';
|
||
import axios from 'axios';
|
||
import LoginDialog from './modules/login/LoginDialog';
|
||
import 'babel-polyfill';
|
||
import Loading from './Loading'
|
||
|
||
import Loadable from 'react-loadable';
|
||
import marked from './common/marked';
|
||
import moment from 'moment'
|
||
|
||
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
|
||
import SiderBar from './forge/Component/SiderBar'
|
||
|
||
import { SnackbarHOC } from 'educoder';
|
||
import { initAxiosInterceptors } from './AppConfig'
|
||
import { Provider } from 'react-redux';
|
||
import configureStore from './redux/stores/configureStore';
|
||
const store = configureStore();
|
||
window.marked = marked;
|
||
const theme = createMuiTheme({
|
||
palette: {
|
||
primary: {
|
||
main: '#4CACFF',
|
||
contrastText: 'rgba(255, 255, 255, 0.87)'
|
||
},
|
||
secondary: { main: '#4CACFF' }, // #11cb5f This is just green.A700 as hex.
|
||
},
|
||
});
|
||
//forge项目
|
||
const Projects = Loadable({
|
||
loader: () => import('./forge/Index'),
|
||
loading: Loading,
|
||
})
|
||
// forge项目详情
|
||
const ProjectDetail = Loadable({
|
||
loader: () => import("./forge/Main/DetailAdaptor"),
|
||
loading: Loading,
|
||
});
|
||
//forge安全设置
|
||
const Security = Loadable({
|
||
loader: () => import('./forge/SecuritySetting/Index'),
|
||
loading: Loading,
|
||
})
|
||
//forge项目-devOps详情
|
||
const OpsDetail = Loadable({
|
||
loader: () => import('./forge/DevOps/opsDetail'),
|
||
loading: Loading,
|
||
})
|
||
//403页面
|
||
const Shixunauthority = Loadable({
|
||
loader: () => import('./modules/403/Shixunauthority'),
|
||
loading: Loading,
|
||
})
|
||
//404页面
|
||
const Shixunnopage = Loadable({
|
||
loader: () => import('./modules/404/Shixunnopage'),
|
||
loading: Loading,
|
||
})
|
||
|
||
//500页面
|
||
const http500 = Loadable({
|
||
loader: () => import('./modules/500/http500'),
|
||
loading: Loading,
|
||
})
|
||
const InfosIndex = Loadable({
|
||
loader: () => import('./forge/users/Index'),
|
||
loading: Loading,
|
||
})
|
||
// 组织
|
||
const OrganizeIndex = Loadable({
|
||
loader: () => import('./forge/Team/Index'),
|
||
loading: Loading,
|
||
})
|
||
const EducoderLogin = Loadable({
|
||
loader: () => import('./modules/login/EducoderLogin'),
|
||
loading: Loading,
|
||
})
|
||
const Search = Loadable({
|
||
loader: () => import('./modules/search/'),
|
||
loading: Loading,
|
||
})
|
||
const WikiPreview = Loadable({
|
||
loader: () => import('./forge/Wiki/Preview'),
|
||
loading: Loading,
|
||
})
|
||
|
||
const ProjectIndex = Loadable({
|
||
loader: () => import("./forge/Index"),
|
||
loading: Loading,
|
||
});
|
||
|
||
const CreateMerge = Loadable({
|
||
loader: () => import('./forge/Merge/NewMerge'),
|
||
loading: Loading,
|
||
})
|
||
|
||
// 此处仅维护前端可能的一级路由，不用进行项目或者组织判断的字段。
|
||
const keyWord = ["explore", "settings", "setting", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search", "organize"];
|
||
|
||
class App extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
Addcoursestype: false,
|
||
Addcoursestypes: false,
|
||
mydisplay: false,
|
||
occupation: 0,
|
||
mygetHelmetapi: null,
|
||
pathType: null,
|
||
pathName: null,
|
||
}
|
||
}
|
||
|
||
UNSAFE_componentWillMount() {
|
||
initAxiosInterceptors(this.props);
|
||
let pathname = window.location.pathname ? window.location.pathname.split('/')[1] : '';
|
||
pathname && this.getPathnameType(pathname);
|
||
|
||
// 添加路由监听，决定组织还是个人
|
||
this.unlisten = this.props.history.listen((location) => {
|
||
let newPathname = location.pathname.split('/')[1];
|
||
if (this.state.pathName !== newPathname) {
|
||
// this.setState({ pathType: '' });
|
||
newPathname && this.getPathnameType(newPathname);
|
||
}
|
||
});
|
||
}
|
||
|
||
shouldComponentUpdate(nextProps, nextState) {
|
||
// (!keyWord.includes(this.props.location.pathname.split('/')[1])) &&
|
||
if (nextProps.location.pathname.split('/')[1] !== this.props.location.pathname.split('/')[1] && nextState.pathType === this.state.pathType) {
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
|
||
getPathnameType = (pathname) => {
|
||
if (!keyWord.includes(pathname)) {
|
||
let url = `/owners/${pathname}.json`;
|
||
axios.get(url).then((response) => {
|
||
if (response && response.status === 200) {
|
||
this.setState({
|
||
pathType: response.data.type || '404',
|
||
pathName: pathname,
|
||
})
|
||
}
|
||
});
|
||
}else{
|
||
this.setState({
|
||
pathType: pathname,
|
||
pathName: pathname,
|
||
});
|
||
}
|
||
}
|
||
|
||
HideAddcoursestypess = (i) => {
|
||
this.setState({
|
||
Addcoursestype: false,
|
||
Addcoursestypes: false,
|
||
mydisplay: true,
|
||
occupation: i,
|
||
})
|
||
};
|
||
hideAddcoursestypes = () => {
|
||
this.setState({
|
||
Addcoursestypes: false
|
||
})
|
||
};
|
||
|
||
componentDidMount() {
|
||
document.title = "loading...";
|
||
|
||
this.getAppdata();
|
||
|
||
window.addEventListener('error', (event) => {
|
||
const msg = `${event.type}: ${event.message}`;
|
||
});
|
||
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this.unlisten && this.unlisten(); // 执行解绑
|
||
}
|
||
|
||
//修改登录方法
|
||
Modifyloginvalue = () => {
|
||
this.setState({
|
||
isRender: false,
|
||
})
|
||
};
|
||
|
||
//获取数据为空的时候
|
||
gettablogourlnull = () => {
|
||
this.setState({
|
||
mygetHelmetapi: undefined
|
||
});
|
||
document.title = "Forge";
|
||
var link = document.createElement('link'),
|
||
oldLink = document.getElementById('dynamic-favicon');
|
||
link.id = 'dynamic-favicon';
|
||
link.rel = 'shortcut icon';
|
||
link.href = "/react/build/./favicon.ico";
|
||
if (oldLink) {
|
||
document.head.removeChild(oldLink);
|
||
}
|
||
document.head.appendChild(link);
|
||
};
|
||
|
||
//获取数据的时候
|
||
gettablogourldata = (response) => {
|
||
document.title = response.data.setting.name;
|
||
var link = document.createElement('link'),
|
||
oldLink = document.getElementById('dynamic-favicon');
|
||
link.id = 'dynamic-favicon';
|
||
link.rel = 'shortcut icon';
|
||
link.href = '/' + response.data.setting.tab_logo_url;
|
||
if (oldLink) {
|
||
document.head.removeChild(oldLink);
|
||
}
|
||
document.head.appendChild(link);
|
||
}
|
||
//获取当前定制信息
|
||
getAppdata = () => {
|
||
let url = "/setting.json";
|
||
axios.get(url).then((response) => {
|
||
if (response) {
|
||
if (response.data) {
|
||
this.setState({
|
||
mygetHelmetapi: response.data.setting
|
||
});
|
||
//存储配置到游览器
|
||
localStorage.setItem('chromesetting', JSON.stringify(response.data.setting));
|
||
localStorage.setItem('chromesettingresponse', JSON.stringify(response));
|
||
try {
|
||
if (response.data.setting.tab_logo_url) {
|
||
this.gettablogourldata(response);
|
||
} else {
|
||
this.gettablogourlnull();
|
||
}
|
||
} catch (e) {
|
||
this.gettablogourlnull();
|
||
}
|
||
} else {
|
||
this.gettablogourlnull();
|
||
}
|
||
} else {
|
||
this.gettablogourlnull();
|
||
}
|
||
}).catch((error) => {
|
||
this.gettablogourlnull();
|
||
});
|
||
};
|
||
|
||
render() {
|
||
const { mygetHelmetapi, pathType} = this.state;
|
||
let personal = mygetHelmetapi && mygetHelmetapi.personal;
|
||
return (
|
||
<Provider store={store}>
|
||
<ConfigProvider locale={zhCN}>
|
||
<MuiThemeProvider theme={theme}>
|
||
<LoginDialog {...this.props} {...this.state} Modifyloginvalue={() => this.Modifyloginvalue()}></LoginDialog>
|
||
<SiderBar />
|
||
{/* <Router> */}
|
||
<Switch>
|
||
{/* wiki预览 */}
|
||
<Route path="/:owner/:projectsId/wiki/preview/:projectName/:projectId" render={
|
||
(props) => {
|
||
return (<WikiPreview {...this.props} {...props} {...this.state} />)
|
||
}
|
||
} />
|
||
|
||
{/* 项目PR */}
|
||
<Route path="/:owner/:projectsId/pulls/new"
|
||
render={
|
||
(props) => (<ProjectDetail {...this.props} {...props} {...this.state} />)
|
||
}
|
||
></Route>
|
||
|
||
{/*项目*/}
|
||
<Route
|
||
path={"/:owner/:projectId/devops/:opsId/detail"}
|
||
render={
|
||
(props) => {
|
||
return (<OpsDetail {...this.props} {...props} {...this.state} />)
|
||
}
|
||
}>
|
||
</Route>
|
||
<Route
|
||
path={"/settings"}
|
||
render={
|
||
(props) => {
|
||
return (<Security {...this.props} {...props} {...this.state} />)
|
||
}
|
||
}>
|
||
</Route>
|
||
|
||
<Route
|
||
path="/register"
|
||
render={
|
||
(props) => {
|
||
return (<EducoderLogin {...this.props} {...props} {...this.state} />)
|
||
}
|
||
}
|
||
/>
|
||
{/*403*/}
|
||
<Route path="/403" component={Shixunauthority} />
|
||
|
||
<Route path="/500" component={http500} />
|
||
|
||
{/*404*/}
|
||
<Route path="/nopage" component={Shixunnopage} />
|
||
|
||
{/* 查询 */}
|
||
<Route path="/search" component={Search} />
|
||
|
||
<Route exact path="/explore"
|
||
render={
|
||
(props) => (
|
||
<ProjectIndex {...this.props} {...props} />
|
||
)
|
||
}
|
||
/>
|
||
|
||
|
||
{/* 组织 */}
|
||
<Route path={"/organize"}
|
||
render={
|
||
(props) => {
|
||
return (<OrganizeIndex {...props} {...this.props} {...this.state} />)
|
||
}
|
||
}>
|
||
</Route>
|
||
|
||
{/*新建项目等*/}
|
||
<Route
|
||
path={"/projects"}
|
||
render={
|
||
(props) => {
|
||
return (<Projects {...this.props} {...props} {...this.state} />)
|
||
}
|
||
}>
|
||
</Route>
|
||
|
||
{/* 判断为用户/组织，并进入对应页面 */}
|
||
{
|
||
pathType === 'User' ?
|
||
<Route exact path="/:username"
|
||
render={
|
||
(props) => {
|
||
return (<InfosIndex {...this.props} {...this.state} />)
|
||
}
|
||
}
|
||
/> : pathType === 'Organization' ? <Route path={"/:OIdentifier"}
|
||
render={
|
||
(props) => {
|
||
return (<OrganizeIndex {...props} {...this.props} {...this.state} />)
|
||
}
|
||
}>
|
||
</Route> : pathType === '404' ? <Route component={Shixunnopage} />:
|
||
<Route exact path="/"
|
||
render={
|
||
(props) => (
|
||
personal && personal.length > 0 ?
|
||
<InfosIndex {...this.props} {...props} />
|
||
:
|
||
<ProjectIndex {...this.props} {...props} />
|
||
)
|
||
}
|
||
/>
|
||
// <Route path="/" component={Loading} />
|
||
// <Route path="/" component={Shixunnopage} />
|
||
}
|
||
|
||
|
||
|
||
{/* 个人主页 */}
|
||
<Route path="/:username"
|
||
render={
|
||
(props) => {
|
||
return (<InfosIndex {...this.props} {...this.state} />)
|
||
}
|
||
}></Route>
|
||
|
||
|
||
<Route component={Shixunnopage} />
|
||
</Switch>
|
||
{/* </Router> */}
|
||
</MuiThemeProvider>
|
||
</ConfigProvider>
|
||
</Provider>
|
||
);
|
||
}
|
||
}
|
||
|
||
// moment国际化，设置为中文
|
||
moment.defineLocale('zh-cn', {
|
||
months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
|
||
monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
|
||
weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
|
||
weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
|
||
weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
|
||
longDateFormat: {
|
||
LT: 'Ah点mm分',
|
||
LTS: 'Ah点m分s秒',
|
||
L: 'YYYY-MM-DD',
|
||
LL: 'YYYY年MMMD日',
|
||
LLL: 'YYYY年MMMD日Ah点mm分',
|
||
LLLL: 'YYYY年MMMD日ddddAh点mm分',
|
||
l: 'YYYY-MM-DD',
|
||
ll: 'YYYY年MMMD日',
|
||
lll: 'YYYY年MMMD日Ah点mm分',
|
||
llll: 'YYYY年MMMD日ddddAh点mm分'
|
||
},
|
||
meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
|
||
meridiemHour: function (hour, meridiem) {
|
||
if (hour === 12) {
|
||
hour = 0;
|
||
}
|
||
if (meridiem === '凌晨' || meridiem === '早上' ||
|
||
meridiem === '上午') {
|
||
return hour;
|
||
} else if (meridiem === '下午' || meridiem === '晚上') {
|
||
return hour + 12;
|
||
} else {
|
||
// '中午'
|
||
return hour >= 11 ? hour : hour + 12;
|
||
}
|
||
},
|
||
meridiem: function (hour, minute, isLower) {
|
||
var hm = hour * 100 + minute;
|
||
if (hm < 600) {
|
||
return '凌晨';
|
||
} else if (hm < 900) {
|
||
return '早上';
|
||
} else if (hm < 1130) {
|
||
return '上午';
|
||
} else if (hm < 1230) {
|
||
return '中午';
|
||
} else if (hm < 1800) {
|
||
return '下午';
|
||
} else {
|
||
return '晚上';
|
||
}
|
||
},
|
||
calendar: {
|
||
sameDay: function () {
|
||
return this.minutes() === 0 ? '[今天]Ah[点整]' : '[今天]LT';
|
||
},
|
||
nextDay: function () {
|
||
return this.minutes() === 0 ? '[明天]Ah[点整]' : '[明天]LT';
|
||
},
|
||
lastDay: function () {
|
||
return this.minutes() === 0 ? '[昨天]Ah[点整]' : '[昨天]LT';
|
||
},
|
||
nextWeek: function () {
|
||
var startOfWeek, prefix;
|
||
startOfWeek = moment().startOf('week');
|
||
prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';
|
||
return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';
|
||
},
|
||
lastWeek: function () {
|
||
var startOfWeek, prefix;
|
||
startOfWeek = moment().startOf('week');
|
||
prefix = this.unix() < startOfWeek.unix() ? '[上]' : '[本]';
|
||
return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';
|
||
},
|
||
sameElse: 'LL'
|
||
},
|
||
ordinalParse: /\d{1,2}(日|月|周)/,
|
||
ordinal: function (number, period) {
|
||
switch (period) {
|
||
case 'd':
|
||
case 'D':
|
||
case 'DDD':
|
||
return number + '日';
|
||
case 'M':
|
||
return number + '月';
|
||
case 'w':
|
||
case 'W':
|
||
return number + '周';
|
||
default:
|
||
return number;
|
||
}
|
||
},
|
||
relativeTime: {
|
||
future: '%s内',
|
||
past: '%s前',
|
||
s: '几秒',
|
||
m: '1分钟',
|
||
mm: '%d分钟',
|
||
h: '1小时',
|
||
hh: '%d小时',
|
||
d: '1天',
|
||
dd: '%d天',
|
||
M: '1个月',
|
||
MM: '%d个月',
|
||
y: '1年',
|
||
yy: '%d年'
|
||
},
|
||
week: {
|
||
// GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
|
||
dow: 1, // Monday is the first day of the week.
|
||
doy: 4 // The week that contains Jan 4th is the first week of the year.
|
||
}
|
||
});
|
||
export default SnackbarHOC()(App);
|