Skip to content

Commit b1c9b97

Browse files
devmrhdevmrh
committed
clean about page
1 parent d172c31 commit b1c9b97

File tree

6 files changed

+313
-157
lines changed

6 files changed

+313
-157
lines changed

‎frontend/lib/apollo.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,29 @@ import { useMemo } from 'react'
55
let apolloClient
66

77

8-
function createApolloClient(initialState) {
9-
return new ApolloClient({
10-
ssrMode: typeof window === 'undefined',
11-
link: new HttpLink({
12-
uri: 'http://localhost:4000/graphql', // Server URL (must be absolute)
13-
credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
14-
}),
15-
cache: new InMemoryCache().restore(initialState || {})
16-
})
17-
}
18-
export const client =
8+
// function createApolloClient(initialState) {
9+
// return new ApolloClient({
10+
// ssrMode: typeof window === 'undefined',
11+
// link: new HttpLink({
12+
// uri: 'http://localhost:4000/graphql', // Server URL (must be absolute)
13+
// credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
14+
// }),
15+
// cache: new InMemoryCache().restore(initialState || {})
16+
// })
17+
// }
18+
export const client = (initialState) =>
1919
new ApolloClient({
2020
ssrMode: typeof window === 'undefined',
2121
link: new HttpLink({
2222
uri: 'http://localhost:4000/graphql', // Server URL (must be absolute)
2323
credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
2424
}),
25-
cache: new InMemoryCache().restore({})
25+
cache: new InMemoryCache().restore(initialState || {})
2626
})
2727

2828

