BrrePlace block + try nj add lightbox efect

package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.2.2",
+    "@fancyapps/ui": "^4.0.0-alpha.4",
     "@material-ui/core": "^4.12.0",
     "@material-ui/icons": "^4.9.1",
     "@prisma-cms/editor": "^2.0.8",

src/@types/fancyapps__ui/index.d.ts

@@ -0,0 +1 @@
+declare module '@fancyapps/ui/src/Fancybox/Fancybox.js'

src/@types/react-lightbox-component/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-lightbox-component'

src/gql/Query/Beer.graphql

@@ -27,6 +27,26 @@ query beersConnection(
   }
 }
 
+query placesbeer($where: PlaceWhereInput, $center: CoordsInput) {
+  mapPlacesConnection(
+    first: 10
+    # Условие по пиву
+    where: $where
+    # сортировать от координат
+    center: $center
+  ) {
+    edges {
+      node {
+        id
+        uri
+        place_id
+        name
+        image
+      }
+    }
+  }
+}
+
 fragment beer on Beer {
   id
   beer_id

src/modules/gql/generated/index.ts

@@ -14,5 +14,6 @@ export * from './companiesConnection';
 export * from './company';
 export * from './companyInfo';
 export * from './me';
+export * from './placesbeer';
 export * from './user';
 export * from './userByUsername';export * from './types';

src/modules/gql/generated/placesbeer.ts

@@ -0,0 +1,64 @@
+/* eslint-disable */
+// @ts-nocheck
+
+/** 
+* ФАЙЛ ГЕНЕРИРУЕТСЯ АВТОМАТИЧЕСКИ, ПРАВИТЬ ЕГО НЕ НУЖНО 
+* Команда для генерирования этого файла: "yarn generate:types" 
+*/
+
+
+import * as Types from './types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+export type PlacesbeerQueryVariables = Types.Exact<{
+  where?: Types.Maybe<Types.PlaceWhereInput>;
+  center?: Types.Maybe<Types.CoordsInput>;
+}>;
+
+
+export type PlacesbeerQuery = { __typename?: 'Query', mapPlacesConnection: { __typename?: 'MapPlaceConnection', edges: Array<{ __typename?: 'PlaceEdge', node: { __typename?: 'Place', id: string, uri?: Types.Maybe<string>, place_id?: Types.Maybe<number>, name: string, image?: Types.Maybe<string> } }> } };
+
+
+export const PlacesbeerDocument = gql`
+    query placesbeer($where: PlaceWhereInput, $center: CoordsInput) {
+  mapPlacesConnection(first: 10, where: $where, center: $center) {
+    edges {
+      node {
+        id
+        uri
+        place_id
+        name
+        image
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __usePlacesbeerQuery__
+ *
+ * To run a query within a React component, call `usePlacesbeerQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePlacesbeerQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = usePlacesbeerQuery({
+ *   variables: {
+ *      where: // value for 'where'
+ *      center: // value for 'center'
+ *   },
+ * });
+ */
+export function usePlacesbeerQuery(baseOptions?: Apollo.QueryHookOptions<PlacesbeerQuery, PlacesbeerQueryVariables>) {
+        return Apollo.useQuery<PlacesbeerQuery, PlacesbeerQueryVariables>(PlacesbeerDocument, baseOptions);
+      }
+export function usePlacesbeerLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PlacesbeerQuery, PlacesbeerQueryVariables>) {
+          return Apollo.useLazyQuery<PlacesbeerQuery, PlacesbeerQueryVariables>(PlacesbeerDocument, baseOptions);
+        }
+export type PlacesbeerQueryHookResult = ReturnType<typeof usePlacesbeerQuery>;
+export type PlacesbeerLazyQueryHookResult = ReturnType<typeof usePlacesbeerLazyQuery>;
+export type PlacesbeerQueryResult = Apollo.QueryResult<PlacesbeerQuery, PlacesbeerQueryVariables>;

