initial commit
This commit is contained in:
JJ Kasper
42
pages/_app.js
Normal file
42
pages/_app.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import App, { Container } from 'next/app';
|
||||
import store from '../redux/store';
|
||||
import { Provider } from 'react-redux';
|
||||
import { setUser, doLogin } from '../redux/actions/userAct';
|
||||
import '../styles/style.sass';
|
||||
const ssr = typeof window === 'undefined';
|
||||
|
||||
export default class MyApp extends App {
|
||||
static async getInitialProps ({ Component, ctx }) {
|
||||
let user = {};
|
||||
let setup = false;
|
||||
if(ssr) {
|
||||
user = ctx.req.user || {};
|
||||
setup = ctx.req.doSetup || false;
|
||||
}
|
||||
let pageProps = {};
|
||||
if (Component.getInitialProps) {
|
||||
pageProps = await Component.getInitialProps(ctx);
|
||||
}
|
||||
return { Component, pageProps, user, setup };
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const { user, setup } = this.props;
|
||||
setUser({...user, setup});
|
||||
if(!ssr && !user.email) {
|
||||
const { jwt } = window.localStorage;
|
||||
if(jwt) doLogin(null, jwt, true);
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
let { Component, pageProps } = this.props;
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<Container>
|
||||
<Component {...pageProps} />
|
||||
</Container>
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
25
pages/_document.js
Normal file
25
pages/_document.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import Document, { Head, Main, NextScript } from 'next/document';
|
||||
import getUrl from '../util/getUrl';
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
render() {
|
||||
const favicon = getUrl('favicon.ico');
|
||||
return (
|
||||
<html>
|
||||
<Head>
|
||||
<meta charSet='utf-8'/>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'/>
|
||||
<link rel='shortcut icon' href={favicon} type='image/x-icon'/>
|
||||
<link rel='icon' href={favicon} type='image/x-icon'/>
|
||||
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic'/>
|
||||
<link rel='stylesheet' href={getUrl('/_next/static/style.css')} />
|
||||
<title>My Knowledge Base</title>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
pages/edit.js
Normal file
17
pages/edit.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import React, { Component } from 'react';
|
||||
import Page from '../comps/Page';
|
||||
import MngDoc from '../comps/MngDoc';
|
||||
import AddDoc from '../comps/AddDoc';
|
||||
|
||||
class Edit extends Component {
|
||||
render() {
|
||||
const { found, doc } = this.props;
|
||||
if(!found) return (
|
||||
<Page>
|
||||
<h3>Doc not found...</h3>
|
||||
</Page>
|
||||
);
|
||||
return <MngDoc {...{doc}} />;
|
||||
}
|
||||
}
|
||||
export default AddDoc(Edit);
|
||||
145
pages/index.js
Normal file
145
pages/index.js
Normal file
@@ -0,0 +1,145 @@
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import Router from 'next/router';
|
||||
import Paginate from 'react-paginate';
|
||||
import Page from '../comps/Page';
|
||||
import PaddedRow from '../comps/PaddedRow';
|
||||
import Spinner from '../comps/Spinner';
|
||||
import DocItem from '../comps/DocItem';
|
||||
import { $limit, getDocs, buildQ } from '../util/getDocs';
|
||||
import getJwt from '../util/getJwt';
|
||||
import mapUser from '../util/mapUser';
|
||||
|
||||
class Index extends Component {
|
||||
state = {
|
||||
$sort: 'updated:-1',
|
||||
$search: '',
|
||||
page: 1,
|
||||
pending: false,
|
||||
error: null,
|
||||
total: 0,
|
||||
docs: []
|
||||
}
|
||||
static async getInitialProps({ req, query }) {
|
||||
let page = 1, $search = '';
|
||||
if(query) {
|
||||
page = query.page || page;
|
||||
$search = query.search || $search;
|
||||
}
|
||||
const jwt = getJwt(req);
|
||||
if(!jwt) return { total: 0, docs: [] };
|
||||
const q = buildQ({ $search, $skip: page });
|
||||
const data = await getDocs(q, req ? jwt : false);
|
||||
return { ...data, page, $search };
|
||||
}
|
||||
updDocs = (time, doSearch) => {
|
||||
clearTimeout(this.docsTime);
|
||||
this.docsTime = setTimeout(async () => {
|
||||
let { $sort, $search, page } = this.state;
|
||||
if(doSearch) {
|
||||
const query = { search: $search };
|
||||
if(!$search) delete query.search;
|
||||
Router.push({ pathname: '/', query });
|
||||
}
|
||||
this.setState({ error: null });
|
||||
this.docsTime = setTimeout(() => {
|
||||
this.setState({ pending: true });
|
||||
}, 125);
|
||||
|
||||
const q = buildQ({ $search, $sort, $skip: page });
|
||||
const data = await getDocs(q);
|
||||
clearTimeout(this.docsTime);
|
||||
this.setState({ ...data, pending: false });
|
||||
}, time || 275);
|
||||
}
|
||||
updQuery = e => {
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
this.updDocs(0, e.target.id === '$search');
|
||||
}
|
||||
handlePage = ({ selected }) => {
|
||||
const { $search } = this.state;
|
||||
const page = selected + 1;
|
||||
const query = {};
|
||||
this.setState({ page });
|
||||
if(page > 1) query.page = page;
|
||||
if($search) query.search = $search;
|
||||
Router.push({ pathname: '/', query });
|
||||
this.updDocs(1);
|
||||
}
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
let { docs, total, page, $search } = nextProps;
|
||||
if(docs.length !== prevState.docs.length ||
|
||||
page !== prevState.page || $search !== prevState.$search) {
|
||||
return { total, docs, page, $search, pending: false };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
componentDidUpdate(prevProps) {
|
||||
const { user, docs } = this.props;
|
||||
if(prevProps.user.email === user.email) return;
|
||||
if(user.email && docs.length === 0) this.updDocs(1);
|
||||
}
|
||||
render() {
|
||||
const {
|
||||
$sort, $search, pending,
|
||||
error, docs, total, page
|
||||
} = this.state;
|
||||
const pages = Math.ceil(total / $limit);
|
||||
return (
|
||||
<Page>
|
||||
<PaddedRow>
|
||||
<input type='text' placeholder='Search knowledge base...'
|
||||
maxLength={128} value={$search} className='search'
|
||||
id='$search' onChange={this.updQuery}
|
||||
/>
|
||||
</PaddedRow>
|
||||
<PaddedRow>
|
||||
<div className='inline' style={{ width: '100%' }}>
|
||||
<h4 className='noMargin'>Docs</h4>
|
||||
<div className='float-right inline'>
|
||||
<label htmlFor='sort'>Sort: </label>
|
||||
<select id='$sort' value={$sort}
|
||||
onChange={this.updQuery} style={{ width: 150 }}
|
||||
>
|
||||
<option value='updated:-1'>{'Updated (new -> old)'}</option>
|
||||
<option value='updated:1'>{'Updated (old -> new)'}</option>
|
||||
<option value='created:-1'>{'Created (new -> old)'}</option>
|
||||
<option value='created:1'>{'Created (old -> new)'}</option>
|
||||
<option value='dirName:1'>{'Name (A -> Z)'}</option>
|
||||
<option value='dirName:-1'>{'Name (Z -> A)'}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</PaddedRow>
|
||||
<PaddedRow>
|
||||
{docs.length > 0 || error || pending ? null : <p>No docs found...</p>}
|
||||
{!error ? null : <p>{error}</p>}
|
||||
{!pending || error ? null : <Spinner style={{ margin: '25px auto 0' }} />}
|
||||
{docs.length < 1 || pending || error ? null
|
||||
: <div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>
|
||||
Doc <span className='float-right'>Modified</span>
|
||||
</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{docs.map(doc => <DocItem {...doc} key={doc.id} />)}
|
||||
</tbody>
|
||||
</table>
|
||||
{pages < 2 ? null
|
||||
: <Paginate pageCount={pages}
|
||||
containerClassName='paginate'
|
||||
activeClassName='active'
|
||||
onPageChange={this.handlePage}
|
||||
forcePage={page - 1}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</PaddedRow>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default connect(mapUser)(Index);
|
||||
53
pages/k.js
Normal file
53
pages/k.js
Normal file
@@ -0,0 +1,53 @@
|
||||
import { Component } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Router from 'next/router';
|
||||
import fetch from 'isomorphic-unfetch';
|
||||
import Page from '../comps/Page';
|
||||
import Markdown from '../comps/Markdown';
|
||||
import AddDoc from '../comps/AddDoc';
|
||||
import getUrl from '../util/getUrl';
|
||||
import getJwt from '../util/getJwt';
|
||||
|
||||
class k extends Component {
|
||||
delete = async () => {
|
||||
const sure = window.confirm('Are you sure you want to delete this doc? This can not be undone.');
|
||||
if(!sure) return;
|
||||
const del = await fetch(getUrl('docs/' + this.props.id), {
|
||||
headers: { Authorization: getJwt() },
|
||||
method: 'DELETE'
|
||||
}).catch(({ message }) => ({ ok: false, message }));
|
||||
if(del.ok) Router.push('/');
|
||||
else {
|
||||
if(!del.message) {
|
||||
const data = await del.json();
|
||||
del.message = data.message;
|
||||
}
|
||||
window.alert(`Could not delete doc, ${del.message}`);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const { found, id, doc } = this.props;
|
||||
if(!found) return (
|
||||
<Page>
|
||||
<h3>Doc not found...</h3>
|
||||
</Page>
|
||||
);
|
||||
return (
|
||||
<Page>
|
||||
<h5 style={{ marginBottom: '1rem' }}>
|
||||
{doc.dir}{doc.dir.length > 0 ? '/' : ''}{doc.name}{' - '}
|
||||
<Link as={getUrl('edit/' + id)}
|
||||
href={{ pathname: '/edit', query: { id }}}
|
||||
>
|
||||
<a id='edit'>edit</a>
|
||||
</Link>
|
||||
<button className='float-right' onClick={this.delete}
|
||||
style={{ margin: '5px 0 0' }}
|
||||
>Delete</button>
|
||||
</h5>
|
||||
<Markdown source={doc.md} className='Markdown' />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default AddDoc(k);
|
||||
2
pages/new.js
Normal file
2
pages/new.js
Normal file
@@ -0,0 +1,2 @@
|
||||
import MngDoc from '../comps/MngDoc';
|
||||
export default MngDoc;
|
||||
99
pages/settings.js
Normal file
99
pages/settings.js
Normal file
@@ -0,0 +1,99 @@
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import fetch from 'isomorphic-unfetch';
|
||||
import Page from '../comps/Page';
|
||||
import PaddedRow from '../comps/PaddedRow';
|
||||
import Spinner from '../comps/Spinner';
|
||||
import updStateFromId from '../util/updStateFromId';
|
||||
import mapUser from '../util/mapUser';
|
||||
import getUrl from '../util/getUrl';
|
||||
import getJwt from '../util/getJwt';
|
||||
|
||||
class Settings extends Component {
|
||||
state = {
|
||||
pending: false,
|
||||
passErr: null,
|
||||
curPass: '',
|
||||
newPass: '',
|
||||
confPass: ''
|
||||
}
|
||||
updVal = updStateFromId.bind(this);
|
||||
submit = async e => {
|
||||
e.preventDefault();
|
||||
const { pending, curPass, newPass, confPass } = this.state;
|
||||
const { email, _id } = this.props.user;
|
||||
if(pending) return;
|
||||
const doErr = passErr => this.setState({ pending: false, passErr });
|
||||
const vals = {
|
||||
'Current password': curPass,
|
||||
'New password': newPass,
|
||||
'Confirm new password': confPass
|
||||
};
|
||||
const keys = Object.keys(vals);
|
||||
for(let i = 0; i < keys.length; i++) {
|
||||
let key = keys[i], val = vals[key];
|
||||
if(val.length === 0) return doErr(`${key} is required`);
|
||||
}
|
||||
if(newPass !== confPass) return doErr('New passwords don\'t match');
|
||||
|
||||
this.setState({ passErr: null, pending: true });
|
||||
const updRes = await fetch(getUrl('users/' + _id), {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: getJwt() },
|
||||
body: JSON.stringify({ email, password: curPass, newPassword: newPass })
|
||||
}).catch(doErr);
|
||||
if(updRes.ok) {
|
||||
this.setState({
|
||||
curPass: '', newPass: '', confPass: '',
|
||||
passErr: 'Password updated successfully',
|
||||
pending: false
|
||||
});
|
||||
} else {
|
||||
let message = 'failed to update password';
|
||||
try {
|
||||
const data = await updRes.json();
|
||||
message = data.message || message;
|
||||
} catch (err) { doErr(err.message); }
|
||||
doErr(message);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const {
|
||||
pending, passErr, curPass,
|
||||
newPass, confPass
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<PaddedRow amount={25}>
|
||||
<h3>Account settings</h3>
|
||||
<hr />
|
||||
<form noValidate style={{ padding: '0 0 45px' }}>
|
||||
<h4>Change password</h4>
|
||||
<fieldset>
|
||||
<label htmlFor='curPass'>Current Password</label>
|
||||
<input type='password' id='curPass' onChange={this.updVal}
|
||||
placeholder='Current super secret password...' value={curPass}
|
||||
/>
|
||||
<label htmlFor='newPass'>New Password</label>
|
||||
<input type='password' id='newPass' onChange={this.updVal}
|
||||
placeholder='New super secret password...' value={newPass}
|
||||
/>
|
||||
<label htmlFor='confPass'>Confirm New Password</label>
|
||||
<input type='password' id='confPass' onChange={this.updVal}
|
||||
placeholder='Confirm new super secret password...' value={confPass}
|
||||
/>
|
||||
</fieldset>
|
||||
<button onClick={this.submit}
|
||||
className={'float-right' + (pending ? ' disabled' : '')}
|
||||
>
|
||||
{pending ? <Spinner /> : 'Submit'}
|
||||
</button>
|
||||
{!passErr ? null : <p>{passErr}</p>}
|
||||
</form>
|
||||
</PaddedRow>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default connect(mapUser)(Settings);
|
||||
Reference in New Issue
Block a user