forgeplus-react/src/App.js

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 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 keyWord = ["explore", "settings", "setting", "CCF", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search"];

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} />)
								}
							} />

							{/*项目*/}
							<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 path="/" 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="/: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);