TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SWR for Data fetching on Front, Actual & Corporate pages

Browse Source
This commit is contained in:
Aarni Halinen
2020-12-30 00:17:00 +02:00
parent d3ab0f5e41
commit e487dc68ff
5 changed files with 116 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+13
View File
@@ -5545,6 +5545,11 @@
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
},
"dequal": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
"integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
},
"des.js": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -14237,6 +14242,14 @@
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
"dev": true
},
"swr": {
"version": "0.3.11",
"resolved": "https://registry.npmjs.org/swr/-/swr-0.3.11.tgz",
"integrity": "sha512-ya30LuRGK2R7eDlttnb7tU5EmJYJ+N6ytIOM2j0Hqs0qauJcDjVLDOGy7KmFeH5ivOwLHalFaIyYl2K+SGa7HQ==",
"requires": {
"dequal": "2.0.2"
}
},
"symbol-observable": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
package.json
+2 -1
View File
@@ -96,6 +96,7 @@
"react-markdown": "4.3.1",
"react-mde": "11.0.0",
"shortid": "2.2.14",
"styled-components": "5.1.1"
"styled-components": "5.1.1",
"swr": "0.3.11"
}
}
src/pages/index.tsx
+36 -19
View File
@@ -1,29 +1,46 @@
import React from "react";
import { NextPage, GetServerSideProps } from "next";
import { getEvents } from "@models/Event";
import { getFeed } from "@models/Feed";
import Head from "next/head";
import useSWR from "swr";
import { Event, getEvents } from "@models/Event";
import { Post, getFeed } from "@models/Feed";
import FrontPageView from "@views/FrontPage/FrontPageView";
import Header from "@components/Header";
import Footer from "@components/Footer/Footer";
import PageWrapper from "@views/common/PageWrapper";
const FrontPage: NextPage<React.ComponentProps<typeof FrontPageView>> = (props) => (
<>
<Header />
<FrontPageView {...props} />
<Footer />
</>
);
const eventFetcher = () => getEvents({
onlyNonPast: true,
limit: 4,
});
export const getServerSideProps: GetServerSideProps = async () => {
const events = await getEvents({
onlyNonPast: true,
limit: 4,
});
const feed = await getFeed();
const feedFetcher = () => getFeed();
interface InitialProps {
initialEvents: Event[];
initialFeed: Post[];
}
const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
const eventResult = useSWR("allEvents", eventFetcher, { initialData: initialEvents });
const feedResult = useSWR("feed", feedFetcher, { initialData: initialFeed });
return (
<>
<Head>
<link rel="canonical" href="https://sik.ayy.fi/" />
</Head>
<PageWrapper>
<FrontPageView events={eventResult.data} feed={feedResult.data} />
</PageWrapper>
</>
)};
export const getServerSideProps: GetServerSideProps<InitialProps> = async () => {
const initialEvents = await eventFetcher();
const initialFeed = await getFeed();
return {
props: {
events,
feed,
initialEvents,
initialFeed,
},
};
};
src/pages/kilta/toiminta.tsx
+38 -79
View File
@@ -1,89 +1,48 @@
import React from "react";
import { Helmet } from "react-helmet";
import { StaticContext } from "@server/StaticContext";
import ActualPageView from "@views/ActualPage/ActualPageView";
import { NextPage, GetServerSideProps } from "next";
import Head from "next/head";
import useSWR from "swr";
import { Event, getEvents } from "@models/Event";
import { Post, getFeed } from "@models/Feed";
import ActualPageView from "@views/ActualPage/ActualPageView";
import PageWrapper from "@views/common/PageWrapper";
interface ActualPageProps {
staticContext: StaticContext;
const eventFetcher = () => getEvents({
onlyNonPast: true
});
const feedFetcher = () => getFeed();
interface InitialProps {
initialEvents: Event[];
initialFeed: Post[];
}
interface ActualPageState {
events: Event[];
feed: Post[];
const ActualPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
const eventResult = useSWR("4events", eventFetcher, { initialData: initialEvents });
const feedResult = useSWR("feed", feedFetcher, { initialData: initialFeed });
return (
<>
<Head>
<link rel="canonical" href="https://sik.ayy.fi/kilta/toiminta" />
</Head>
<PageWrapper>
<ActualPageView events={eventResult.data} feed={feedResult.data} />
</PageWrapper>
</>
)
}
class ActualPage extends React.Component<ActualPageProps, ActualPageState> {
constructor(props: ActualPageProps) {
super(props);
const { staticContext } = props;
if (staticContext) {
/* The static context is an object that manages promises when
rendering on the server. If staticContext exists, that means
we have to store all promises in it. Otherwise, operate
normally. See server/index.ts. */
if (staticContext.resolutions.getEvents) {
const events = staticContext.resolutions.getEvents as Event[];
const feed = staticContext.resolutions.getFeed as Post[];
this.state = {
events,
feed,
};
} else {
this.state = {
events: [],
feed: [],
};
const promiseEvents = this.fetchEvents();
const promiseFeed = this.fetchFeed();
staticContext.promises.getEvents = promiseEvents;
staticContext.promises.getFeed = promiseFeed;
}
} else {
this.state = {
events: [],
feed: [],
};
this.fetchEvents();
this.fetchFeed();
}
}
fetchEvents = () => {
const getEventsPromise = getEvents({
onlyNonPast: true,
});
getEventsPromise.then(events => {
this.setState({
events,
});
});
return getEventsPromise;
}
fetchFeed = () => {
const getFeedPromise = getFeed();
getFeedPromise.then(feed => {
this.setState({
feed,
});
});
return getFeedPromise;
}
render() {
return (
<>
<Helmet>
<link rel="canonical" href="https://sik.ayy.fi/kilta/toiminta" />
</Helmet>
<ActualPageView events={this.state.events} feed={this.state.feed} />
</>
)
}
}
export const getServerSideProps: GetServerSideProps<InitialProps> = async () => {
const initialEvents = await eventFetcher();
const initialFeed = await getFeed();
return {
props: {
initialEvents,
initialFeed,
},
};
};
export default ActualPage;
src/pages/yritysyhteistyo.tsx
+27 -7
View File
@@ -1,18 +1,38 @@
import React from "react";
import { Helmet } from "react-helmet";
import { NextPage, GetServerSideProps } from "next";
import Head from "next/head";
import useSWR from "swr";
import { JobAd, getJobAds } from "@models/JobAd";
import CorporatePageView from "@views/CorporatePage/CorporatePageView";
import useFetchJobAds from "@hooks/useFetchJobAds";
import PageWrapper from "@views/common/PageWrapper";
const CorporatePage: React.FC = () => {
const jobAds = useFetchJobAds();
const jobAdFetcher = () => getJobAds();
interface InitialProps {
initialJobAds: JobAd[];
}
const CorporatePage: NextPage<InitialProps> = ({ initialJobAds }) => {
const { data, error } = useSWR("allJobAds", jobAdFetcher, { initialData: initialJobAds })
return (
<>
<Helmet>
<Head>
<link rel="canonical" href="https://sik.ayy.fi/yritysyhteistyo" />
</Helmet>
<CorporatePageView jobAds={jobAds} />
</Head>
<PageWrapper>
<CorporatePageView jobAds={data} />
</PageWrapper>
</>
);
}
export const getServerSideProps: GetServerSideProps<InitialProps> = async () => {
const initialJobAds = await jobAdFetcher();
return {
props: {
initialJobAds
}
}
}
export default CorporatePage;