src/pages/Beers/Beer/BeerPlaces/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { Paper, Grid } from '@material-ui/core'
+//import { imageFormats } from 'src/helpers/imageFormats'
+import Link from 'src/components/ui/Link'
+import { PlacesbeerViewProps } from './interfaces'
+
+import {
+  usePlacesbeerQuery,
+  PlacesbeerQueryVariables,
+} from 'src/modules/gql/generated'
+
+const BeerPlaces = (props: { beerid: number }) => {
+  //console.log('this.props.beerid', props.beerid)
+
+  const getVariables = (beerid: number): PlacesbeerQueryVariables => {
+    return {
+      where: {
+        // eslint-disable-next-line @typescript-eslint/camelcase
+        beers_some: {
+          Beer: {
+            // eslint-disable-next-line @typescript-eslint/camelcase
+            beer_id: beerid,
+          },
+        },
+      },
+      center: {
+        lat: 55.752,
+        lng: 37.621,
+      },
+    }
+  }
+
+  const variables = getVariables(props.beerid)
+
+  const response = usePlacesbeerQuery({
+    variables,
+  })
+
+  //console.log('response', response.data)
+
+  const places: PlacesbeerViewProps['places'] = []
+
+  response.data?.mapPlacesConnection.edges.forEach((n) => {
+    if (n != null && n.node) {
+      places.push(n.node)
+    }
+  })
+
+  //console.log('places', places)
+
+  return (
+    <>
+      <h2>Пивные места:</h2>
+      <Paper style={{ padding: '15px' }}>
+        <Grid container>
+          {places.map((n) => {
+            return n ? (
+              <>
+                <Grid item xs={12} sm={6} md={4} lg={3}>
+                  <Link href={n.uri || '/'}>{n.name}</Link>
+                </Grid>
+              </>
+            ) : null
+          })}
+        </Grid>
+      </Paper>
+    </>
+  )
+}
+
+export default BeerPlaces

src/pages/Beers/Beer/BeerPlaces/interfaces.ts

@@ -0,0 +1,5 @@
+import { PlacesbeerQuery } from 'src/modules/gql/generated'
+
+export type PlacesbeerViewProps = {
+  places: PlacesbeerQuery
+}

src/pages/Beers/Beer/index.tsx

@@ -14,7 +14,12 @@ import ImageListItem from '@material-ui/core/ImageListItem'
 //import beerSvg from './View/img/beer-solid.svg'
 
 import { TableBold } from './View/styles'
+
+import BeerPlaces from './BeerPlaces'
+
 //import Lightbox from 'react-lightbox-component'
+//import { Fancybox } from '@fancyapps/ui'
+//import '@fancyapps/ui/dist/fancybox.css'
 
 import {
   useBeerInfoQuery,
@@ -102,6 +107,26 @@ const BeerPage = () => {
     !Array.isArray(beerinfo.content) &&
     beerinfo.content?.blocks
 
+  const images: {
+    src: string
+    title?: string | null
+    description?: string | null
+  }[] = []
+
+  if (Array.isArray(beerinfo.gallery)) {
+    beerinfo.gallery.forEach((n: string) => {
+      if (n && typeof n === 'string') {
+        images.push({
+          src: 'https://pivkarta.ru/images/big/' + n,
+          title: 'Пиво ' + beerinfo.name,
+          description: 'Фото пива ' + beerinfo.name,
+        })
+      }
+    })
+  }
+
+  //console.log('images', images)
+
   return (
     <>
       <Paper style={{ padding: '15px' }}>
@@ -225,6 +250,39 @@ const BeerPage = () => {
       <Paper style={{ padding: '15px', marginTop: '15px' }}>
         <h2>Фотографии пива {beerinfo.name}</h2>
 
+        {/**
+ *
+
+        <Fancybox options={{ infinite: false }}>
+          <p>
+            <button
+              data-fancybox="gallery"
+              data-src="https://lipsum.app/id/1/800x600"
+              className="button button--secondary"
+            >
+              Image #1
+            </button>
+
+            <button
+              data-fancybox="gallery"
+              data-src="https://lipsum.app/id/2/800x600"
+              className="button button--secondary"
+            >
+              Image #2
+            </button>
+          </p>
+        </Fancybox>
+*/}
+        {/*
+        <Lightbox
+          images={[
+            {
+              src:
+                'https://pivkarta.ru/images/slider_thumb/13/91/06/86/12/70/75/f3dbcf201757c0bd5eb92876d5133a45.jpg',
+            },
+          ]}
+        />
+ */}
         <ImageList cols={4} rowHeight={450}>
           {beerinfo.gallery?.map(
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -242,6 +300,8 @@ const BeerPage = () => {
           )}
         </ImageList>
       </Paper>
+
+      <BeerPlaces beerid={beerId} />
     </>
   )
 }

yarn.lock

@@ -1429,6 +1429,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fancyapps/ui@^4.0.0-alpha.4":
+  version "4.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/@fancyapps/ui/-/ui-4.0.0-alpha.4.tgz#db977bfd8e0fae2840d1738cc28352a670dfa98a"
+  integrity sha512-tvt6kjJDK6lD4R1hJ81xftuQTDmCKnS2uCI3Jqm+p0vqJyDfjIzE+CXfE7RRe7pfHgG9qqVdDBQUjxHKWUUhCw==
+
 "@graphql-codegen/add@^2.0.1", "@graphql-codegen/add@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@graphql-codegen/add/-/add-2.0.2.tgz#4acbb95be9ebb859a3cebfe7132fdf49ffe06dd8"