fix: solve conflicts

Greenstand · Oct 10, 2021 · 0e992f3 · 0e992f3
1 parent 5152e30
commit 0e992f3
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 137 deletions.
diff --git a/src/components/featuredTreesSlider/index.js b/src/components/featuredTreesSlider/index.js
@@ -1,53 +1,83 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState } from 'react';
 import { Grid, Button } from '@material-ui/core';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import { useStyles } from './style.js'; // the style file
 
-
-
 function FeaturedTreesSlider() {
-    const classes = useStyles();
-    const sliderRef = useRef()
+  const classes = useStyles();
+  const sliderRef = useRef();
 
-    //fake data
-    const trees = [
-        {id:'115059', photo_url: 'https://picsum.photos/id/10/208', species: 'Palm Tree' },
-        {id:'115059', photo_url: 'https://picsum.photos/id/1037/208', species: 'Palm Tree' },
-        {id:'115059', photo_url: 'https://picsum.photos/id/106/208', species: 'Palm Tree' },
-        {id:'115059', photo_url: 'https://picsum.photos/id/107/208', species: 'Palm Tree' },
-        {id:'115059', photo_url: 'https://picsum.photos/id/108/208', species: 'Palm Tree' },
-        {id:'115059', photo_url: 'https://picsum.photos/id/109/208', species: 'Palm Tree' },
-        {id:'115059', photo_url: 'https://picsum.photos/id/111/208', species: 'Palm Tree' },
-        {id:'115059', photo_url: 'https://picsum.photos/id/112/208', species: 'Palm Tree' },
-    ]
+  // fake data
+  const trees = [
+    {
+      id: '115059',
+      photo_url: 'https://picsum.photos/id/10/208',
+      species: 'Palm Tree',
+    },
+    {
+      id: '115059',
+      photo_url: 'https://picsum.photos/id/1037/208',
+      species: 'Palm Tree',
+    },
+    {
+      id: '115059',
+      photo_url: 'https://picsum.photos/id/106/208',
+      species: 'Palm Tree',
+    },
+    {
+      id: '115059',
+      photo_url: 'https://picsum.photos/id/107/208',
+      species: 'Palm Tree',
+    },
+    {
+      id: '115059',
+      photo_url: 'https://picsum.photos/id/108/208',
+      species: 'Palm Tree',
+    },
+    {
+      id: '115059',
+      photo_url: 'https://picsum.photos/id/109/208',
+      species: 'Palm Tree',
+    },
+    {
+      id: '115059',
+      photo_url: 'https://picsum.photos/id/111/208',
+      species: 'Palm Tree',
+    },
+    {
+      id: '115059',
+      photo_url: 'https://picsum.photos/id/112/208',
+      species: 'Palm Tree',
+    },
+  ];
 
-    const scrollHandler = (num) => {
-        sliderRef.current.scrollLeft += num
-    }
+  const scrollHandler = (num) => {
+    sliderRef.current.scrollLeft += num;
+  };
 
-    return (
-        <div className={classes.SliderContainer}>
-            <Button className={classes.GoRight} onClick={() => scrollHandler(500)} >
-                <ArrowForwardIosIcon />
-            </Button>
-            <Grid ref={sliderRef} className={classes.SliderImgContainer} >
-                {
-                    trees.map((tree, index) => (
-                        <div key={index} className={classes.Card} >
-                            <img className={classes.Img} src={tree.photo_url} />
-                            <div className={classes.Title} >
-                                <p style={{padding: '0 8px'}}>{tree.species} - {tree.id}</p> 
-                            </div>
-                        </div>
-                    ))
-                } 
-            </Grid>
-            <Button className={classes.GoLeft} onClick={() => scrollHandler(-500)} >
-                <ArrowBackIosIcon />
-            </Button>
-        </div>
-    )
+  return (
+    <div className={classes.SliderContainer}>
+      <Button className={classes.GoRight} onClick={() => scrollHandler(500)}>
+        <ArrowForwardIosIcon />
+      </Button>
+      <Grid ref={sliderRef} className={classes.SliderImgContainer}>
+        {trees.map((tree, index) => (
+          <div key={index} className={classes.Card}>
+            <img className={classes.Img} src={tree.photo_url} />
+            <div className={classes.Title}>
+              <p style={{ padding: '0 8px' }}>
+                {tree.species} - {tree.id}
+              </p>
+            </div>
+          </div>
+        ))}
+      </Grid>
+      <Button className={classes.GoLeft} onClick={() => scrollHandler(-500)}>
+        <ArrowBackIosIcon />
+      </Button>
+    </div>
+  );
 }
 