2929
export function initializeApollo(initialState = null) {
30-
const _apolloClient = apolloClient ?? createApolloClient(initialState)
30+
const _apolloClient = apolloClient ?? client(initialState)
3131

3232
// If your page has Next.js data fetching methods that use Apollo Client, the initial state
3333
// get hydrated here

‎frontend/pages/_app.tsx‎

Lines changed: 127 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,134 @@
1+
import'../style.css'
2+
3+
import { ThemeProvider, createGlobalStyle } from "styled-components";
4+
5+
import { ApolloClient } from "@apollo/client";
16
import { ApolloProvider } from "@apollo/react-hooks";
2-
import { Provider } from "react-redux";
3-
//import Home from '!/containers/home';
7+
import Head from "next/head";
8+
import Header from '../components/Layouts/Header';
9+
import { NormalizedCache } from "apollo-boost";
10+
import { Provider } from 'react-redux'
411
import React from "react";
5-
import { getDataFromTree } from "react-apollo-graphql";
6-
import { initializeApollo } from "../lib/apollo";
7-
import { initializeStore } from "../lib/redux";
8-
9-
//import { ApolloProvider } from '@apollo/client';
10-
11-
/**
12-
* Component to show the home container.
13-
*/
14-
class App extends React.Component {
15-
static async getInitialProps({ Component, ctx }) {
16-
const pageProps = Component.getInitialProps
17-
? await Component.getInitialProps(ctx)
18-
: {};
19-
20-
//Anything returned here can be access by the client
21-
// return {pageProps: pageProps};
22-
23-
let serverState = {};
24-
if (!process.browser) {
25-
const apollo = initializeApollo();
26-
const redux = initializeStore(apollo);
27-
// Run all graphql queries
28-
const app = (
29-
<Provider store={redux}>
30-
<ApolloProvider client={apollo}>
31-
<Component {...pageProps} />
32-
</ApolloProvider>
33-
</Provider>
34-
);
35-
await getDataFromTree(app);
36-
const state = redux.getState();
37-
serverState = {
38-
apollo: {
39-
// Make sure to only include Apollo's data state
40-
data: state.apollo.data,
41-
},
12+
import { useApollo } from '../lib/apollo'
13+
import { useStore } from '../lib/redux'
14+
import withApollo from "../hooks/withApollo";
15+
//import App from "next/app";
16+
import withRedux from 'next-redux-wrapper';
17+
import { wrapper } from '../store/store';
18+
import App, {AppInitialProps, AppContext} from 'next/app';
19+
export interface IThem {
20+
niceBlack: string;
21+
}
22+
23+
export interface IThemeWrapper {
24+
theme: IThem;
25+
}
26+
27+
export const theme: IThem = {
28+
niceBlack: "#001F3F",
29+
};
30+
31+
const GlobalStyle = createGlobalStyle<IThemeWrapper>`
32+
body {
33+
margin: 0 auto;
34+
color: ${(props) => props.theme.niceBlack}
35+
}
36+
37+
.overlay {
38+
position: fixed;
39+
display: block;
40+
overflow: auto;
41+
width: 100%;
42+
height: 100%;
43+
top: 0;
44+
left: 0;
45+
right: 0;
46+
bottom: 0;
47+
background-color: rgba(0,0,0,0.5);
48+
z-index: 999;
49+
cursor: pointer;
50+
}
51+
52+
.content {
53+
margin: 15% auto;
54+
background-color: white;
55+
border-radius: 0.25rem;
56+
width: 50vw;
57+
padding: 2rem;
58+
position: relative;
59+
}
60+
61+
62+
`;
63+
64+
interface IProps {
65+
apollo: ApolloClient<NormalizedCache>;
66+
}
67+
68+
69+
// const App = ({ Component, pageProps }) => {
70+
// //const store = useStore(pageProps.initialReduxState)
71+
// const apolloClient = useApollo(pageProps.initialApolloState)
72+
// const store = useStore(pageProps.initialReduxState)
73+
// // console.log(apolloClient);
74+
// return (
75+
// <React.Fragment>
76+
// <Head>
77+
// <title>GraphQL</title>
78+
// <meta name="viewport" content="width=device-width, initial-scale=1" />
79+
// </Head>
80+
// {/* adds the apollo provider to provide it's children with the apollo scope. */}
81+
// <Provider store={store}>
82+
// <ApolloProvider client={apolloClient}>
83+
// <ThemeProvider theme={theme}>
84+
// <GlobalStyle />
85+
// <Header></Header>
86+
// <Component {...pageProps} />
87+
// </ThemeProvider>
88+
// </ApolloProvider>
89+
// </Provider>
90+
// </React.Fragment>
91+
// );
92+
93+
// }
94+
//export default wrapper.withRedux(App)
95+
//export default wrapper.withRedux(App);
96+
// before exporting our App we wrapp it with our own withApollo provider to have access to the our rehydrated apollo client.
97+
//export default withApollo(MyApp);
98+
99+
100+
101+
102+
103+
class WrappedApp extends App<AppInitialProps> {
104+
public static getInitialProps = async ({Component, ctx}: AppContext) => {
105+
// Keep in mind that this will be called twice on server, one for page and second for error page
106+
ctx.store.dispatch({type: 'APP', payload: 'was set in _app'});
107+
108+
return {
109+
pageProps: {
110+
// Call page-level getInitialProps
111+
...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
112+
// Some custom thing for all pages
113+
pageProps: ctx.pathname,
114+
},
42115
};
43-
}
44-
return {
45-
serverState,
46-
pageProps ,
47-
};
48-
}
116+
};
117+
118+
public render() {
119+
const {Component, pageProps} = this.props;
120+
// const apolloClient = useApollo(pageProps.initialApolloState)
49121

50-
// constructor(props) {
51-
// super(props);
52-
// this.apollo = initializeApollo();
53-
// this.store = initializeStore(this.apollo, props.serverState);
54-
// }
55-
56-
render() {
57-
const { Component, pageProps, store } = this.props;
58-
const apollo = initializeApollo();
59-
const redux = initializeStore(apollo);
60-
return (
61-
<Provider store={store}>
62-
<ApolloProvider client={apollo}>
63-
<Component {...pageProps} />
64-
</ApolloProvider>
65-
</Provider>
66-
);
122+
return (
123+
<ApolloProvider client={useApollo}>
124+
<ThemeProvider theme={theme}>
125+
<GlobalStyle />
126+
<Header></Header>
127+
<Component {...pageProps} />
128+
</ThemeProvider>
129+
</ApolloProvider>
130+
)
67131
}
68132
}
69133

70-
export default App;
134+
export default wrapper.withRedux(WrappedApp);

‎frontend/pages/about.tsx‎

Lines changed: 47 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,68 @@
11
import { connect, useSelector } from "react-redux";
22

3-
import {NextPage} from 'next';
3+
import { NextPage } from "next";
44
import { bindActionCreators } from "redux";
55
import { getUsers } from "../store/count/action";
66
import { useEffect } from "react";
77
import { wrapper } from "../store/store";
8+
import { client } from "../lib/apollo";
9+
import { gql } from "apollo-boost";
10+
import { useQuery } from "@apollo/react-hooks";
811

9-
const About: NextPage = () => {
12+
const About: NextPage = ({pageProps, getStaticProp}) => {
13+
useEffect(() => {
14+
//getUsers();
15+
}, []);
16+
// getUsers()
17+
// const aa = useSelector((state) => state);
18+
//console.log("IM AA", aa);
19+
const {app,users, page} = useSelector(state => state);
1020

11-
// useEffect(() => {
12-
// props.getUsers();
13-
// }, [props]);
14-
//getUsers()
15-
const aa = useSelector(state => state);
16-
console.log(aa);
21+
// console.log("im props", props);
1722
return (
1823
<ul>
19-
{aa?.count?.users?.map((post) => (
24+
{users?.map((post) => (
2025
<>
21-
<li>{post.id}</li>
22-
<li>{post.email}</li>
23-
26+
<li>{post.id}</li>
27+
<li>{post.email}</li>
2428
</>
2529
))}
2630
</ul>
27-
)
28-
29-
}
31+
);
32+
};
3033

3134
export const getStaticProps = wrapper.getStaticProps(async ({ store }) => {
35+
36+
37+
const User_Query = gql`
38+
query {
39+
getUsers {
40+
id
41+
email
42+
}
43+
}
44+
`;
45+
46+
await client().query({ query: User_Query }).then((res) => {
47+
48+
store.dispatch({type: 'GET_USERS', payload: res?.data?.getUsers});
49+
});
50+
51+
52+
return {props: {getStaticProp: 'bar'}};
53+
3254
// store.dispatch(serverRenderClock(true))
3355
//store.dispatch(addCount())
34-
store.dispatch(getUsers());
56+
// await store.dispatch(getUsers());
3557

58+
// const data = await store.getState();
3659

60+
// return {
61+
// props: {
62+
// users: data.count.users,
63+
// },
64+
// revalidate: 1,
65+
// };
3766
});
3867

3968
// const mapDispatchToProps = (dispatch) => {
@@ -47,6 +76,6 @@ export const getStaticProps = wrapper.getStaticProps(async ({ store }) => {
4776
// })
4877

4978

50-
// }
5179
//export default About
52-
export default About;
80+
//export default About;
81+
export default connect(null, null)(About);

‎frontend/store/count/action.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export const addPosts = () => (dispatch) => {
1919
};
2020

2121
export const getUsers = () => async (dispatch, getState, client) => {
22+
//console.log("chcekted");
2223
const User_Query = gql`
2324
query {
2425
getUsers {

0 commit comments

Comments
 (0)