Skip to content

Commit cfb979a

Browse files
vincentchalamonvincentchalamon
committed
fix: update next template with getStaticPaths
1 parent cf96630 commit cfb979a

File tree

5 files changed

+141
-40
lines changed

5 files changed

+141
-40
lines changed

‎templates/next/components/common/Pagination.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import Link from "next/link";
2+
import { FunctionComponent } from "react";
3+
import { PagedCollection } from "../../types/Collection";
4+
5+
interface Props {
6+
collection: PagedCollection<any>;
7+
}
8+
9+
const Pagination: FunctionComponent<Props> = ({ collection }) => {
10+
const view = collection && collection['{{{hydraPrefix}}}view'];
11+
if (!view) return;
12+
13+
const {
14+
'{{{hydraPrefix}}}first': first,
15+
'{{{hydraPrefix}}}previous': previous,
16+
'{{{hydraPrefix}}}next': next,
17+
'{{{hydraPrefix}}}last': last
18+
} = view;
19+
20+
return (
21+
<nav aria-label="Page navigation">
22+
<Link href={first ? first : '#'}>
23+
<a className={`btn btn-primary${previous ? '' : ' disabled'}`}>
24+
<span aria-hidden="true">&lArr;</span> First
25+
</a>
26+
</Link>
27+
<Link href={previous ? previous : '#'}>
28+
<a className={`btn btn-primary${previous ? '' : ' disabled'}`}>
29+
<span aria-hidden="true">&larr;</span> Previous
30+
</a>
31+
</Link>
32+
<Link href={next ? next : '#'}>
33+
<a className={`btn btn-primary${next ? '' : ' disabled'}`}>
34+
Next <span aria-hidden="true">&rarr;</span>
35+
</a>
36+
</Link>
37+
<Link href={last ? last : '#'}>
38+
<a className={`btn btn-primary${next ? '' : ' disabled'}`}>
39+
Last <span aria-hidden="true">&rArr;</span>
40+
</a>
41+
</Link>
42+
</nav>
43+
);
44+
};
45+
46+
export default Pagination;

‎templates/next/pages/foos/[id]/edit.tsx

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,56 @@
1-
import { NextComponentType, NextPageContext } from 'next';
2-
import { Form } from '../../../components/{{{lc}}}/Form';
3-
import { {{{ucf}}} } from '../../../types/{{{ucf}}}';
4-
import { fetch } from '../../../utils/dataAccess';
1+
import { GetStaticPaths, GetStaticProps, NextComponentType, NextPageContext } from "next";
2+
import { Form } from "../../../components/{{{lc}}}/Form";
3+
import { {{{ucf}}} } from "../../../types/{{{ucf}}}";
4+
import { fetch } from "../../../utils/dataAccess";
55
import Head from "next/head";
6+
import DefaultErrorPage from "next/error";
67

78
interface Props {
89
{{{lc}}}: {{{ucf}}};
910
};
1011

1112
const Page: NextComponentType<NextPageContext, Props, Props> = ({ {{{lc}}} }) => {
13+
if (!{{{lc}}}) {
14+
return <DefaultErrorPage statusCode={404} />;
15+
}
16+
1217
return (
1318
<div>
1419
<div>
1520
<Head>
16-
<title>{ {{{lc}}} && `Edit {{{ucf}}} ${ {{~lc}}['@id']}`}</title>
21+
<title>{{{{lc}}} && `Edit {{{ucf}}} ${{{~lc}}['@id']}`}</title>
1722
</Head>
1823
</div>
19-
<Form {{{lc}}}={ {{{lc}}} }/>
24+
<Form {{{lc}}}={{{{lc}}}} />
2025
</div>
2126
);
2227
};
2328

24-
Page.getInitialProps = async ({ asPath }: NextPageContext) => {
25-
const {{{lc}}} = await fetch(asPath.replace( '/edit', ''));
29+
export const getStaticProps: GetStaticProps = async ({ params }) => {
30+
return {
31+
props: {
32+
{{{lc}}}: await fetch(`/{{{name}}}/${params.id}`),
33+
},
34+
revalidate: 1,
35+
}
36+
}
2637

27-
return { {{{lc}}} };
28-
};
38+
export const getStaticPaths: GetStaticPaths = async () => {
39+
try {
40+
const response = await fetch("/{{{name}}}");
41+
42+
return {
43+
paths: response.data["hydra:member"].map(({{{lc}}}) => `${{{{lc}}}['@id']}/edit`),
44+
fallback: true,
45+
};
46+
} catch (e) {
47+
console.error(e);
48+
}
49+
50+
return {
51+
paths: [],
52+
fallback: true,
53+
};
54+
}
2955

3056
export default Page;