-export default FeaturedTreesSlider
+export default FeaturedTreesSlider;
diff --git a/src/components/featuredTreesSlider/style.js b/src/components/featuredTreesSlider/style.js
@@ -1,100 +1,100 @@
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme) => ({
-    SliderContainer: {
-        position: 'relative',
-        width: '100%',
-        overflow: 'hidden',
+  SliderContainer: {
+    position: 'relative',
+    width: '100%',
+    overflow: 'hidden',
+  },
+  SliderImgContainer: {
+    display: 'flex',
+    gap: '8px',
+    position: 'relative',
+    overflowX: 'scroll',
+    scrollBehavior: 'smooth',
+    scrollSnapType: 'x mandatory',
+    padding: '2rem 0',
+    scrollPadding: '0 50%',
+    '&::-webkit-scrollbar': {
+      display: 'none',
     },
-    SliderImgContainer: {
-        display: 'flex',
-        gap: '8px',
-        position: 'relative',
-        overflowX: 'scroll',
-        scrollBehavior: 'smooth',
-        scrollSnapType: 'x mandatory',
-        padding: '2rem 0',
-        scrollPadding: '0 50%',
-        '&::-webkit-scrollbar': {
-            display: 'none'
-        },
-        '&:hover $Card:hover': {
-            overflow: 'none !impornant',
-            scrollSnapType: 'none',
-        }
+    '&:hover $Card:hover': {
+      overflow: 'none !impornant',
+      scrollSnapType: 'none',
     },
+  },
 
-    Img: {
-        borderRadius: '8px',
-        transition: 'transform .5s',
-        width: '100%',
-        height: '100%',
-        minWidth: '208px',
+  Img: {
+    borderRadius: '8px',
+    transition: 'transform .5s',
+    width: '100%',
+    height: '100%',
+    minWidth: '208px',
+  },
+  GoRight: {
+    right: '0px',
+    bottom: '33%',
+    zIndex: '3',
+    position: 'absolute',
+    minWidth: '35px',
+    height: '75px',
+    background: '#222629B2',
+    border: 'none',
+    color: 'white',
+    borderRadius: '40px 0 0 40px ',
+    cursor: 'pointer',
+    padding: '0',
+    '&:hover': {
+      background: '#222629B2',
     },
-    GoRight: {
-        right: '0px',
-        bottom: '33%',
-        zIndex: '3',
-        position: 'absolute',
-        minWidth: '35px',
-        height: '75px',
-        background: '#222629B2',
-        border: 'none',
-        color: 'white',
-        borderRadius: '40px 0 0 40px ',
-        cursor: 'pointer',
-        padding: '0',
-        '&:hover': {
-            background: '#222629B2',
-        }
+  },
+  GoLeft: {
+    left: '0px',
+    bottom: '33%',
+    zIndex: '3',
+    position: 'absolute',
+    minWidth: '35px',
+    height: '75px',
+    background: '#222629B2',
+    border: 'none',
+    color: 'white',
+    borderRadius: '0 40px 40px 0',
+    cursor: 'pointer',
+    padding: '0',
+    '&:hover': {
+      background: '#222629B2',
     },
-    GoLeft: {
-        left: '0px',
-        bottom: '33%',
-        zIndex: '3',
-        position: 'absolute',
-        minWidth: '35px',
-        height: '75px',
-        background: '#222629B2',
-        border: 'none',
-        color: 'white',
-        borderRadius: '0 40px 40px 0',
-        cursor: 'pointer',
-        padding: '0',
-        '&:hover': {
-            background: '#222629B2',
-        }
+  },
+  Title: {
+    position: 'absolute',
+    bottom: '0',
+    background: '#474B4FB2',
+    width: 'inherit',
+    height: '30px',
+    color: 'white',
+    display: 'flex',
+    alignItems: 'center',
+    fontWeight: 800,
+    borderRadius: '0 0 8px 8px',
+    opacity: 0,
+    zIndex: 3,
+    transition: 'all .5s',
+  },
+  Card: {
+    width: '208px',
+    height: '208px',
+    transition: 'all .5s',
+    scrollSnapAlign: 'center',
+    scrollBehavior: 'smooth',
+    '&:hover': {
+      transform: 'scale(1.2)',
+      position: 'relative',
+      zIndex: 2,
+      '& $Title': {
+        opacity: 1,
+      },
     },
-    Title: {
-        position: 'absolute',
-        bottom: '0',
-        background: '#474B4FB2',
-        width: 'inherit',
-        height: '30px',
-        color: 'white',
-        display: 'flex',
-        alignItems: 'center',
-        fontWeight: 800,
-        borderRadius: '0 0 8px 8px',
-        opacity: 0,
-        zIndex: 3,
-        transition: 'all .5s',
-    },
-    Card: {
-        width: '208px',
-        height: '208px',
-        transition: 'all .5s',
-        scrollSnapAlign: 'center',
-        scrollBehavior: 'smooth',
-        '&:hover': {
-            transform: 'scale(1.2)',
-            position: 'relative', 
-            zIndex: 2,
-            '& $Title': {
-                opacity: 1
-            },
-        },
-    }
+  },
 }));
 
-export  {useStyles};
+export { useStyles };
diff --git a/src/components/featuredTreesSlider/test.cy.js b/src/components/featuredTreesSlider/test.cy.js
@@ -1,5 +1,5 @@
 import { mount } from '@cypress/react';
-import FeaturedTreesSlider from './index'
+import FeaturedTreesSlider from './index';
 
 describe('Featured Trees Slider', () => {
   it('it shows featured trees', () => {

diff --git a/src/models/Map.js b/src/models/Map.js
@@ -109,7 +109,7 @@ export default class Map {
       center: this.initialCenter,
       zoomControl: false,
     };
-    
+
     this.map = this.L.map(domElement, mapOptions);
     this.map.setView(this.initialCenter, this.minZoom);
     this.map.attributionControl.setPrefix('');

diff --git a/src/pages/top.js b/src/pages/top.js
@@ -1,19 +1,19 @@
 import Link from 'next/link';
-import FeaturedTreesSlider from '../components/featuredTreesSlider'
+import FeaturedTreesSlider from '../components/featuredTreesSlider';
 
 export default function Top() {
   return (
     <div>
       <h1>top page</h1>
-      <h2>featured trees</h2> 
+      <h2>featured trees</h2>
       <FeaturedTreesSlider />
       <ul>
-        {/* <li>
+        <li>
           <Link href="/trees/933042">tree 933042</Link>
         </li>
         <li>
           <Link href="/trees/932946">tree 932946</Link>
-        </li> */}
+        </li>
       </ul>
     </div>
   );