Commit 920e5cd5 authored by Jure's avatar Jure

feat: upgrade some components to graphql

parent 37cd940e
{
"presets": [
"env",
"react",
"stage-2"
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions"
]
}
......@@ -4,7 +4,7 @@ import React from 'react'
import ReactDOM from 'react-dom'
import { hot } from 'react-hot-loader'
import { configureStore, Root } from 'pubsweet-client'
import { Root } from 'pubsweet-client'
import theme from '@pubsweet/coko-theme'
......@@ -12,12 +12,11 @@ import createHistory from 'history/createBrowserHistory'
import routes from './routes'
const history = createHistory()
const store = configureStore(history, {})
const rootEl = document.getElementById('root')
ReactDOM.render(
<Root history={history} routes={routes} store={store} theme={theme} />,
<Root history={history} routes={routes} theme={theme} />,
rootEl,
)
......
import React from 'react'
import PropTypes from 'prop-types'
import Navigation from './Navigation/Navigation'
import ConnectedNavigation from './Navigation/ConnectedNavigation'
const App = ({ children, ...props }) => (
<div>
<Navigation />
<ConnectedNavigation />
{children}
</div>
)
......
import React from 'react'
import { get } from 'lodash'
import { adopt } from 'react-adopt'
import CurrentUserQuery from './queries/currentUser'
import Navigation from './Navigation'
const mapper = { CurrentUserQuery }
const mapProps = args => ({
currentUser: get(args.CurrentUserQuery, 'data.currentUser'),
loading: args.CurrentUserQuery.loading,
client: args.CurrentUserQuery.client,
})
const Composed = adopt(mapper, mapProps)
const ConnectedNavigation = props => (
<Composed>
{({ loading, currentUser, client }) => {
if (loading) return 'Loading...'
return (
<Navigation
client={client}
currentUser={currentUser}
loading={loading}
{...props}
/>
)
}}
</Composed>
)
export default ConnectedNavigation
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { compose, withProps } from 'recompose'
import { AppBar, Action } from '@pubsweet/ui'
import actions from 'pubsweet-client/src/actions'
import { Action, AppBar } from '@pubsweet/ui'
const Navigation = ({ logoutUser, currentUser, client }) => {
const links = [<Action to="/posts">Posts</Action>]
const Navigation = ({ logoutUser, currentUser }) => (
<AppBar
brand={<img alt="pubsweet" src="/assets/pubsweet.jpg" />}
navLinkComponents={[<Action to="/helloworld">Hello World</Action>]}
onLogoutClick={logoutUser}
user={currentUser}
/>
)
if (currentUser === null) return null
if (currentUser && currentUser.admin) {
links.push(
<Action to="/users">Users</Action>,
<Action to="/teams">Teams</Action>,
)
}
return (
<div>
<AppBar
brand={<img alt="pubsweet" src="/assets/pubsweet.jpg" />}
navLinkComponents={links}
onLogoutClick={() => logoutUser(client)}
user={currentUser}
/>
</div>
)
}
Navigation.propTypes = {
client: PropTypes.any, // eslint-disable-line
currentUser: PropTypes.any, // eslint-disable-line
history: PropTypes.any.isRequired, // eslint-disable-line
logoutUser: PropTypes.func.isRequired,
// eslint-disable-next-line react/require-default-props
currentUser: PropTypes.shape({
username: PropTypes.string,
admin: PropTypes.bool,
}),
}
export default connect(
state => ({
currentUser: state.currentUser.user,
}),
{ logoutUser: actions.logoutUser },
export default compose(
withRouter,
withProps(props => ({
logoutUser: client => {
client.cache.reset()
localStorage.removeItem('token')
props.history.push('/login')
},
})),
)(Navigation)
import React from 'react'
import PropTypes from 'prop-types'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'
const CURRENT_USER = gql`
query CurrentUser {
currentUser {
id
username
admin
}
}
`
const CurrentUserQuery = props => {
const { render } = props
return (
<Query fetchPolicy="network-only" query={CURRENT_USER}>
{render}
</Query>
)
}
CurrentUserQuery.propTypes = {
render: PropTypes.any, // eslint-disable-line
}
export default CurrentUserQuery
......@@ -2,13 +2,17 @@ import React from 'react'
import { Route, Switch } from 'react-router-dom'
// Authentication
import Login from 'pubsweet-component-login/LoginContainer'
import Signup from 'pubsweet-component-signup/SignupContainer'
import Login from 'pubsweet-component-login'
import Signup from 'pubsweet-component-signup'
import PasswordReset from 'pubsweet-component-password-reset-frontend/PasswordReset'
import AuthenticatedComponent from 'pubsweet-client/src/components/AuthenticatedComponent'
import App from './components/App'
import Posts from './components/Posts'
import Editor from './components/CollabEditor/src/App.tsx'
const HelloWorld = () => (
<AuthenticatedComponent>
<div>Hello World!</div>
......@@ -19,6 +23,8 @@ export default (
<App>
<Switch>
<Route component={HelloWorld} path="/dashboard" />
<Route component={Posts} path="/posts" />
<Route component={Editor} path="/editor" />
<Route component={Login} path="/login" />
<Route component={Signup} path="/signup" />
<Route component={PasswordReset} path="/password-reset" />
......
......@@ -10,38 +10,55 @@
],
"main": "app.js",
"dependencies": {
"@atlaskit/avatar": "^15.0.1",
"@atlaskit/avatar-group": "^3.0.1",
"@atlaskit/editor-common": "36.0.0",
"@atlaskit/editor-core": "107.6.0",
"@atlaskit/media-core": "^29.1.0",
"@pubsweet/coko-theme": "^5.0.5",
"@pubsweet/db-manager": "2.2.0",
"@pubsweet/default-theme": "4.0.5",
"@pubsweet/logger": "^0.2.10",
"@pubsweet/model-blog": "^0.0.3",
"@pubsweet/model-blogpost": "^0.0.3",
"@pubsweet/model-blog": "^0.0.10",
"@pubsweet/model-blogpost": "^0.0.10",
"@pubsweet/model-team": "^1.0.2",
"@pubsweet/model-user": "^3.0.0",
"@pubsweet/models": "0.1.2",
"@pubsweet/ui": "^9.1.1",
"@types/styled-components": "4.1.10",
"authsome": "^0.1.0",
"pubsweet": "^3.1.1",
"pubsweet-client": "^8.0.2",
"pubsweet-component-login": "^1.2.6",
"pubsweet": "^4.0.0",
"pubsweet-client": "^9.1.0",
"pubsweet-component-login": "^2.1.1",
"pubsweet-component-password-reset-backend": "^2.0.1",
"pubsweet-component-password-reset-frontend": "^3.0.5",
"pubsweet-component-signup": "^1.0.39",
"pubsweet-server": "12.0.1",
"react-router-redux": "next"
"pubsweet-server": "^13.2.0",
"react-adopt": "^0.6.0",
"react-intl": "^2.8.0",
"react-router-redux": "next",
"socket.io": "^2.2.0",
"socket.io-client": "^2.2.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@types/react-intl": "^2.3.17",
"app-module-path": "^2.2.0",
"babel-core": "^6.14.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.14.0",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.0",
"babel-preset-es2015-native-modules": "^6.9.4",
"babel-preset-minify": "^0.3.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-2": "^6.13.0",
"bootstrap-sass": "^3.3.7",
"compression-webpack-plugin": "^1.1.6",
"copy-webpack-plugin": "^4.4.1",
......@@ -77,8 +94,10 @@
"style-loader": "^0.21.0",
"testcafe": "^0.23.3",
"testcafe-react-selectors": "^3.0.0",
"ts-loader": "^5.3.3",
"typescript": "^3.3.1",
"url-loader": "^0.6.2",
"webpack": "^3.11.0",
"webpack": "^4.29.6",
"webpack-hot-middleware": "^2.22.1"
},
"scripts": {
......
const path = require('path')
const config = require('config')
const babelIncludes = require('./babel-includes')
const resolve = (type, entry) => {
if (typeof entry === 'string') {
return require.resolve(`babel-${type}-${entry}`)
}
return [require.resolve(`babel-${type}-${entry[0]}`), entry[1]]
}
const resolvePreset = entry => resolve('preset', entry)
const resolvePlugin = entry => resolve('plugin', entry)
const clientComponents = config.pubsweet.components.filter(name => {
// eslint-disable-next-line global-require
const component = require(name)
// Backwards compatibility - old name was 'frontend', new name is 'client'
return component.client || component.frontend
})
module.exports = [
{ test: /\.tsx?$/, loader: 'ts-loader' },
{
test: /\.js$|\.jsx$/,
loader: 'babel-loader',
query: {
presets: [['es2015', { modules: false }], 'react', 'stage-2'].map(
resolvePreset,
),
presets: [
['@babel/preset-env', { modules: false }],
'@babel/preset-react',
],
plugins: [
require.resolve('react-hot-loader/babel'),
resolvePlugin('transform-decorators-legacy'),
'@babel/plugin-proposal-class-properties',
// 'transform-decorators-legacy',
],
env: {
production: {
......@@ -54,7 +39,6 @@ module.exports = [
],
},
{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.json$/, loader: 'json-loader' },
{
test: /\.css$|\.scss$/,
exclude: /\.local\.s?css$/, // Exclude local styles from global
......@@ -96,15 +80,4 @@ module.exports = [
},
],
},
{
test: /\.js$|\.jsx$/,
loader: 'string-replace-loader',
query: {
search: 'PUBSWEET_COMPONENTS',
replace: `[${clientComponents
.map(component => `require('${component}')`)
.join(', ')}]`,
},
include: babelIncludes,
},
]
const path = require('path')
const config = require('config')
const webpack = require('webpack')
......@@ -42,7 +43,6 @@ module.exports = (opts = {}) => {
plugins.push(
new webpack.ContextReplacementPlugin(/./, __dirname, {
[config.authsome.mode]: config.authsome.mode,
[config.validations]: config.validations,
}),
)
} else {
......@@ -65,5 +65,28 @@ module.exports = (opts = {}) => {
minRatio: 0.8,
}),
)
// These replacements are necessary until Atlaskit
// doesn't update to styled-components v4
plugins.push(
new webpack.NormalModuleReplacementPlugin(
/@atlaskit\/media-ui\/mixins.js/,
path.join(
__dirname,
'../app/components/CollabEditor/src/media-ui-mixins.js',
),
),
)
plugins.push(
new webpack.NormalModuleReplacementPlugin(
/@atlaskit\/editor-core\/plugins\/gap-cursor\/styles.js/,
path.join(
__dirname,
'../app/components/CollabEditor/src/gap-cursor-styles.js',
),
),
)
return plugins
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment