Improve linting rules to catch more errors (#9374)
* Update `packages/` * Update examples * Update tests * Update bench * Update top level files * Fix build * trigger
This commit is contained in:
Joe Haddad
GitHub
parent
c6f1c0c064
commit
18a9c7e371
1131 changed files with 4862 additions and 4810 deletions
6
.eslintignore
Normal file
6
.eslintignore
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
node_modules
|
||||
**/.next/**
|
||||
**/_next/**
|
||||
**/dist/**
|
||||
examples/with-ioc/**
|
||||
examples/with-kea/**
|
||||
212
.eslintrc.json
Normal file
212
.eslintrc.json
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
{
|
||||
"root": true,
|
||||
"parser": "babel-eslint",
|
||||
"plugins": ["react", "react-hooks"],
|
||||
"env": {
|
||||
"browser": true,
|
||||
"commonjs": true,
|
||||
"es6": true,
|
||||
"node": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2018,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": "detect"
|
||||
}
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["**/*.ts", "**/*.tsx"],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2018,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
},
|
||||
"warnOnUnsupportedTypeScriptVersion": false
|
||||
},
|
||||
"plugins": ["@typescript-eslint"],
|
||||
"rules": {
|
||||
// Already handled by TS
|
||||
"no-dupe-class-members": "off",
|
||||
"no-undef": "off",
|
||||
|
||||
// Add TypeScript specific rules (and turn off ESLint equivalents)
|
||||
"@typescript-eslint/consistent-type-assertions": "warn",
|
||||
"no-array-constructor": "off",
|
||||
"@typescript-eslint/no-array-constructor": "warn",
|
||||
"@typescript-eslint/no-namespace": "error",
|
||||
"no-use-before-define": "off",
|
||||
"@typescript-eslint/no-use-before-define": [
|
||||
"warn",
|
||||
{
|
||||
"functions": false,
|
||||
"classes": false,
|
||||
"variables": false,
|
||||
"typedefs": false
|
||||
}
|
||||
],
|
||||
"no-unused-vars": "off",
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"warn",
|
||||
{
|
||||
"args": "none",
|
||||
"ignoreRestSiblings": true
|
||||
}
|
||||
],
|
||||
"no-useless-constructor": "off",
|
||||
"@typescript-eslint/no-useless-constructor": "warn"
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": ["test/**/*", "examples/**/*"],
|
||||
"rules": { "react/react-in-jsx-scope": "off" }
|
||||
}
|
||||
],
|
||||
"rules": {
|
||||
"array-callback-return": "warn",
|
||||
"default-case": ["warn", { "commentPattern": "^no default$" }],
|
||||
"dot-location": ["warn", "property"],
|
||||
"eqeqeq": ["warn", "smart"],
|
||||
"new-parens": "warn",
|
||||
"no-array-constructor": "warn",
|
||||
"no-caller": "warn",
|
||||
"no-cond-assign": ["warn", "except-parens"],
|
||||
"no-const-assign": "warn",
|
||||
"no-control-regex": "warn",
|
||||
"no-delete-var": "warn",
|
||||
"no-dupe-args": "warn",
|
||||
"no-dupe-class-members": "warn",
|
||||
"no-dupe-keys": "warn",
|
||||
"no-duplicate-case": "warn",
|
||||
"no-empty-character-class": "warn",
|
||||
"no-empty-pattern": "warn",
|
||||
"no-eval": "warn",
|
||||
"no-ex-assign": "warn",
|
||||
"no-extend-native": "warn",
|
||||
"no-extra-bind": "warn",
|
||||
"no-extra-label": "warn",
|
||||
"no-fallthrough": "warn",
|
||||
"no-func-assign": "warn",
|
||||
"no-implied-eval": "warn",
|
||||
"no-invalid-regexp": "warn",
|
||||
"no-iterator": "warn",
|
||||
"no-label-var": "warn",
|
||||
"no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }],
|
||||
"no-lone-blocks": "warn",
|
||||
"no-loop-func": "warn",
|
||||
"no-mixed-operators": [
|
||||
"warn",
|
||||
{
|
||||
"groups": [
|
||||
["&", "|", "^", "~", "<<", ">>", ">>>"],
|
||||
["==", "!=", "===", "!==", ">", ">=", "<", "<="],
|
||||
["&&", "||"],
|
||||
["in", "instanceof"]
|
||||
],
|
||||
"allowSamePrecedence": false
|
||||
}
|
||||
],
|
||||
"no-multi-str": "warn",
|
||||
"no-native-reassign": "warn",
|
||||
"no-negated-in-lhs": "warn",
|
||||
"no-new-func": "warn",
|
||||
"no-new-object": "warn",
|
||||
"no-new-symbol": "warn",
|
||||
"no-new-wrappers": "warn",
|
||||
"no-obj-calls": "warn",
|
||||
"no-octal": "warn",
|
||||
"no-octal-escape": "warn",
|
||||
"no-redeclare": ["warn", { "builtinGlobals": false }],
|
||||
"no-regex-spaces": "warn",
|
||||
"no-restricted-syntax": ["warn", "WithStatement"],
|
||||
"no-script-url": "warn",
|
||||
"no-self-assign": "warn",
|
||||
"no-self-compare": "warn",
|
||||
"no-sequences": "warn",
|
||||
"no-shadow-restricted-names": "warn",
|
||||
"no-sparse-arrays": "warn",
|
||||
"no-template-curly-in-string": "error",
|
||||
"no-this-before-super": "warn",
|
||||
"no-throw-literal": "warn",
|
||||
"no-undef": "error",
|
||||
"no-unexpected-multiline": "warn",
|
||||
"no-unreachable": "warn",
|
||||
"no-unused-expressions": [
|
||||
"error",
|
||||
{
|
||||
"allowShortCircuit": true,
|
||||
"allowTernary": true,
|
||||
"allowTaggedTemplates": true
|
||||
}
|
||||
],
|
||||
"no-unused-labels": "warn",
|
||||
"no-unused-vars": [
|
||||
"warn",
|
||||
{
|
||||
"args": "none",
|
||||
"ignoreRestSiblings": true
|
||||
}
|
||||
],
|
||||
"no-use-before-define": [
|
||||
"warn",
|
||||
{
|
||||
"functions": false,
|
||||
"classes": false,
|
||||
"variables": false
|
||||
}
|
||||
],
|
||||
"no-useless-computed-key": "warn",
|
||||
"no-useless-concat": "warn",
|
||||
"no-useless-constructor": "warn",
|
||||
"no-useless-escape": "warn",
|
||||
"no-useless-rename": [
|
||||
"warn",
|
||||
{
|
||||
"ignoreDestructuring": false,
|
||||
"ignoreImport": false,
|
||||
"ignoreExport": false
|
||||
}
|
||||
],
|
||||
"no-with": "warn",
|
||||
"no-whitespace-before-property": "warn",
|
||||
"react-hooks/exhaustive-deps": "warn",
|
||||
"require-yield": "warn",
|
||||
"rest-spread-spacing": ["warn", "never"],
|
||||
"strict": ["warn", "never"],
|
||||
"unicode-bom": ["warn", "never"],
|
||||
"use-isnan": "warn",
|
||||
"valid-typeof": "warn",
|
||||
"getter-return": "warn",
|
||||
"react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }],
|
||||
"react/jsx-no-comment-textnodes": "warn",
|
||||
"react/jsx-no-duplicate-props": "warn",
|
||||
"react/jsx-no-target-blank": "warn",
|
||||
"react/jsx-no-undef": "error",
|
||||
"react/jsx-pascal-case": [
|
||||
"warn",
|
||||
{
|
||||
"allowAllCaps": true,
|
||||
"ignore": []
|
||||
}
|
||||
],
|
||||
"react/jsx-uses-react": "warn",
|
||||
"react/jsx-uses-vars": "warn",
|
||||
"react/no-danger-with-children": "warn",
|
||||
"react/no-deprecated": "warn",
|
||||
"react/no-direct-mutation-state": "warn",
|
||||
"react/no-is-mounted": "warn",
|
||||
"react/no-typos": "error",
|
||||
"react/react-in-jsx-scope": "error",
|
||||
"react/require-render-return": "error",
|
||||
"react/style-prop-object": "warn",
|
||||
"react-hooks/rules-of-hooks": "error"
|
||||
}
|
||||
}
|
||||
8
.vscode/settings.json
vendored
Normal file
8
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
{ "language": "typescript", "autoFix": true },
|
||||
{ "language": "typescriptreact", "autoFix": true }
|
||||
]
|
||||
}
|
||||
|
|
@ -1 +1,2 @@
|
|||
import React from 'react'
|
||||
export default () => <h1>My component!</h1>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const globMod = require('glob')
|
|||
const glob = promisify(globMod)
|
||||
const resolveDataDir = join(__dirname, 'fixtures', '**/*')
|
||||
|
||||
async function test () {
|
||||
async function test() {
|
||||
const time = process.hrtime()
|
||||
await glob(resolveDataDir)
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ async function test () {
|
|||
console.log(milliseconds)
|
||||
}
|
||||
|
||||
async function run () {
|
||||
async function run() {
|
||||
for (let i = 0; i < 50; i++) {
|
||||
await test()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ const { join } = require('path')
|
|||
const { recursiveReadDir } = require('next/dist/lib/recursive-readdir')
|
||||
const resolveDataDir = join(__dirname, 'fixtures')
|
||||
|
||||
async function test () {
|
||||
async function test() {
|
||||
const time = process.hrtime()
|
||||
await recursiveReadDir(resolveDataDir, /\.js$/)
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ async function test () {
|
|||
console.log(milliseconds)
|
||||
}
|
||||
|
||||
async function run () {
|
||||
async function run() {
|
||||
for (let i = 0; i < 50; i++) {
|
||||
await test()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const fs = require('fs-extra')
|
|||
const recursiveCopyNpm = require('recursive-copy')
|
||||
|
||||
const {
|
||||
recursiveCopy: recursiveCopyCustom
|
||||
recursiveCopy: recursiveCopyCustom,
|
||||
} = require('next/dist/lib/recursive-copy')
|
||||
|
||||
const fixturesDir = join(__dirname, 'fixtures')
|
||||
|
|
@ -23,8 +23,8 @@ const createSrcFolder = async () => {
|
|||
await Promise.all(files.map(file => fs.outputFile(file, 'hello')))
|
||||
}
|
||||
|
||||
async function run (fn) {
|
||||
async function test () {
|
||||
async function run(fn) {
|
||||
async function test() {
|
||||
const start = process.hrtime()
|
||||
|
||||
await fn(srcDir, destDir)
|
||||
|
|
@ -48,7 +48,7 @@ async function run (fn) {
|
|||
console.log({ sum, nb, avg })
|
||||
}
|
||||
|
||||
async function main () {
|
||||
async function main() {
|
||||
await createSrcFolder()
|
||||
|
||||
console.log('test recursive-copy npm module')
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ const { join } = require('path')
|
|||
const { recursiveDelete } = require('next/dist/lib/recursive-delete')
|
||||
const resolveDataDir = join(__dirname, `fixtures-${process.argv[2]}`)
|
||||
|
||||
async function test () {
|
||||
async function test() {
|
||||
const time = process.hrtime()
|
||||
await recursiveDelete(resolveDataDir)
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const rimrafMod = require('rimraf')
|
|||
const resolveDataDir = join(__dirname, `fixtures-${process.argv[2]}`, '**/*')
|
||||
const rimraf = promisify(rimrafMod)
|
||||
|
||||
async function test () {
|
||||
async function test() {
|
||||
const time = process.hrtime()
|
||||
await rimraf(resolveDataDir)
|
||||
|
||||
|
|
|
|||
|
|
@ -16,14 +16,14 @@ const ActiveLink = ({ children, activeClassName, ...props }) => {
|
|||
return (
|
||||
<Link {...props}>
|
||||
{React.cloneElement(child, {
|
||||
className: className || null
|
||||
className: className || null,
|
||||
})}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
ActiveLink.propTypes = {
|
||||
activeClassName: PropTypes.string.isRequired
|
||||
activeClassName: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
export default ActiveLink
|
||||
|
|
|
|||
|
|
@ -11,15 +11,15 @@ const Nav = () => (
|
|||
content: ' (current page)';
|
||||
}
|
||||
`}</style>
|
||||
<ul className='nav'>
|
||||
<ul className="nav">
|
||||
<li>
|
||||
<ActiveLink activeClassName='active' href='/'>
|
||||
<a className='nav-link'>Home</a>
|
||||
<ActiveLink activeClassName="active" href="/">
|
||||
<a className="nav-link">Home</a>
|
||||
</ActiveLink>
|
||||
</li>
|
||||
<li>
|
||||
<ActiveLink activeClassName='active' href='/about'>
|
||||
<a className='nav-link'>About</a>
|
||||
<ActiveLink activeClassName="active" href="/about">
|
||||
<a className="nav-link">About</a>
|
||||
</ActiveLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -8,78 +8,78 @@ export default () => (
|
|||
<title>Example AMP Story in Next.js</title>
|
||||
<script
|
||||
async
|
||||
key='amp-story'
|
||||
custom-element='amp-story'
|
||||
src='https://cdn.ampproject.org/v0/amp-story-1.0.js'
|
||||
key="amp-story"
|
||||
custom-element="amp-story"
|
||||
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
|
||||
/>
|
||||
<script
|
||||
async
|
||||
key='amp-video'
|
||||
custom-element='amp-video'
|
||||
src='https://cdn.ampproject.org/v0/amp-video-0.1.js'
|
||||
key="amp-video"
|
||||
custom-element="amp-video"
|
||||
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
|
||||
/>
|
||||
</Head>
|
||||
|
||||
<amp-story
|
||||
standalone=''
|
||||
title='Stories in AMP - Hello World'
|
||||
publisher='AMP Project'
|
||||
publisher-logo-src='https://amp.dev/favicons/coast-228x228.png'
|
||||
poster-portrait-src='https://amp.dev/static/samples/img/story_dog2_portrait.jpg'
|
||||
poster-square-src='https://amp.dev/static/samples/img/story_dog2_square.jpg'
|
||||
poster-landscape-src='https://amp.dev/static/samples/img/story_dog2_landscape.jpg'
|
||||
standalone=""
|
||||
title="Stories in AMP - Hello World"
|
||||
publisher="AMP Project"
|
||||
publisher-logo-src="https://amp.dev/favicons/coast-228x228.png"
|
||||
poster-portrait-src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
|
||||
poster-square-src="https://amp.dev/static/samples/img/story_dog2_square.jpg"
|
||||
poster-landscape-src="https://amp.dev/static/samples/img/story_dog2_landscape.jpg"
|
||||
>
|
||||
{/* <!-- A story consists of one or more pages. Each page is declared by an `amp-story-page` element. Pages are designed by layering videos, images and text. Here we have a page that uses two layers. One layer filling the available space with an image and one text layer that shows a heading. --> */}
|
||||
<amp-story-page id='page-1'>
|
||||
<amp-story-grid-layer template='fill'>
|
||||
<amp-story-page id="page-1">
|
||||
<amp-story-grid-layer template="fill">
|
||||
<amp-img
|
||||
src='https://amp.dev/static/samples/img/story_dog2.jpg'
|
||||
width='720'
|
||||
height='1280'
|
||||
layout='responsive'
|
||||
src="https://amp.dev/static/samples/img/story_dog2.jpg"
|
||||
width="720"
|
||||
height="1280"
|
||||
layout="responsive"
|
||||
/>
|
||||
</amp-story-grid-layer>
|
||||
<amp-story-grid-layer template='vertical'>
|
||||
<amp-story-grid-layer template="vertical">
|
||||
<h1>Hello World</h1>
|
||||
<p>This is an AMP Story.</p>
|
||||
</amp-story-grid-layer>
|
||||
</amp-story-page>
|
||||
|
||||
{/* <!-- Here we have a page consisting of a video which autoplays and loops. --> */}
|
||||
<amp-story-page id='page-2'>
|
||||
<amp-story-grid-layer template='fill'>
|
||||
<amp-story-page id="page-2">
|
||||
<amp-story-grid-layer template="fill">
|
||||
<amp-video
|
||||
autoplay=''
|
||||
loop=''
|
||||
width='720'
|
||||
height='960'
|
||||
poster='https://amp.dev/static/samples/img/story_video_dog_cover.jpg'
|
||||
layout='responsive'
|
||||
autoplay=""
|
||||
loop=""
|
||||
width="720"
|
||||
height="960"
|
||||
poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
|
||||
layout="responsive"
|
||||
>
|
||||
<source
|
||||
src='https://amp.dev/static/samples/video/story_video_dog.mp4'
|
||||
type='video/mp4'
|
||||
src="https://amp.dev/static/samples/video/story_video_dog.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</amp-video>
|
||||
</amp-story-grid-layer>
|
||||
</amp-story-page>
|
||||
|
||||
{/* <!-- Pre-defined entry animations make it possible to create dynamic pages without videos. The length and initial delay can be customized using the `animate-in-duration` and `animate-in-delay` properties. The [animations sample](/documentation/examples/visual-effects/amp_story_animations/) shows all available animantions in action. --> */}
|
||||
<amp-story-page id='animation-demo'>
|
||||
<amp-story-grid-layer template='fill'>
|
||||
<amp-story-page id="animation-demo">
|
||||
<amp-story-grid-layer template="fill">
|
||||
<amp-img
|
||||
src='https://amp.dev/static/samples/img/story_dog4.jpg'
|
||||
animate-in='fly-in-top'
|
||||
width='720'
|
||||
height='1280'
|
||||
layout='responsive'
|
||||
src="https://amp.dev/static/samples/img/story_dog4.jpg"
|
||||
animate-in="fly-in-top"
|
||||
width="720"
|
||||
height="1280"
|
||||
layout="responsive"
|
||||
/>
|
||||
</amp-story-grid-layer>
|
||||
<amp-story-grid-layer template='thirds'>
|
||||
<amp-story-grid-layer template="thirds">
|
||||
<h2
|
||||
animate-in='fly-in-bottom'
|
||||
grid-area='lower-third'
|
||||
animate-in-delay='0.4s'
|
||||
animate-in="fly-in-bottom"
|
||||
grid-area="lower-third"
|
||||
animate-in-delay="0.4s"
|
||||
>
|
||||
Best walk ever!
|
||||
</h2>
|
||||
|
|
@ -87,36 +87,36 @@ export default () => (
|
|||
</amp-story-page>
|
||||
|
||||
{/* <!-- Stories can use predefined layouts to style the page. Here we're using the `thirds` template. For an overview about the available layouts take a look at the [layouts sample](/documentation/examples/style-layout/amp_story_layouts/). --> */}
|
||||
<amp-story-page id='layout-demo'>
|
||||
<amp-story-grid-layer template='thirds'>
|
||||
<amp-story-page id="layout-demo">
|
||||
<amp-story-grid-layer template="thirds">
|
||||
<amp-img
|
||||
grid-area='upper-third'
|
||||
src='https://amp.dev/static/samples/img/story_thirds_1.jpg'
|
||||
width='560'
|
||||
height='420'
|
||||
layout='responsive'
|
||||
grid-area="upper-third"
|
||||
src="https://amp.dev/static/samples/img/story_thirds_1.jpg"
|
||||
width="560"
|
||||
height="420"
|
||||
layout="responsive"
|
||||
/>
|
||||
<amp-img
|
||||
grid-area='middle-third'
|
||||
src='https://amp.dev/static/samples/img/story_thirds_2.jpg'
|
||||
width='560'
|
||||
height='420'
|
||||
layout='responsive'
|
||||
grid-area="middle-third"
|
||||
src="https://amp.dev/static/samples/img/story_thirds_2.jpg"
|
||||
width="560"
|
||||
height="420"
|
||||
layout="responsive"
|
||||
/>
|
||||
<amp-img
|
||||
grid-area='lower-third'
|
||||
src='https://amp.dev/static/samples/img/story_thirds_3.jpg'
|
||||
width='560'
|
||||
height='420'
|
||||
layout='responsive'
|
||||
grid-area="lower-third"
|
||||
src="https://amp.dev/static/samples/img/story_thirds_3.jpg"
|
||||
width="560"
|
||||
height="420"
|
||||
layout="responsive"
|
||||
/>
|
||||
</amp-story-grid-layer>
|
||||
</amp-story-page>
|
||||
|
||||
{/* <!-- A "bookend" panel containing links to other resources will appear on the last page of your story if you include an `amp-story-bookend` that references a [bookend JSON config](/static/samples/json/bookend.json). --> */}
|
||||
<amp-story-bookend
|
||||
src='https://amp.dev/static/samples/json/bookend.json'
|
||||
layout='nodisplay'
|
||||
src="https://amp.dev/static/samples/json/bookend.json"
|
||||
layout="nodisplay"
|
||||
/>
|
||||
</amp-story>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export default ({ author }) => (
|
||||
<>
|
||||
<div className='byline'>By {author}</div>
|
||||
<div className="byline">By {author}</div>
|
||||
<style jsx>{`
|
||||
.byline {
|
||||
color: green;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export default function Layout ({ children }) {
|
||||
export default function Layout({ children }) {
|
||||
return (
|
||||
<>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useAmp } from 'next/amp'
|
|||
import Byline from '../components/Byline'
|
||||
|
||||
export const config = {
|
||||
amp: 'hybrid'
|
||||
amp: 'hybrid',
|
||||
}
|
||||
|
||||
export default () => {
|
||||
|
|
@ -15,13 +15,13 @@ export default () => {
|
|||
<title>The Dog</title>
|
||||
</Head>
|
||||
<h1>The Dog (Hybrid AMP Page)</h1>
|
||||
<Byline author='Meow Meow Fuzzyface' />
|
||||
<Byline author="Meow Meow Fuzzyface" />
|
||||
<p>
|
||||
<a href={isAmp ? '/dog' : '/dog?amp=1'}>
|
||||
{isAmp ? 'View Non-AMP' : 'View AMP'} Version
|
||||
</a>
|
||||
</p>
|
||||
<p className='caption'>Woooooooooooof</p>
|
||||
<p className="caption">Woooooooooooof</p>
|
||||
<p>
|
||||
Wafer donut candy soufflé{' '}
|
||||
<a href={isAmp ? '/?amp=1' : '/'}>lemon drops</a> icing. Marzipan gummi
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Layout from '../components/Layout'
|
|||
import Byline from '../components/Byline'
|
||||
|
||||
export const config = {
|
||||
amp: true
|
||||
amp: true,
|
||||
}
|
||||
|
||||
export default () => {
|
||||
|
|
@ -16,8 +16,8 @@ export default () => {
|
|||
<title>The Cat</title>
|
||||
</Head>
|
||||
<h1>The Cat (AMP-first Page)</h1>
|
||||
<Byline author='Dan Zajdband' />
|
||||
<p className='caption'>Meowwwwwwww</p>
|
||||
<Byline author="Dan Zajdband" />
|
||||
<p className="caption">Meowwwwwwww</p>
|
||||
<p>
|
||||
Cat ipsum dolor <a href={isAmp ? '/dog?amp=1' : '/dog'}>sit amet</a>,
|
||||
eat grass, throw it back up but refuse to leave cardboard box or groom
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@ const nextConfig = {
|
|||
bundleAnalyzerConfig: {
|
||||
server: {
|
||||
analyzerMode: 'static',
|
||||
reportFilename: '../bundles/server.html'
|
||||
reportFilename: '../bundles/server.html',
|
||||
},
|
||||
browser: {
|
||||
analyzerMode: 'static',
|
||||
reportFilename: '../bundles/client.html'
|
||||
}
|
||||
reportFilename: '../bundles/client.html',
|
||||
},
|
||||
},
|
||||
webpack (config) {
|
||||
webpack(config) {
|
||||
return config
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = withBundleAnalyzer(nextConfig)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react'
|
|||
import Link from 'next/link'
|
||||
|
||||
export default class Index extends React.Component {
|
||||
static getInitialProps ({ req }) {
|
||||
static getInitialProps({ req }) {
|
||||
if (req) {
|
||||
// Runs only in the server
|
||||
const faker = require('faker')
|
||||
|
|
@ -14,14 +14,14 @@ export default class Index extends React.Component {
|
|||
return { name: 'Arunoda' }
|
||||
}
|
||||
|
||||
render () {
|
||||
render() {
|
||||
const { name } = this.props
|
||||
return (
|
||||
<div>
|
||||
<h1>Home Page</h1>
|
||||
<p>Welcome, {name}</p>
|
||||
<div>
|
||||
<Link href='/about'>
|
||||
<Link href="/about">
|
||||
<a>About Page</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ let apolloClient = null
|
|||
* @param {Object} [config]
|
||||
* @param {Boolean} [config.ssr=true]
|
||||
*/
|
||||
export function withApollo (PageComponent, { ssr = true } = {}) {
|
||||
export function withApollo(PageComponent, { ssr = true } = {}) {
|
||||
const WithApollo = ({ apolloClient, apolloState, ...pageProps }) => {
|
||||
const client = apolloClient || initApolloClient(apolloState)
|
||||
return (
|
||||
|
|
@ -67,7 +67,7 @@ export function withApollo (PageComponent, { ssr = true } = {}) {
|
|||
<AppTree
|
||||
pageProps={{
|
||||
...pageProps,
|
||||
apolloClient
|
||||
apolloClient,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
|
@ -89,7 +89,7 @@ export function withApollo (PageComponent, { ssr = true } = {}) {
|
|||
|
||||
return {
|
||||
...pageProps,
|
||||
apolloState
|
||||
apolloState,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -102,7 +102,7 @@ export function withApollo (PageComponent, { ssr = true } = {}) {
|
|||
* Creates or reuses apollo client in the browser.
|
||||
* @param {Object} initialState
|
||||
*/
|
||||
function initApolloClient (initialState) {
|
||||
function initApolloClient(initialState) {
|
||||
// Make sure to create a new client for every server-side request so that data
|
||||
// isn't shared between connections (which would be bad)
|
||||
if (typeof window === 'undefined') {
|
||||
|
|
@ -121,7 +121,7 @@ function initApolloClient (initialState) {
|
|||
* Creates and configures the ApolloClient
|
||||
* @param {Object} [initialState={}]
|
||||
*/
|
||||
function createApolloClient (initialState = {}) {
|
||||
function createApolloClient(initialState = {}) {
|
||||
const ssrMode = typeof window === 'undefined'
|
||||
const cache = new InMemoryCache().restore(initialState)
|
||||
|
||||
|
|
@ -129,11 +129,11 @@ function createApolloClient (initialState = {}) {
|
|||
return new ApolloClient({
|
||||
ssrMode,
|
||||
link: createIsomorphLink(),
|
||||
cache
|
||||
cache,
|
||||
})
|
||||
}
|
||||
|
||||
function createIsomorphLink () {
|
||||
function createIsomorphLink() {
|
||||
if (typeof window === 'undefined') {
|
||||
const { SchemaLink } = require('apollo-link-schema')
|
||||
const { schema } = require('./schema')
|
||||
|
|
@ -142,7 +142,7 @@ function createIsomorphLink () {
|
|||
const { HttpLink } = require('apollo-link-http')
|
||||
return new HttpLink({
|
||||
uri: '/api/graphql',
|
||||
credentials: 'same-origin'
|
||||
credentials: 'same-origin',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
export const resolvers = {
|
||||
Query: {
|
||||
viewer (_parent, _args, _context, _info) {
|
||||
viewer(_parent, _args, _context, _info) {
|
||||
return { id: 1, name: 'John Smith', status: 'cached' }
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@ import { resolvers } from './resolvers'
|
|||
|
||||
export const schema = makeExecutableSchema({
|
||||
typeDefs,
|
||||
resolvers
|
||||
resolvers,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import Link from 'next/link'
|
|||
export default () => (
|
||||
<div>
|
||||
This is a static page goto{' '}
|
||||
<Link href='/'>
|
||||
<Link href="/">
|
||||
<a>dynamic</a>
|
||||
</Link>{' '}
|
||||
page.
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ const apolloServer = new ApolloServer({ schema })
|
|||
|
||||
export const config = {
|
||||
api: {
|
||||
bodyParser: false
|
||||
}
|
||||
bodyParser: false,
|
||||
},
|
||||
}
|
||||
|
||||
export default apolloServer.createHandler({ path: '/api/graphql' })
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ const ViewerQuery = gql`
|
|||
|
||||
const Index = () => {
|
||||
const {
|
||||
data: { viewer }
|
||||
data: { viewer },
|
||||
} = useQuery(ViewerQuery)
|
||||
|
||||
if (viewer) {
|
||||
return (
|
||||
<div>
|
||||
You're signed in as {viewer.name} and you're {viewer.status} goto{' '}
|
||||
<Link href='/about'>
|
||||
<Link href="/about">
|
||||
<a>static</a>
|
||||
</Link>{' '}
|
||||
page.
|
||||
|
|
|
|||
|
|
@ -11,18 +11,18 @@ const typeDefs = gql`
|
|||
|
||||
const resolvers = {
|
||||
Query: {
|
||||
users (parent, args, context) {
|
||||
users(parent, args, context) {
|
||||
return [{ name: 'Nextjs' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const apolloServer = new ApolloServer({ typeDefs, resolvers })
|
||||
|
||||
export const config = {
|
||||
api: {
|
||||
bodyParser: false
|
||||
}
|
||||
bodyParser: false,
|
||||
},
|
||||
}
|
||||
|
||||
export default apolloServer.createHandler({ path: '/api/graphql' })
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ Index.getInitialProps = async () => {
|
|||
const response = await fetch('http://localhost:3000/api/graphql', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-type': 'application/json'
|
||||
'Content-type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ query: '{ users { name } }' })
|
||||
body: JSON.stringify({ query: '{ users { name } }' }),
|
||||
})
|
||||
|
||||
const {
|
||||
data: { users }
|
||||
data: { users },
|
||||
} = await response.json()
|
||||
|
||||
return { users }
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import micro from 'micro'
|
|||
|
||||
const posts = [
|
||||
{
|
||||
title: 'Next.js is awesome'
|
||||
title: 'Next.js is awesome',
|
||||
},
|
||||
{
|
||||
title: 'API support is really great'
|
||||
}
|
||||
title: 'API support is really great',
|
||||
},
|
||||
]
|
||||
|
||||
export default micro((req, res) => {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
export default (req, res) => {
|
||||
const {
|
||||
query: { id, name },
|
||||
method
|
||||
method,
|
||||
} = req
|
||||
|
||||
switch (method) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
// Fake users data
|
||||
const users = [
|
||||
{
|
||||
id: 1
|
||||
id: 1,
|
||||
},
|
||||
{ id: 2 },
|
||||
{ id: 3 }
|
||||
{ id: 3 },
|
||||
]
|
||||
|
||||
export default (req, res) => {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const Index = ({ users }) => (
|
|||
<ul>
|
||||
{users.map(user => (
|
||||
<li key={user.id}>
|
||||
<Link href='/user/[id]' as={`/user/${user.id}`}>
|
||||
<Link href="/user/[id]" as={`/user/${user.id}`}>
|
||||
<a>{`User ${user.id}`}</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export const people = [
|
|||
hair_color: 'blond',
|
||||
skin_color: 'fair',
|
||||
eye_color: 'blue',
|
||||
gender: 'male'
|
||||
gender: 'male',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
|
|
@ -17,7 +17,7 @@ export const people = [
|
|||
hair_color: 'n/a',
|
||||
skin_color: 'gold',
|
||||
eye_color: 'yellow',
|
||||
gender: 'n/a'
|
||||
gender: 'n/a',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
|
|
@ -27,7 +27,7 @@ export const people = [
|
|||
hair_color: 'n/a',
|
||||
skin_color: 'white, blue',
|
||||
eye_color: 'red',
|
||||
gender: 'n/a'
|
||||
gender: 'n/a',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
|
|
@ -37,7 +37,7 @@ export const people = [
|
|||
hair_color: 'none',
|
||||
skin_color: 'white',
|
||||
eye_color: 'yellow',
|
||||
gender: 'male'
|
||||
gender: 'male',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
|
|
@ -47,7 +47,7 @@ export const people = [
|
|||
hair_color: 'brown',
|
||||
skin_color: 'light',
|
||||
eye_color: 'brown',
|
||||
gender: 'female'
|
||||
gender: 'female',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
|
|
@ -57,7 +57,7 @@ export const people = [
|
|||
hair_color: 'brown, grey',
|
||||
skin_color: 'light',
|
||||
eye_color: 'blue',
|
||||
gender: 'male'
|
||||
gender: 'male',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
|
|
@ -67,7 +67,7 @@ export const people = [
|
|||
hair_color: 'brown',
|
||||
skin_color: 'light',
|
||||
eye_color: 'blue',
|
||||
gender: 'female'
|
||||
gender: 'female',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
|
|
@ -77,7 +77,7 @@ export const people = [
|
|||
hair_color: 'n/a',
|
||||
skin_color: 'white, red',
|
||||
eye_color: 'red',
|
||||
gender: 'n/a'
|
||||
gender: 'n/a',
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
|
|
@ -87,7 +87,7 @@ export const people = [
|
|||
hair_color: 'black',
|
||||
skin_color: 'light',
|
||||
eye_color: 'brown',
|
||||
gender: 'male'
|
||||
gender: 'male',
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
|
|
@ -97,6 +97,6 @@ export const people = [
|
|||
hair_color: 'auburn, white',
|
||||
skin_color: 'fair',
|
||||
eye_color: 'blue-gray',
|
||||
gender: 'male'
|
||||
}
|
||||
gender: 'male',
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
function Header ({ user, loading }) {
|
||||
function Header({ user, loading }) {
|
||||
return (
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/'>
|
||||
<Link href="/">
|
||||
<a>Home</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/about'>
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
@ -19,22 +19,22 @@ function Header ({ user, loading }) {
|
|||
(user ? (
|
||||
<>
|
||||
<li>
|
||||
<Link href='/profile'>
|
||||
<Link href="/profile">
|
||||
<a>Client-rendered profile</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/advanced/ssr-profile'>
|
||||
<Link href="/advanced/ssr-profile">
|
||||
<a>Server rendered profile (advanced)</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href='/api/logout'>Logout</a>
|
||||
<a href="/api/logout">Logout</a>
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
<li>
|
||||
<a href='/api/login'>Login</a>
|
||||
<a href="/api/login">Login</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Head from 'next/head'
|
||||
import Header from './header'
|
||||
|
||||
function Layout ({ user, loading = false, children }) {
|
||||
function Layout({ user, loading = false, children }) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
|
|
@ -11,7 +11,7 @@ function Layout ({ user, loading = false, children }) {
|
|||
<Header user={user} loading={loading} />
|
||||
|
||||
<main>
|
||||
<div className='container'>{children}</div>
|
||||
<div className="container">{children}</div>
|
||||
</main>
|
||||
|
||||
<style jsx>{`
|
||||
|
|
|
|||
|
|
@ -9,6 +9,6 @@ export default initAuth0({
|
|||
postLogoutRedirectUri: process.env.POST_LOGOUT_REDIRECT_URI,
|
||||
session: {
|
||||
cookieSecret: process.env.SESSION_COOKIE_SECRET,
|
||||
cookieLifetime: process.env.SESSION_COOKIE_LIFETIME
|
||||
}
|
||||
cookieLifetime: process.env.SESSION_COOKIE_LIFETIME,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import fetch from 'isomorphic-unfetch'
|
||||
|
||||
export async function fetchUser (cookie = '') {
|
||||
export async function fetchUser(cookie = '') {
|
||||
if (typeof window !== 'undefined' && window.__user) {
|
||||
return window.__user
|
||||
}
|
||||
|
|
@ -10,10 +10,10 @@ export async function fetchUser (cookie = '') {
|
|||
'/api/me',
|
||||
cookie
|
||||
? {
|
||||
headers: {
|
||||
cookie
|
||||
headers: {
|
||||
cookie,
|
||||
},
|
||||
}
|
||||
}
|
||||
: {}
|
||||
)
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ export async function fetchUser (cookie = '') {
|
|||
return json
|
||||
}
|
||||
|
||||
export function useFetchUser ({ required } = {}) {
|
||||
export function useFetchUser({ required } = {}) {
|
||||
const [loading, setLoading] = useState(
|
||||
() => !(typeof window !== 'undefined' && window.__user)
|
||||
)
|
||||
|
|
@ -41,30 +41,34 @@ export function useFetchUser ({ required } = {}) {
|
|||
return window.__user || null
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && user) {
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
let isMounted = true
|
||||
|
||||
fetchUser().then(user => {
|
||||
// Only set the user if the component is still mounted
|
||||
if (isMounted) {
|
||||
// When the user is not logged in but login is required
|
||||
if (required && !user) {
|
||||
window.location.href = '/api/login'
|
||||
return
|
||||
}
|
||||
setUser(user)
|
||||
setLoading(false)
|
||||
useEffect(
|
||||
() => {
|
||||
if (!loading && user) {
|
||||
return
|
||||
}
|
||||
})
|
||||
setLoading(true)
|
||||
let isMounted = true
|
||||
|
||||
return () => {
|
||||
isMounted = false
|
||||
}
|
||||
}, [])
|
||||
fetchUser().then(user => {
|
||||
// Only set the user if the component is still mounted
|
||||
if (isMounted) {
|
||||
// When the user is not logged in but login is required
|
||||
if (required && !user) {
|
||||
window.location.href = '/api/login'
|
||||
return
|
||||
}
|
||||
setUser(user)
|
||||
setLoading(false)
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
isMounted = false
|
||||
}
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[]
|
||||
)
|
||||
|
||||
return { user, loading }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@ module.exports = {
|
|||
POST_LOGOUT_REDIRECT_URI:
|
||||
process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000/',
|
||||
SESSION_COOKIE_SECRET: process.env.SESSION_COOKIE_SECRET,
|
||||
SESSION_COOKIE_LIFETIME: 7200 // 2 hours
|
||||
}
|
||||
SESSION_COOKIE_LIFETIME: 7200, // 2 hours
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React from 'react'
|
|||
import Layout from '../components/layout'
|
||||
import { useFetchUser } from '../lib/user'
|
||||
|
||||
function About () {
|
||||
function About() {
|
||||
const { user, loading } = useFetchUser()
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@ import auth0 from '../../lib/auth0'
|
|||
import { fetchUser } from '../../lib/user'
|
||||
import Layout from '../../components/layout'
|
||||
|
||||
function Profile ({ user }) {
|
||||
function Profile({ user }) {
|
||||
return (
|
||||
<Layout user={user}>
|
||||
<h1>Profile</h1>
|
||||
|
||||
<div>
|
||||
<h3>Profile (server rendered)</h3>
|
||||
<img src={user.picture} alt='user picture' />
|
||||
<img src={user.picture} alt="user picture" />
|
||||
<p>nickname: {user.nickname}</p>
|
||||
<p>name: {user.name}</p>
|
||||
</div>
|
||||
|
|
@ -28,7 +28,7 @@ Profile.getInitialProps = async ({ req, res }) => {
|
|||
const { user } = await auth0.getSession(req)
|
||||
if (!user) {
|
||||
res.writeHead(302, {
|
||||
Location: '/api/login'
|
||||
Location: '/api/login',
|
||||
})
|
||||
res.end()
|
||||
return
|
||||
|
|
@ -46,7 +46,7 @@ Profile.getInitialProps = async ({ req, res }) => {
|
|||
if (!user) {
|
||||
if (typeof window === 'undefined') {
|
||||
res.writeHead(302, {
|
||||
Location: '/api/login'
|
||||
Location: '/api/login',
|
||||
})
|
||||
return res.end()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import auth0 from '../../lib/auth0'
|
||||
|
||||
export default async function callback (req, res) {
|
||||
export default async function callback(req, res) {
|
||||
try {
|
||||
await auth0.handleCallback(req, res, { redirectTo: '/' })
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import auth0 from '../../lib/auth0'
|
||||
|
||||
export default async function login (req, res) {
|
||||
export default async function login(req, res) {
|
||||
try {
|
||||
await auth0.handleLogin(req, res)
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import auth0 from '../../lib/auth0'
|
||||
|
||||
export default async function logout (req, res) {
|
||||
export default async function logout(req, res) {
|
||||
try {
|
||||
await auth0.handleLogout(req, res)
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import auth0 from '../../lib/auth0'
|
||||
|
||||
export default async function me (req, res) {
|
||||
export default async function me(req, res) {
|
||||
try {
|
||||
await auth0.handleProfile(req, res)
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React from 'react'
|
|||
import Layout from '../components/layout'
|
||||
import { useFetchUser } from '../lib/user'
|
||||
|
||||
function Home () {
|
||||
function Home() {
|
||||
const { user, loading } = useFetchUser()
|
||||
|
||||
return (
|
||||
|
|
@ -27,7 +27,7 @@ function Home () {
|
|||
{user && (
|
||||
<>
|
||||
<h4>Rendered user info on the client</h4>
|
||||
<img src={user.picture} alt='user picture' />
|
||||
<img src={user.picture} alt="user picture" />
|
||||
<p>nickname: {user.nickname}</p>
|
||||
<p>name: {user.name}</p>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@ import React from 'react'
|
|||
import { useFetchUser } from '../lib/user'
|
||||
import Layout from '../components/layout'
|
||||
|
||||
function ProfileCard ({ user }) {
|
||||
function ProfileCard({ user }) {
|
||||
return (
|
||||
<>
|
||||
<h1>Profile</h1>
|
||||
|
||||
<div>
|
||||
<h3>Profile (server rendered)</h3>
|
||||
<img src={user.picture} alt='user picture' />
|
||||
<img src={user.picture} alt="user picture" />
|
||||
<p>nickname: {user.nickname}</p>
|
||||
<p>name: {user.name}</p>
|
||||
</div>
|
||||
|
|
@ -20,7 +20,7 @@ function ProfileCard ({ user }) {
|
|||
)
|
||||
}
|
||||
|
||||
function Profile () {
|
||||
function Profile() {
|
||||
const { user, loading } = useFetchUser({ required: true })
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export default () => (
|
||||
<div className='hello'>
|
||||
<div className="hello">
|
||||
<p>Hello World</p>
|
||||
<style jsx>{`
|
||||
.hello {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import Link from 'next/link'
|
|||
export default () => (
|
||||
<div>
|
||||
Hello World.{' '}
|
||||
<Link href='/about'>
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ module.exports = {
|
|||
description: 'Next.js starter blog',
|
||||
siteUrl: 'https://nextjs-blog-starter.now.sh',
|
||||
social: {
|
||||
twitter: '_jolvera'
|
||||
twitter: '_jolvera',
|
||||
},
|
||||
postsPerPage: 5
|
||||
}
|
||||
postsPerPage: 5,
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const Post = ({ title, summary, date, path }) => (
|
|||
|
||||
<PublishedAt link={path} date={date} />
|
||||
</header>
|
||||
<div className='post-summary'>{summary}</div>
|
||||
<div className="post-summary">{summary}</div>
|
||||
<style jsx>{`
|
||||
article {
|
||||
margin-bottom: 2em;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import Profile from './profile'
|
||||
|
||||
function Footer () {
|
||||
function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<Profile className='profile-footer' />
|
||||
<Profile className="profile-footer" />
|
||||
|
||||
<p>
|
||||
Proudly built with <a href='https://nextjs.org'>Next.js</a> -{' '}
|
||||
<a href='/feed.json'>RSS Feed</a>
|
||||
Proudly built with <a href="https://nextjs.org">Next.js</a> -{' '}
|
||||
<a href="/feed.json">RSS Feed</a>
|
||||
</p>
|
||||
<style jsx>{`
|
||||
footer {
|
||||
|
|
|
|||
|
|
@ -9,41 +9,41 @@ const defaultOGImage = siteMeta.image
|
|||
|
||||
const Head = props => (
|
||||
<NextHead>
|
||||
<meta charSet='UTF-8' />
|
||||
<meta charSet="UTF-8" />
|
||||
<title>
|
||||
{props.title ? `${props.title} - ${siteMeta.title}` : siteMeta.title}
|
||||
</title>
|
||||
<meta
|
||||
name='description'
|
||||
name="description"
|
||||
content={props.description || defaultDescription}
|
||||
/>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1' />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<link
|
||||
rel='alternate'
|
||||
title='RSS Feed'
|
||||
type='application/json'
|
||||
rel="alternate"
|
||||
title="RSS Feed"
|
||||
type="application/json"
|
||||
href={`${siteMeta.siteUrl}/feed.json`}
|
||||
/>
|
||||
|
||||
<meta property='og:url' content={props.url || defaultOGURL} />
|
||||
<meta property='og:title' content={props.title || ''} />
|
||||
<meta property="og:url" content={props.url || defaultOGURL} />
|
||||
<meta property="og:title" content={props.title || ''} />
|
||||
<meta
|
||||
property='og:description'
|
||||
property="og:description"
|
||||
content={props.description || defaultDescription}
|
||||
/>
|
||||
<meta name='twitter:site' content={props.url || defaultOGURL} />
|
||||
<meta name='twitter:card' content='summary_large_image' />
|
||||
<meta name="twitter:site" content={props.url || defaultOGURL} />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta
|
||||
name='twitter:image'
|
||||
name="twitter:image"
|
||||
content={`${siteMeta.siteUrl}${props.ogImage || defaultOGImage}`}
|
||||
/>
|
||||
<meta
|
||||
property='og:image'
|
||||
property="og:image"
|
||||
content={`${siteMeta.siteUrl}${props.ogImage || defaultOGImage}`}
|
||||
/>
|
||||
<meta property='og:image:width' content='1200' />
|
||||
<meta property='og:image:height' content='630' />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
</NextHead>
|
||||
)
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ Head.propTypes = {
|
|||
title: string,
|
||||
description: string,
|
||||
url: string,
|
||||
ogImage: string
|
||||
ogImage: string,
|
||||
}
|
||||
|
||||
export default Head
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Head from './head'
|
|||
import Nav from './nav'
|
||||
import Title from './title'
|
||||
|
||||
function Header ({ path, pageTitle, ogImage }) {
|
||||
function Header({ path, pageTitle, ogImage }) {
|
||||
return (
|
||||
<>
|
||||
<Head title={pageTitle} ogImage={ogImage} />
|
||||
|
|
@ -138,7 +138,7 @@ function Header ({ path, pageTitle, ogImage }) {
|
|||
Header.propTypes = {
|
||||
path: PropTypes.string,
|
||||
pageTitle: PropTypes.string,
|
||||
ogImage: PropTypes.string
|
||||
ogImage: PropTypes.string,
|
||||
}
|
||||
|
||||
export default Header
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import PublishedAt from '../utils/published-at'
|
|||
import blogposts from '../../posts/index'
|
||||
import NextPrevPost from '../next-prev-post'
|
||||
|
||||
function BlogPost ({ path, meta, children }) {
|
||||
function BlogPost({ path, meta, children }) {
|
||||
const currentPostIndex = blogposts
|
||||
.map(({ title }) => title)
|
||||
.indexOf(meta.title)
|
||||
|
|
@ -16,41 +16,41 @@ function BlogPost ({ path, meta, children }) {
|
|||
return (
|
||||
<Layout pageTitle={meta.title} ogImage={meta.image}>
|
||||
<SyntaxHighlight />
|
||||
<article className='h-entry'>
|
||||
<article className="h-entry">
|
||||
<header>
|
||||
<h1 className='p-name'>{meta.title}</h1>
|
||||
<h1 className="p-name">{meta.title}</h1>
|
||||
|
||||
<div>
|
||||
<PublishedAt date={meta.publishedAt} link={path} />
|
||||
|
||||
<Link href='/about'>
|
||||
<Link href="/about">
|
||||
<a
|
||||
color='#aaa'
|
||||
rel='author'
|
||||
className='p-author h-card'
|
||||
href='/about'
|
||||
color="#aaa"
|
||||
rel="author"
|
||||
className="p-author h-card"
|
||||
href="/about"
|
||||
>
|
||||
{siteMeta.author}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
<div className='e-content'>{children}</div>
|
||||
<div className="e-content">{children}</div>
|
||||
<footer>
|
||||
{(previousPost || nextPost) && (
|
||||
<div className='post-pagination'>
|
||||
<div className="post-pagination">
|
||||
{previousPost && (
|
||||
<NextPrevPost
|
||||
title={previousPost.title}
|
||||
path={previousPost.path}
|
||||
position='previous'
|
||||
position="previous"
|
||||
/>
|
||||
)}
|
||||
{nextPost && (
|
||||
<NextPrevPost
|
||||
title={nextPost.title}
|
||||
path={nextPost.path}
|
||||
position='next'
|
||||
position="next"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import Header from '../header'
|
|||
import Footer from '../footer'
|
||||
import Container from '../container'
|
||||
|
||||
function Layout ({ path, children, pageTitle, ogImage }) {
|
||||
function Layout({ path, children, pageTitle, ogImage }) {
|
||||
return (
|
||||
<Container>
|
||||
<Header path={path} pageTitle={pageTitle} ogImage={ogImage} />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Layout from './default'
|
||||
|
||||
function Page ({ meta, children }) {
|
||||
function Page({ meta, children }) {
|
||||
return (
|
||||
<Layout pageTitle={meta.title}>
|
||||
<article>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import Link from 'next/link'
|
|||
|
||||
const Nav = () => (
|
||||
<nav>
|
||||
<Link href='/about'>
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>
|
||||
<style jsx>{`
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const NextPrevPost = ({ title, path, position }) => {
|
|||
NextPrevPost.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
path: PropTypes.string.isRequired,
|
||||
position: PropTypes.oneOf(['next', 'previous'])
|
||||
position: PropTypes.oneOf(['next', 'previous']),
|
||||
}
|
||||
|
||||
export default NextPrevPost
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
import { siteMeta } from '../blog.config'
|
||||
|
||||
const Profile = () => (
|
||||
<div className='h-card profile'>
|
||||
<img className='u-photo' src='/static/_jolvera.png' alt={siteMeta.author} />
|
||||
<div className="h-card profile">
|
||||
<img className="u-photo" src="/static/_jolvera.png" alt={siteMeta.author} />
|
||||
|
||||
<div>
|
||||
<p>
|
||||
Hi, I'm{' '}
|
||||
<a className='u-url p-name' href={siteMeta.siteUrl} rel='me'>
|
||||
<a className="u-url p-name" href={siteMeta.siteUrl} rel="me">
|
||||
{siteMeta.author}
|
||||
</a>
|
||||
</p>
|
||||
<p className='p-note'>
|
||||
<p className="p-note">
|
||||
I'm a frontend developer & web standards enthusiastic.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ const Title = ({ path }) => (
|
|||
</h1>
|
||||
) : (
|
||||
<p>
|
||||
<Link href='/'>
|
||||
<a rel='me'>{siteMeta.title}</a>
|
||||
<Link href="/">
|
||||
<a rel="me">{siteMeta.title}</a>
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@ import React from 'react'
|
|||
import Link from 'next/link'
|
||||
import { parse, format } from 'date-fns'
|
||||
|
||||
function PublishedAt (props) {
|
||||
function PublishedAt(props) {
|
||||
const { link, date } = props
|
||||
return (
|
||||
<>
|
||||
<Link href={link}>
|
||||
<a href={link} className='u-url' mcolor='#aaa' {...props}>
|
||||
<time className='dt-published'>
|
||||
<a href={link} className="u-url" mcolor="#aaa" {...props}>
|
||||
<time className="dt-published">
|
||||
{format(parse(date), 'MMMM DD, YYYY')}
|
||||
</time>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
const withMDX = require('@zeit/next-mdx')({
|
||||
extension: /.mdx?$/,
|
||||
options: {
|
||||
hastPlugins: [require('mdx-prism')]
|
||||
}
|
||||
hastPlugins: [require('mdx-prism')],
|
||||
},
|
||||
})
|
||||
|
||||
module.exports = withMDX({
|
||||
|
|
@ -12,7 +12,7 @@ module.exports = withMDX({
|
|||
// Fixes npm packages that depend on `fs` module
|
||||
config.node = {
|
||||
fs: 'empty',
|
||||
module: 'empty'
|
||||
module: 'empty',
|
||||
}
|
||||
|
||||
config.module.rules.push(
|
||||
|
|
@ -23,18 +23,18 @@ module.exports = withMDX({
|
|||
{
|
||||
loader: require('styled-jsx/webpack').loader,
|
||||
options: {
|
||||
type: 'global'
|
||||
}
|
||||
}
|
||||
]
|
||||
type: 'global',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
use: [
|
||||
{
|
||||
loader: '@svgr/webpack'
|
||||
}
|
||||
]
|
||||
loader: '@svgr/webpack',
|
||||
},
|
||||
],
|
||||
}
|
||||
)
|
||||
|
||||
|
|
@ -49,5 +49,5 @@ module.exports = withMDX({
|
|||
}
|
||||
|
||||
return config
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
|
||||
class MyDocument extends Document {
|
||||
static async getInitialProps (ctx) {
|
||||
static async getInitialProps(ctx) {
|
||||
const initialProps = await Document.getInitialProps(ctx)
|
||||
return { ...initialProps }
|
||||
}
|
||||
|
||||
render () {
|
||||
render() {
|
||||
return (
|
||||
<Html lang='en'>
|
||||
<Html lang="en">
|
||||
<Head />
|
||||
<body>
|
||||
<Main />
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const Blog = ({ router, page = 1 }) => {
|
|||
prelink: '/',
|
||||
current: page,
|
||||
rowsPerPage: siteMeta.postsPerPage,
|
||||
totalResult: blogposts.length
|
||||
totalResult: blogposts.length,
|
||||
})
|
||||
|
||||
const {
|
||||
|
|
@ -20,12 +20,12 @@ const Blog = ({ router, page = 1 }) => {
|
|||
range,
|
||||
next,
|
||||
fromResult,
|
||||
toResult
|
||||
toResult,
|
||||
} = paginator.getPaginationData()
|
||||
const results = _range(fromResult - 1, toResult)
|
||||
|
||||
return (
|
||||
<Layout pageTitle='Blog' path={router.pathname}>
|
||||
<Layout pageTitle="Blog" path={router.pathname}>
|
||||
<header>
|
||||
<h1>Blog</h1>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ module.exports = files
|
|||
return {
|
||||
...meta,
|
||||
path: '/posts/' + file.replace(/\.mdx?$/, ''),
|
||||
index
|
||||
index,
|
||||
}
|
||||
})
|
||||
.filter(meta => meta.published)
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const feed = {
|
|||
author: {
|
||||
name: siteMeta.author,
|
||||
url: siteMeta.siteUrl,
|
||||
avatar: `${siteMeta.siteUrl}/static/_jolvera-avatar.jpg`
|
||||
avatar: `${siteMeta.siteUrl}/static/_jolvera-avatar.jpg`,
|
||||
},
|
||||
items: posts.map(post => ({
|
||||
id: `${siteMeta.siteUrl}${post.path}`,
|
||||
|
|
@ -25,8 +25,8 @@ const feed = {
|
|||
summary: post.summary,
|
||||
image: `${siteMeta.siteUrl}${post.image}`,
|
||||
date_published: post.publishedAt,
|
||||
author: siteMeta.author
|
||||
}))
|
||||
author: siteMeta.author,
|
||||
})),
|
||||
}
|
||||
|
||||
fs.writeFileSync(path.join('./.next/static', 'feed.json'), JSON.stringify(feed))
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
'use strict'
|
||||
const { Action, api } = require('actionhero')
|
||||
|
||||
module.exports = class CreateChatRoom extends Action {
|
||||
constructor () {
|
||||
constructor() {
|
||||
super()
|
||||
this.name = 'render'
|
||||
this.description = 'I render the next.js react website'
|
||||
}
|
||||
|
||||
async run (data) {
|
||||
async run(data) {
|
||||
data.toRender = false
|
||||
return api.next.render(data.connection)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
'use strict'
|
||||
|
||||
const path = require('path')
|
||||
|
||||
exports['default'] = {
|
||||
|
|
@ -55,15 +53,15 @@ exports['default'] = {
|
|||
cli: [path.join(__dirname, '/../bin')],
|
||||
initializer: [path.join(__dirname, '/../initializers')],
|
||||
plugin: [path.join(__dirname, '/../node_modules')],
|
||||
locale: [path.join(__dirname, '/../locales')]
|
||||
locale: [path.join(__dirname, '/../locales')],
|
||||
},
|
||||
// hash containing chat rooms you wish to be created at server boot
|
||||
startingChatRooms: {
|
||||
// format is {roomName: {authKey, authValue}}
|
||||
// 'secureRoom': {authorized: true},
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
exports.test = {
|
||||
|
|
@ -74,24 +72,24 @@ exports.test = {
|
|||
developmentMode: true,
|
||||
startingChatRooms: {
|
||||
defaultRoom: {},
|
||||
otherRoom: {}
|
||||
otherRoom: {},
|
||||
},
|
||||
paths: {
|
||||
locale: [
|
||||
// require('os').tmpdir() + require('path').sep + 'locales',
|
||||
path.join(__dirname, '/../locales')
|
||||
]
|
||||
path.join(__dirname, '/../locales'),
|
||||
],
|
||||
},
|
||||
rpcTimeout: 3000
|
||||
rpcTimeout: 3000,
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
exports.production = {
|
||||
general: api => {
|
||||
return {
|
||||
fileRequestLogLevel: 'debug',
|
||||
developmentMode: false
|
||||
developmentMode: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
'use strict'
|
||||
|
||||
// error messages can be strings of objects
|
||||
exports['default'] = {
|
||||
errors: api => {
|
||||
|
|
@ -39,8 +37,8 @@ exports['default'] = {
|
|||
} else {
|
||||
return error
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ///////////
|
||||
|
|
@ -59,7 +57,7 @@ exports['default'] = {
|
|||
missingParams: (data, missingParams) => {
|
||||
return data.connection.localize([
|
||||
'actionhero.errors.missingParams',
|
||||
{ param: missingParams[0] }
|
||||
{ param: missingParams[0] },
|
||||
])
|
||||
},
|
||||
|
||||
|
|
@ -72,7 +70,7 @@ exports['default'] = {
|
|||
unsupportedServerType: data => {
|
||||
return data.connection.localize([
|
||||
'actionhero.errors.unsupportedServerType',
|
||||
{ type: data.connection.type }
|
||||
{ type: data.connection.type },
|
||||
])
|
||||
},
|
||||
|
||||
|
|
@ -92,7 +90,7 @@ exports['default'] = {
|
|||
dataLengthTooLarge: (maxLength, receivedLength) => {
|
||||
return api.i18n.localize([
|
||||
'actionhero.errors.dataLengthTooLarge',
|
||||
{ maxLength: maxLength, receivedLength: receivedLength }
|
||||
{ maxLength: maxLength, receivedLength: receivedLength },
|
||||
])
|
||||
},
|
||||
|
||||
|
|
@ -115,7 +113,7 @@ exports['default'] = {
|
|||
fileReadError: (connection, error) => {
|
||||
return connection.localize([
|
||||
'actionhero.errors.fileReadError',
|
||||
{ error: String(error) }
|
||||
{ error: String(error) },
|
||||
])
|
||||
},
|
||||
|
||||
|
|
@ -126,14 +124,14 @@ exports['default'] = {
|
|||
verbNotFound: (connection, verb) => {
|
||||
return connection.localize([
|
||||
'actionhero.errors.verbNotFound',
|
||||
{ verb: verb }
|
||||
{ verb: verb },
|
||||
])
|
||||
},
|
||||
|
||||
verbNotAllowed: (connection, verb) => {
|
||||
return connection.localize([
|
||||
'actionhero.errors.verbNotAllowed',
|
||||
{ verb: verb }
|
||||
{ verb: verb },
|
||||
])
|
||||
},
|
||||
|
||||
|
|
@ -144,14 +142,14 @@ exports['default'] = {
|
|||
connectionNotInRoom: (connection, room) => {
|
||||
return connection.localize([
|
||||
'actionhero.errors.connectionNotInRoom',
|
||||
{ room: room }
|
||||
{ room: room },
|
||||
])
|
||||
},
|
||||
|
||||
connectionAlreadyInRoom: (connection, room) => {
|
||||
return connection.localize([
|
||||
'actionhero.errors.connectionAlreadyInRoom',
|
||||
{ room: room }
|
||||
{ room: room },
|
||||
])
|
||||
},
|
||||
|
||||
|
|
@ -171,7 +169,7 @@ exports['default'] = {
|
|||
|
||||
connectionRoomRequired: room => {
|
||||
return api.i18n.localize('actionhero.errors.connectionRoomRequired')
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,15 +22,15 @@ exports['default'] = {
|
|||
// the name of the method by which to determine the connection's locale
|
||||
// by default, every request will be in the 'en' locale
|
||||
// this method will be called witin the localiazation middleware on all requests
|
||||
determineConnectionLocale: 'api.i18n.determineConnectionLocale'
|
||||
determineConnectionLocale: 'api.i18n.determineConnectionLocale',
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
exports.test = {
|
||||
i18n: api => {
|
||||
return {
|
||||
updateFiles: true
|
||||
updateFiles: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
'use strict'
|
||||
|
||||
const fs = require('fs')
|
||||
const cluster = require('cluster')
|
||||
|
||||
|
|
@ -9,19 +7,19 @@ exports['default'] = {
|
|||
|
||||
// console logger
|
||||
if (cluster.isMaster) {
|
||||
logger.transports.push(function (api, winston) {
|
||||
logger.transports.push(function(api, winston) {
|
||||
return new winston.transports.Console({
|
||||
colorize: true,
|
||||
level: 'info',
|
||||
timestamp: function () {
|
||||
timestamp: function() {
|
||||
return api.id + ' @ ' + new Date().toISOString()
|
||||
}
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// file logger
|
||||
logger.transports.push(function (api, winston) {
|
||||
logger.transports.push(function(api, winston) {
|
||||
if (api.config.general.paths.log.length === 1) {
|
||||
const logDirectory = api.config.general.paths.log[0]
|
||||
try {
|
||||
|
|
@ -37,9 +35,9 @@ exports['default'] = {
|
|||
filename:
|
||||
api.config.general.paths.log[0] + '/' + api.pids.title + '.log',
|
||||
level: 'info',
|
||||
timestamp: function () {
|
||||
timestamp: function() {
|
||||
return api.id + ' @ ' + new Date().toISOString()
|
||||
}
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -53,13 +51,13 @@ exports['default'] = {
|
|||
// logger.colors = {good: 'blue', bad: 'red'};
|
||||
|
||||
return logger
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
exports.test = {
|
||||
logger: api => {
|
||||
return {
|
||||
transports: null
|
||||
transports: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,5 +23,5 @@ exports['default'] = {
|
|||
*/
|
||||
|
||||
return {}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ exports['default'] = {
|
|||
// args: The arguments to pass to the constructor
|
||||
// buildNew: is it `new konstructor()` or just `konstructor()`?
|
||||
|
||||
function retryStrategy (times) {
|
||||
function retryStrategy(times) {
|
||||
if (times === 1) {
|
||||
const error =
|
||||
'Unable to connect to Redis - please check your Redis config!'
|
||||
|
|
@ -42,10 +42,10 @@ exports['default'] = {
|
|||
host: host,
|
||||
password: password,
|
||||
db: db,
|
||||
retryStrategy: retryStrategy
|
||||
}
|
||||
retryStrategy: retryStrategy,
|
||||
},
|
||||
],
|
||||
buildNew: true
|
||||
buildNew: true,
|
||||
},
|
||||
subscriber: {
|
||||
konstructor: require('ioredis'),
|
||||
|
|
@ -55,10 +55,10 @@ exports['default'] = {
|
|||
host: host,
|
||||
password: password,
|
||||
db: db,
|
||||
retryStrategy: retryStrategy
|
||||
}
|
||||
retryStrategy: retryStrategy,
|
||||
},
|
||||
],
|
||||
buildNew: true
|
||||
buildNew: true,
|
||||
},
|
||||
tasks: {
|
||||
konstructor: require('ioredis'),
|
||||
|
|
@ -68,11 +68,11 @@ exports['default'] = {
|
|||
host: host,
|
||||
password: password,
|
||||
db: db,
|
||||
retryStrategy: retryStrategy
|
||||
}
|
||||
retryStrategy: retryStrategy,
|
||||
},
|
||||
],
|
||||
buildNew: true
|
||||
}
|
||||
buildNew: true,
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
exports['default'] = {
|
||||
routes: api => {
|
||||
return {
|
||||
get: [{ path: '/', matchTrailingPathParts: true, action: 'render' }]
|
||||
get: [{ path: '/', matchTrailingPathParts: true, action: 'render' }],
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
'use strict'
|
||||
|
||||
exports['default'] = {
|
||||
servers: {
|
||||
socket: api => {
|
||||
|
|
@ -18,10 +16,10 @@ exports['default'] = {
|
|||
// Delimiter string for incoming messages
|
||||
delimiter: '\n',
|
||||
// Maximum incoming message string length in Bytes (use 0 for Infinite)
|
||||
maxDataLength: 0
|
||||
maxDataLength: 0,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
exports.test = {
|
||||
|
|
@ -30,8 +28,8 @@ exports.test = {
|
|||
return {
|
||||
enabled: true,
|
||||
port: 1001 + (process.pid % 64535),
|
||||
secure: false
|
||||
secure: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
'use strict'
|
||||
|
||||
const os = require('os')
|
||||
|
||||
exports['default'] = {
|
||||
|
|
@ -27,7 +25,7 @@ exports['default'] = {
|
|||
'Access-Control-Allow-Origin': '*',
|
||||
'Access-Control-Allow-Methods':
|
||||
'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS, TRACE',
|
||||
'Access-Control-Allow-Headers': 'Content-Type'
|
||||
'Access-Control-Allow-Headers': 'Content-Type',
|
||||
},
|
||||
// Route that actions will be served from; secondary route against this route will be treated as actions,
|
||||
// IE: /api/?action=test == /api/test/
|
||||
|
|
@ -61,15 +59,15 @@ exports['default'] = {
|
|||
onlyStaticElements: false,
|
||||
settings: {
|
||||
path: '/',
|
||||
expires: 3600000
|
||||
}
|
||||
expires: 3600000,
|
||||
},
|
||||
},
|
||||
// Options to be applied to incoming file uploads.
|
||||
// More options and details at https://github.com/felixge/node-formidable
|
||||
formOptions: {
|
||||
uploadDir: os.tmpdir(),
|
||||
keepExtensions: false,
|
||||
maxFieldsSize: 1024 * 1024 * 100
|
||||
maxFieldsSize: 1024 * 1024 * 100,
|
||||
},
|
||||
// Should we pad JSON responses with whitespace to make them more human-readable?
|
||||
// set to null to disable
|
||||
|
|
@ -77,7 +75,7 @@ exports['default'] = {
|
|||
// Options to configure metadata in responses
|
||||
metadataOptions: {
|
||||
serverInformation: true,
|
||||
requesterInformation: true
|
||||
requesterInformation: true,
|
||||
},
|
||||
// When true, returnErrorCodes will modify the response header for http(s) clients if connection.error is not null.
|
||||
// You can also set connection.rawConnection.responseHttpCode to specify a code per request.
|
||||
|
|
@ -87,10 +85,10 @@ exports['default'] = {
|
|||
compress: false,
|
||||
// options to pass to the query parser
|
||||
// learn more about the options @ https://github.com/hapijs/qs
|
||||
queryParseOptions: {}
|
||||
queryParseOptions: {},
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
exports.production = {
|
||||
|
|
@ -100,11 +98,11 @@ exports.production = {
|
|||
padding: null,
|
||||
metadataOptions: {
|
||||
serverInformation: false,
|
||||
requesterInformation: false
|
||||
}
|
||||
requesterInformation: false,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
exports.test = {
|
||||
|
|
@ -116,9 +114,9 @@ exports.test = {
|
|||
matchExtensionMime: true,
|
||||
metadataOptions: {
|
||||
serverInformation: true,
|
||||
requesterInformation: true
|
||||
}
|
||||
requesterInformation: true,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
'use strict'
|
||||
|
||||
// Note that to use the websocket server, you also need the web server enabled
|
||||
|
||||
exports['default'] = {
|
||||
|
|
@ -36,7 +34,7 @@ exports['default'] = {
|
|||
|
||||
// websocket Client Options:
|
||||
client: {
|
||||
apiPath: '/api' // the api base endpoint on your actionhero server
|
||||
apiPath: '/api', // the api base endpoint on your actionhero server
|
||||
// reconnect: {},
|
||||
// timeout: 10000,
|
||||
// ping: 25000,
|
||||
|
|
@ -47,16 +45,16 @@ exports['default'] = {
|
|||
// network: true,
|
||||
// transport: {},
|
||||
// queueSize: Infinity,
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
exports['test'] = {
|
||||
servers: {
|
||||
websocket: api => {
|
||||
return { clientUrl: null }
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ exports['default'] = {
|
|||
job: 'debug',
|
||||
pause: 'debug',
|
||||
internalError: 'error',
|
||||
multiWorkerAction: 'debug'
|
||||
multiWorkerAction: 'debug',
|
||||
},
|
||||
// Logging levels of the task scheduler
|
||||
schedulerLogging: {
|
||||
|
|
@ -26,7 +26,7 @@ exports['default'] = {
|
|||
enqueue: 'debug',
|
||||
reEnqueue: 'debug',
|
||||
working_timestamp: 'debug',
|
||||
transferred_job: 'debug'
|
||||
transferred_job: 'debug',
|
||||
},
|
||||
// how long to sleep between jobs / scheduler checks
|
||||
timeout: 5000,
|
||||
|
|
@ -45,17 +45,17 @@ exports['default'] = {
|
|||
resque_overrides: {
|
||||
queue: null,
|
||||
multiWorker: null,
|
||||
scheduler: null
|
||||
}
|
||||
scheduler: null,
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
exports.test = {
|
||||
tasks: api => {
|
||||
return {
|
||||
timeout: 100,
|
||||
checkTimeout: 50
|
||||
checkTimeout: 50,
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
'use strict'
|
||||
const { Initializer, api } = require('actionhero')
|
||||
const next = require('next')
|
||||
|
||||
module.exports = class NextInitializer extends Initializer {
|
||||
constructor () {
|
||||
constructor() {
|
||||
super()
|
||||
this.name = 'next'
|
||||
}
|
||||
|
||||
async initialize () {
|
||||
async initialize() {
|
||||
api.next = {
|
||||
render: async connection => {
|
||||
if (connection.type !== 'web') {
|
||||
|
|
@ -17,7 +16,7 @@ module.exports = class NextInitializer extends Initializer {
|
|||
const req = connection.rawConnection.req
|
||||
const res = connection.rawConnection.res
|
||||
return api.next.handle(req, res)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
api.next.dev = api.env === 'development'
|
||||
|
|
@ -30,7 +29,7 @@ module.exports = class NextInitializer extends Initializer {
|
|||
await api.next.app.prepare()
|
||||
}
|
||||
|
||||
async stop () {
|
||||
async stop() {
|
||||
await api.next.app.close()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import Link from 'next/link'
|
|||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/b' as='/a'>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/a' as='/b'>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -4,17 +4,17 @@ import Link from 'next/link'
|
|||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/b' as='/a'>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/a' as='/b'>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={{ pathname: '/posts', query: { id: '2' } }} as='/posts/2'>
|
||||
<Link href={{ pathname: '/posts', query: { id: '2' } }} as="/posts/2">
|
||||
<a>post #2</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React, { Component } from 'react'
|
||||
|
||||
export default class extends Component {
|
||||
static getInitialProps ({ query: { id } }) {
|
||||
static getInitialProps({ query: { id } }) {
|
||||
return { postId: id }
|
||||
}
|
||||
|
||||
render () {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>My blog post #{this.props.postId}</h1>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import Link from 'next/link'
|
|||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/b' as='/a'>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/a' as='/b'>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import Link from 'next/link'
|
|||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/b' as='/a'>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/a' as='/b'>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -3,45 +3,45 @@ const Hapi = require('@hapi/hapi')
|
|||
const {
|
||||
pathWrapper,
|
||||
defaultHandlerWrapper,
|
||||
nextHandlerWrapper
|
||||
nextHandlerWrapper,
|
||||
} = require('./next-wrapper')
|
||||
|
||||
const port = parseInt(process.env.PORT, 10) || 3000
|
||||
const dev = process.env.NODE_ENV !== 'production'
|
||||
const app = next({ dev })
|
||||
const server = new Hapi.Server({
|
||||
port
|
||||
port,
|
||||
})
|
||||
|
||||
app.prepare().then(async () => {
|
||||
server.route({
|
||||
method: 'GET',
|
||||
path: '/a',
|
||||
handler: pathWrapper(app, '/a')
|
||||
handler: pathWrapper(app, '/a'),
|
||||
})
|
||||
|
||||
server.route({
|
||||
method: 'GET',
|
||||
path: '/b',
|
||||
handler: pathWrapper(app, '/b')
|
||||
handler: pathWrapper(app, '/b'),
|
||||
})
|
||||
|
||||
server.route({
|
||||
method: 'GET',
|
||||
path: '/_next/{p*}' /* next specific routes */,
|
||||
handler: nextHandlerWrapper(app)
|
||||
handler: nextHandlerWrapper(app),
|
||||
})
|
||||
|
||||
server.route({
|
||||
method: 'GET',
|
||||
path: '/static/{p*}' /* use next to handle static files */,
|
||||
handler: nextHandlerWrapper(app)
|
||||
handler: nextHandlerWrapper(app),
|
||||
})
|
||||
|
||||
server.route({
|
||||
method: '*',
|
||||
path: '/{p*}' /* catch all route */,
|
||||
handler: defaultHandlerWrapper(app)
|
||||
handler: defaultHandlerWrapper(app),
|
||||
})
|
||||
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import Link from 'next/link'
|
|||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/b' as='/a'>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/a' as='/b'>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import Link from 'next/link'
|
|||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/b' as='/a'>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/a' as='/b'>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const handle = app.getRequestHandler()
|
|||
const isA = req => match(req, '/a')
|
||||
const isB = req => match(req, '/b')
|
||||
|
||||
async function main (req, res) {
|
||||
async function main(req, res) {
|
||||
const parsedUrl = parse(req.url, true)
|
||||
const { query } = parsedUrl
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ async function main (req, res) {
|
|||
return handle(req, res, parsedUrl)
|
||||
}
|
||||
|
||||
async function setup (handler) {
|
||||
async function setup(handler) {
|
||||
await app.prepare()
|
||||
return handler
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import Link from 'next/link'
|
|||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/b' as='/a'>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/a' as='/b'>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import Link from 'next/link'
|
|||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/b' as='/a'>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/a' as='/b'>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import Link from 'next/link'
|
|||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/b' as='/a'>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/a' as='/b'>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import Link from 'next/link'
|
|||
export default () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/b' as='/a'>
|
||||
<Link href="/b" as="/a">
|
||||
<a>a</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/a' as='/b'>
|
||||
<Link href="/a" as="/b">
|
||||
<a>b</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import React from 'react'
|
|||
import Link from 'next/link'
|
||||
import fetch from 'isomorphic-unfetch'
|
||||
|
||||
function Index (props) {
|
||||
function Index(props) {
|
||||
return (
|
||||
<div>
|
||||
<p>Next.js has {props.stars} ⭐️</p>
|
||||
<Link href='/preact'>
|
||||
<Link href="/preact">
|
||||
<a>How about preact?</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import React from 'react'
|
|||
import Link from 'next/link'
|
||||
import fetch from 'isomorphic-unfetch'
|
||||
|
||||
function Preact (props) {
|
||||
function Preact(props) {
|
||||
return (
|
||||
<div>
|
||||
<p>Preact has {props.stars} ⭐</p>
|
||||
<Link href='/'>
|
||||
<Link href="/">
|
||||
<a>I bet Next.js has more stars (?)</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,22 +4,22 @@ const Header = () => (
|
|||
<header>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/'>
|
||||
<Link href="/">
|
||||
<a>Home</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/about'>
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/post/[id]' as='/post/first'>
|
||||
<Link href="/post/[id]" as="/post/first">
|
||||
<a>First Post</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/post/[id]' as='/post/second'>
|
||||
<Link href="/post/[id]" as="/post/second">
|
||||
<a>Second Post</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@ const Post = () => {
|
|||
<h1>Post: {id}</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href='/post/[id]/[comment]' as={`/post/${id}/first-comment`}>
|
||||
<Link href="/post/[id]/[comment]" as={`/post/${id}/first-comment`}>
|
||||
<a>First comment</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='/post/[id]/[comment]' as={`/post/${id}/second-comment`}>
|
||||
<Link href="/post/[id]/[comment]" as={`/post/${id}/second-comment`}>
|
||||
<a>Second comment</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Col, Row } from 'react-bootstrap'
|
|||
import { connect } from 'react-redux'
|
||||
|
||||
class DisplayForm extends Component {
|
||||
render () {
|
||||
render() {
|
||||
const { state } = this.props
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -19,7 +19,7 @@ class DisplayForm extends Component {
|
|||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
state
|
||||
state,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,16 +7,16 @@ const Social = () => {
|
|||
<div>
|
||||
<Row>
|
||||
<Col lg={8}>
|
||||
<Input controlLabel='Facebook' title='social' name='facebook' />
|
||||
<Input controlLabel="Facebook" title="social" name="facebook" />
|
||||
</Col>
|
||||
<Col lg={8}>
|
||||
<Input controlLabel='Instagram' title='social' name='instagram' />
|
||||
<Input controlLabel="Instagram" title="social" name="instagram" />
|
||||
</Col>
|
||||
<Col lg={8}>
|
||||
<Input controlLabel='Twitter' title='social' name='twitter' />
|
||||
<Input controlLabel="Twitter" title="social" name="twitter" />
|
||||
</Col>
|
||||
<Col lg={8}>
|
||||
<Input controlLabel='GitHub' title='social' name='github' />
|
||||
<Input controlLabel="GitHub" title="social" name="github" />
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,20 +7,20 @@ const UserForm = () => {
|
|||
<div>
|
||||
<Row>
|
||||
<Col lg={8} lgOffset={4}>
|
||||
<Input controlLabel='Name' title='user' name='name' />
|
||||
<Input controlLabel="Name" title="user" name="name" />
|
||||
</Col>
|
||||
<Col lg={8} lgOffset={4}>
|
||||
<Input controlLabel='Last name' title='user' name='lastName' />
|
||||
<Input controlLabel="Last name" title="user" name="lastName" />
|
||||
</Col>
|
||||
<Col lg={8} lgOffset={4}>
|
||||
<Input controlLabel='Email' type='email' title='user' name='email' />
|
||||
<Input controlLabel="Email" type="email" title="user" name="email" />
|
||||
</Col>
|
||||
<Col lg={8} lgOffset={4}>
|
||||
<Input
|
||||
controlLabel='Password'
|
||||
type='password'
|
||||
title='user'
|
||||
name='password'
|
||||
controlLabel="Password"
|
||||
type="password"
|
||||
title="user"
|
||||
name="password"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@ import UserForm from './UserForm'
|
|||
import Social from './Social'
|
||||
|
||||
class Main extends Component {
|
||||
render () {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Form Handler</title>
|
||||
<link
|
||||
rel='stylesheet'
|
||||
href='https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css'
|
||||
rel="stylesheet"
|
||||
href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"
|
||||
/>
|
||||
</Head>
|
||||
<Header />
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@ class Input extends Component {
|
|||
inputChange(title, name, e.target.value)
|
||||
}
|
||||
|
||||
render () {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<FormGroup controlId='formBasicText'>
|
||||
<FormGroup controlId="formBasicText">
|
||||
<ControlLabel>{this.props.controlLabel}</ControlLabel>
|
||||
<FormControl
|
||||
disabled={this.props.disabled}
|
||||
|
|
@ -31,11 +31,8 @@ class Input extends Component {
|
|||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
inputChange: bindActionCreators(inputChange, dispatch)
|
||||
inputChange: bindActionCreators(inputChange, dispatch),
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
null,
|
||||
mapDispatchToProps
|
||||
)(Input)
|
||||
export default connect(null, mapDispatchToProps)(Input)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import withRedux from 'next-redux-wrapper'
|
|||
import { initStore } from '../store'
|
||||
|
||||
class MyApp extends App {
|
||||
static async getInitialProps ({ Component, router, ctx }) {
|
||||
static async getInitialProps({ Component, router, ctx }) {
|
||||
let pageProps = {}
|
||||
|
||||
if (Component.getInitialProps) {
|
||||
|
|
@ -15,7 +15,7 @@ class MyApp extends App {
|
|||
return { pageProps }
|
||||
}
|
||||
|
||||
render () {
|
||||
render() {
|
||||
const { Component, pageProps, store } = this.props
|
||||
return (
|
||||
<Provider store={store}>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue