City page

https://freecode.academy/tasks/cklx91jskd35g0730w0h840q5

next.config.js

@@ -14,21 +14,21 @@ const webpack = (config, options) => {
     })
   )
 
-  config.module.rules.push({
-    test: /\.svg/,
-    use: [
-      options.defaultLoaders.babel,
-      {
-        loader: 'file-loader',
-        options: {
-          limit: 1000,
-          name: '[name]_[hash].[ext]',
-          publicPath: `/_next/static/svg`,
-          outputPath: 'static/svg',
-        },
-      },
-    ],
-  })
+  // config.module.rules.push({
+  //   test: /\.svg/,
+  //   use: [
+  //     options.defaultLoaders.babel,
+  //     {
+  //       loader: 'file-loader',
+  //       options: {
+  //         limit: 1000,
+  //         name: '[name]_[hash].[ext]',
+  //         publicPath: `/_next/static/svg`,
+  //         outputPath: 'static/svg',
+  //       },
+  //     },
+  //   ],
+  // })
 
   config.module.rules.push({
     test: /\.pdf/,

src/components/ui/Pagination/index.tsx

@@ -9,11 +9,13 @@ import { PaginationStyled } from './styles'
 export * from './interfaces'
 
 const Pagination: React.FC<PaginationProps> = ({
-  page,
+  page: pageProps,
   limit,
   total,
   ...other
 }) => {
+  const page = pageProps || 1
+
   const router = useRouter()
 
   const getNewLocation = useCallback(
@@ -35,7 +37,7 @@ const Pagination: React.FC<PaginationProps> = ({
     [router.asPath]
   )
 
-  if (!page || !limit || !total) {
+  if (!limit || !total) {
     return null
   }
 

src/pages/Cities/City/View/index.tsx

@@ -0,0 +1,19 @@
+import React, { useMemo } from 'react'
+import CompaniesView from 'src/pages/Companies/View'
+import { CityPageViewProps } from './interfaces'
+
+const CityPageView: React.FC<CityPageViewProps> = ({
+  city,
+  companies,
+  ...other
+}) => {
+  return useMemo(() => {
+    return (
+      <>
+        <CompaniesView companies={companies} city={city} {...other} />
+      </>
+    )
+  }, [companies, city, other])
+}
+
+export default CityPageView

src/pages/Cities/City/View/interfaces.ts

@@ -0,0 +1,6 @@
+import { CityFragment } from 'src/modules/gql/generated'
+import { CompaniesViewProps } from 'src/pages/Companies/View/interfaces'
+
+export type CityPageViewProps = {
+  city: CityFragment
+} & CompaniesViewProps

src/pages/Cities/City/index.tsx

@@ -0,0 +1,99 @@
+import { NextSeo } from 'next-seo'
+import { useRouter } from 'next/router'
+import { ParsedUrlQuery } from 'querystring'
+import React, { useMemo } from 'react'
+import {
+  QueryCompaniesArgs,
+  useCompaniesQuery,
+} from 'src/modules/gql/generated'
+import { Page } from 'src/pages/_App/interfaces'
+import { CityPageProps } from './interfaces'
+import CityPageView from './View'
+
+/**
+ * Параметры для запроса компаний
+ */
+export const getCompaniesVariables = ({
+  city,
+  query,
+}: {
+  city: CityPageProps['city'] | undefined
+  query: ParsedUrlQuery
+}): {
+  variables: QueryCompaniesArgs
+  page: number
+} => {
+  let skip: number | undefined
+
+  const take = 10
+
+  const page =
+    (query.page && typeof query.page === 'string' && parseInt(query.page)) || 0
+
+  if (page > 1) {
+    skip = (page - 1) * take
+  }
+
+  const variables: QueryCompaniesArgs = {
+    take: 12,
+    skip,
+  }
+
+  if (city?.coords) {
+    variables.orderBy = {
+      coords: {
+        lat: city.coords.lat,
+        lng: city.coords.lng,
+      },
+    }
+  }
+
+  return {
+    variables,
+    page,
+  }
+}
+
+const CityPage: Page<CityPageProps> = ({ city, ...other }) => {
+  const router = useRouter()
+
+  const { variables, page } = useMemo(() => {
+    return getCompaniesVariables({
+      city,
+      query: router.query,
+    })
+  }, [city, router.query])
+
+  const companiesResponse = useCompaniesQuery({
+    variables,
+  })
+
+  return useMemo(() => {
+    return (
+      <>
+        <NextSeo
+          title={`Общественные бани в городе "${city.pagetitle}"`}
+          description={`Все общественные бани и сауны в городе "${city.pagetitle}"`}
+        />
+        <CityPageView
+          city={city}
+          companies={companiesResponse.data?.companies || []}
+          pagination={{
+            page,
+            limit: companiesResponse.variables?.take || 0,
+            total: 100,
+          }}
+          {...other}
+        />
+      </>
+    )
+  }, [
+    city,
+    companiesResponse.data?.companies,
+    companiesResponse.variables?.take,
+    other,
+    page,
+  ])
+}
+
+export default CityPage

src/pages/Cities/City/interfaces.ts

@@ -0,0 +1,6 @@
+import { PageProps } from 'src/pages/_App/interfaces'
+import { CityPageViewProps } from './View/interfaces'
+
+export type CityPageProps = PageProps & {
+  city: CityPageViewProps['city']
+}

src/pages/Companies/View/index.tsx

@@ -1,17 +1,29 @@
-import { Grid } from '@material-ui/core'
 import React, { useMemo } from 'react'
+import { Grid } from '@material-ui/core'
+import Link from 'next/link'
+import Pagination from 'src/components/ui/Pagination'
 import CompaniesViewCompany from './Company'
 import { CompaniesViewProps } from './interfaces'
 import { CompaniesViewStyled } from './styles'
 
 const CompaniesView: React.FC<CompaniesViewProps> = ({
   companies,
+  city,
+  pagination,
   ...other
 }) => {
   return useMemo(() => {
     return (
       <>
         <CompaniesViewStyled {...other}>
+          {city ? (
+            <p>
+              Данные показаны относительно города {city.pagetitle}.{' '}
+              <Link href="/city">
+                <a title="Смотреть бани в других городах">Выбрать город</a>
+              </Link>
+            </p>
+          ) : null}
           <Grid container>
             {companies.map((n) => (
               <Grid key={n.id} item xs={12} sm={6} md={4} lg={3}>
@@ -20,9 +32,11 @@ const CompaniesView: React.FC<CompaniesViewProps> = ({
             ))}
           </Grid>
         </CompaniesViewStyled>
+
+        {pagination ? <Pagination {...pagination} /> : null}
       </>
     )
-  }, [companies, other])
+  }, [city, companies, other, pagination])
 }
 
 export default CompaniesView

src/pages/Companies/View/interfaces.ts

@@ -1,5 +1,8 @@
-import { CompaniesQuery } from 'src/modules/gql/generated'
+import { PaginationProps } from 'src/components/ui/Pagination'
+import { CityFragment, CompaniesQuery } from 'src/modules/gql/generated'
 
 export type CompaniesViewProps = {
   companies: CompaniesQuery['companies']
+  city: CityFragment | undefined
+  pagination: PaginationProps | undefined
 }

src/pages/MainPage/__tests__/page.test.tsx

@@ -15,7 +15,20 @@ jest.mock('next/router', () => ({
 
 describe('MainPage', () => {
   it('Render MainPage', () => {
-    const tree = appRender(<MainPage />)
+    const tree = appRender(
+      <MainPage
+        city={{
+          id: 1197,
+          pagetitle: 'Москва',
+          longtitle: 'Бани Москвы',
+          coords: {
+            lat: 55.752898,
+            lng: 37.621908,
+            zoom: 12,
+          },
+        }}
+      />
+    )
 
     // eslint-disable-next-line no-console
     // console.log('MainPage tree', tree.container.outerHTML);

src/pages/MainPage/index.tsx

@@ -1,3 +1,4 @@
+import React, { useMemo } from 'react'
 // import { useRouter } from 'next/router'
 import { NextSeo } from 'next-seo'
 // import OldMainPage from 'src/components_old/Pages/MainPage'
@@ -15,21 +16,24 @@ import { Page } from '../_App/interfaces'
 import {
   useCompaniesQuery,
   CompaniesDocument,
+  CompaniesQuery,
   CompaniesQueryVariables,
 } from 'src/modules/gql/generated'
 
 import CompaniesView from '../Companies/View'
+import { MainPageProps } from './interfaces'
+import { getCompaniesVariables } from '../Cities/City'
+import { useRouter } from 'next/router'
 
-const variables: CompaniesQueryVariables = {
-  take: 12,
-}
-
-export const MainPage: Page = (): JSX.Element => {
-  // const router = useRouter()
+export const MainPage: Page<MainPageProps> = ({ city }): JSX.Element => {
+  const router = useRouter()
 
-  // const {
-  //   // query: { skip, first },
-  // } = router
+  const { variables, page } = useMemo(() => {
+    return getCompaniesVariables({
+      city,
+      query: router.query,
+    })
+  }, [city, router.query])
 
   const companiesResponse = useCompaniesQuery({
     variables,
@@ -44,20 +48,35 @@ export const MainPage: Page = (): JSX.Element => {
 
       {/* <OldMainPage /> */}
 
-      <CompaniesView companies={companiesResponse.data?.companies || []} />
+      <CompaniesView
+        companies={companiesResponse.data?.companies || []}
+        city={city}
+        pagination={{
+          page,
+          limit: companiesResponse.variables?.take || 0,
+          total: 100,
+        }}
+      />
     </>
   )
 }
 
 MainPage.getInitialProps = async (appContext) => {
-  const { apolloClient } = appContext
+  const { apolloClient, cities, query } = appContext
 
-  await apolloClient.query({
+  const moscow = cities.find((n) => n.id === 1197)
+
+  await apolloClient.query<CompaniesQuery, CompaniesQueryVariables>({
     query: CompaniesDocument,
-    variables,
+    variables: getCompaniesVariables({
+      city: moscow,
+      query,
+    }).variables,
   })
 
-  return {}
+  return {
+    city: moscow,
+  }
 }
 
 export default MainPage

src/pages/MainPage/interfaces.ts

@@ -0,0 +1,6 @@
+import { PageProps } from '../_App/interfaces'
+import { CityFragment } from 'src/modules/gql/generated'
+
+export type MainPageProps = {
+  city: CityFragment | undefined
+} & PageProps

src/pages/Ratings/View/Rating/index.tsx

@@ -58,7 +58,11 @@ const RatingsPageViewRating: React.FC<RatingsPageViewRatingProps> = ({
             <Title variant="h2">{ratingType.pagetitle}</Title>
           </Link>
 
-          <CompaniesView companies={companies} />
+          <CompaniesView
+            companies={companies}
+            city={undefined}
+            pagination={undefined}
+          />
 
           {haveMore && (
             <div className="buttons">