‎templates/next/pages/foos/[id]/index.tsx

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,58 @@
1-
import { NextComponentType, NextPageContext } from 'next';
2-
import { Show } from '../../../components/{{{lc}}}/Show';
3-
import { {{{ucf}}} } from '../../../types/{{{ucf}}}';
4-
import { fetch } from '../../../utils/dataAccess';
1+
import { GetStaticPaths, GetStaticProps, NextComponentType, NextPageContext } from "next";
2+
import { Show } from "../../../components/{{{lc}}}/Show";
3+
import { {{{ucf}}} } from "../../../types/{{{ucf}}}";
4+
import { fetch } from "../../../utils/dataAccess";
55
import Head from "next/head";
6+
import DefaultErrorPage from "next/error";
67

78
interface Props {
89
{{{lc}}}: {{{ucf}}};
910
};
1011

1112
const Page: NextComponentType<NextPageContext, Props, Props> = ({ {{{lc}}} }) => {
13+
if (!{{{lc}}}) {
14+
return <DefaultErrorPage statusCode={404} />;
15+
}
16+
1217
return (
1318
<div>
1419
<div>
15-
<Head>
16-
<title>{`Show {{{ucf}}} ${ {{~lc}}['@id']}`}</title>
17-
</Head>
18-
</div>
19-
<Show {{{lc}}}={ {{{lc}}} }/>
20+
<Head>
21+
<title>{`Show {{{ucf}}} ${{{~lc}}['@id']}`}</title>
22+
</Head>
23+
</div>
24+
<Show {{{lc}}}={{{{lc}}}} />
2025
</div>
2126
);
2227
};
2328

24-
Page.getInitialProps = async ({ asPath }: NextPageContext) => {
25-
const {{{lc}}} = await fetch(asPath);
29+
export const getStaticProps: GetStaticProps = async ({ params }) => {
30+
const {{{lc}}} = await fetch(`/{{{name}}}/${params.id}`);
2631

27-
return { {{{lc}}} };
28-
};
32+
return {
33+
props: {
34+
{{{lc}}}: {{{lc}}},
35+
},
36+
revalidate: 1,
37+
}
38+
}
39+
40+
export const getStaticPaths: GetStaticPaths = async () => {
41+
try {
42+
const response = await fetch("/{{{name}}}");
43+
44+
return {
45+
paths: response.data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => {{{lc}}}['@id']),
46+
fallback: true,
47+
};
48+
} catch (e) {
49+
console.error(e);
50+
}
51+
52+
return {
53+
paths: [],
54+
fallback: true,
55+
};
56+
}
2957

3058
export default Page;

‎templates/next/pages/foos/create.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ const Page: NextComponentType<NextPageContext> = () => (
1111
</div>
1212
<Form />
1313
</div>
14-
)
15-
14+
);
1615

1716
export default Page;

‎templates/next/pages/foos/index.tsx

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
import { NextComponentType, NextPageContext } from 'next';
2-
import { List } from '../../components/{{{lc}}}/List';
3-
import { PagedCollection } from '../../types/Collection';
4-
import { {{{ucf}}} } from '../../types/{{{ucf}}}';
5-
import { fetch } from '../../utils/dataAccess';
1+
import { GetServerSideProps, NextComponentType, NextPageContext } from "next";
2+
import { List } from "../../components/{{{lc}}}/List";
3+
import { PagedCollection } from "../../types/Collection";
4+
import { {{{ucf}}} } from "../../types/{{{ucf}}}";
5+
import { fetch } from "../../utils/dataAccess";
66
import Head from "next/head";
7+
import Pagination from "../../components/common/Pagination";
78

89
interface Props {
910
collection: PagedCollection<{{{ucf}}}>;
10-
}
11+
};
1112

12-
const Page: NextComponentType<NextPageContext, Props, Props> = ({collection}) => (
13-
<div>
14-
<div>
15-
<Head>
16-
<title>{{{ucf}}} List</title>
17-
</Head>
18-
</div>
19-
<List {{{name}}}={collection['{{{hydraPrefix}}}member']}/>
13+
const Page: NextComponentType<NextPageContext, Props, Props> = ({ collection }) => (
14+
<div>
15+
<div>
16+
<Head>
17+
<title>{{{ucf}}} List</title>
18+
</Head>
2019
</div>
20+
<List {{{name}}}={collection['{{{hydraPrefix}}}member']} />
21+
<Pagination collection={collection} />
22+
</div>
2123
);
2224

23-
Page.getInitialProps = async () => {
25+
export const getServerSideProps: GetServerSideProps = async () => {
2426
const collection = await fetch('/{{{name}}}');
2527

2628
return {collection};

0 commit comments

Comments
 (0)