💄 update styles and loader component

package.json

@@ -56,6 +56,7 @@
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^3.11.0",
+    "react-spinner-material": "^1.3.1",
     "styled-components": "^5.2.0"
   }
 }

src/components/EmptyPage/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Container } from './styles'
+import noFavoritesImage from '../../images/corgi-cute.png'
+
+export const EmptyPage = ({ text }) => {
+  return (
+    <>
+      <Container>
+        <img src={noFavoritesImage} alt='No Favorites Availables' width='200' />
+        <h3>{text}</h3>
+      </Container>
+    </>
+  )
+}

src/components/EmptyPage/styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  text-align: center;
+  & h3 {
+    color: gray;
+    margin: 20px 0;
+    text-align: center;
+    font-weight: 400;
+    letter-spacing: 3px;
+  }
+`

src/components/Layout/index.js

@@ -8,11 +8,7 @@ export const Layout = ({ children, title = '', subtitle = '' }) => {
         <title>{`${title} | Petgram 🐕 `}</title>
         <meta name='description' content={subtitle} />
       </Helmet>
-      <Container>
-        <Title>{title}</Title>
-        <Subtitle>{subtitle}</Subtitle>
-        {children}
-      </Container>
+      <Container>{children}</Container>
     </>
   )
 }

src/components/ListOfCategories/styles.js

@@ -4,24 +4,29 @@ export const List = styled.ul`
   display: flex;
   overflow: scroll;
   width: 100%;
-  ${props => props.fixed && css`
-  {
-    background: #fff;
-    border-radius: 60px;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-    left: 0;
-    margin: 0 auto;
-    max-width: 400px;
-    padding: 5px;
-    position: fixed;
-    right: 0;
-    top: -20px;
-    transform: scale(.5);
-    z-index: 1;
+  &::-webkit-scrollbar {
+    display: none;
   }
-  `}
+  ${(props) =>
+    props.fixed &&
+    css`
+       {
+        background: #fff;
+        border-radius: 60px;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+        left: 0;
+        margin: 0 auto;
+        max-width: 400px;
+        padding: 5px;
+        position: fixed;
+        right: 0;
+        top: -20px;
+        transform: scale(0.5);
+        z-index: 1;
+      }
+    `}
 `
 
 export const Item = styled.li`
-padding: 0 8px;
+  padding: 0 8px;
 `

src/components/ListOfFavorites/index.js

@@ -1,19 +1,24 @@
 import React from 'react'
 import { useGetFavoritesQuery } from '../../hooks/useGetFavoritesQuery'
-import { Link, Image, Container } from './styles'
+import { Link, Image, Container, NoFavorites } from './styles'
 import { PropTypes } from 'prop-types'
+import { Loading } from '../Loading'
+import { EmptyPage } from '../EmptyPage'
 
 export const ListOfFavorites = () => {
   const { data, loading, error, refetch } = useGetFavoritesQuery()
 
   if (loading) {
-    return <h1>Loading...</h1>
+    return <Loading />
   }
 
   if (error) {
     return <h1>{error.message}</h1>
   }
-
+  console.log(data.favs)
+  if (!Array.isArray(data.favs) || data.favs.length === 0) {
+    return <EmptyPage text='Nothing Here....' />
+  }
   return (
     <>
       <Container>

src/components/ListOfFavorites/styles.js

@@ -9,6 +9,7 @@ export const Link = styled(LinkRouter)`
 export const Image = styled.img`
   width: 100%;
   object-fit: cover;
+  border-radius: 5px;
 `
 
 export const Container = styled.div`

src/components/ListOfPhotoCard/index.js

@@ -3,30 +3,33 @@ import { PhotoCard } from '../PhotoCard'
 import { useGetPhotos } from '../../hooks/useGetPhotos.js'
 import { List, Item } from './style.js'
 import { PropTypes } from 'prop-types'
+import { Loading } from '../Loading'
 
 export const ListOfPhotoCard = ({ categoryID }) => {
   const { loading, error, data } = useGetPhotos(categoryID)
 
-  if (loading) {
-    return <h1>Loading</h1>
+  if (error) {
+    return <h1>Opps! something is wrong :(</h1>
   }
 
-  if (error) {
-    return <h1>{error.message}</h1>
+  if (loading) {
+    return <Loading />
   }
   return (
     <>
-      <List>
-        {data.photos.map((photoCard) => (
-          <Item key={photoCard.id}>
-            <PhotoCard {...photoCard} />
-          </Item>
-        ))}
-      </List>
+      {
+        <List>
+          {data.photos.map((photoCard) => (
+            <Item key={photoCard.id}>
+              <PhotoCard {...photoCard} />
+            </Item>
+          ))}
+        </List>
+      }
     </>
   )
 }
 
-ListOfPhotoCard.propTypes = {
-  categoryID: PropTypes.string
-}
+// ListOfPhotoCard.propTypes = {
+//   categoryID: PropTypes.string
+// }

src/components/ListOfPhotoCard/style.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components'
 
 export const List = styled.ul`
-list-style-type: none;
+  list-style-type: none;
 `
 export const Item = styled.li`
-
+  color: white;
 `

src/components/Loading/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Spinner, Container } from './style.js'
+export const Loading = () => {
+  return (
+    <Container>
+      <Spinner />
+    </Container>
+  )
+}

src/components/Loading/style.js

@@ -0,0 +1,30 @@
+import styled, { keyframes } from 'styled-components'
+
+const rotate360 = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`
+
+export const Spinner = styled.div`
+  animation: ${rotate360} 1s linear infinite;
+  transform: translateZ(0);
+
+  border-top: 2px solid #f3abbd;
+  border-right: 2px solid #f3abbd;
+  border-bottom: 2px solid #f3abbd;
+  border-left: 4px solid #ed59a3;
+  background: transparent;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+`

src/components/PhotoCard/index.js

@@ -44,9 +44,9 @@ export const PhotoCard = ({ id, liked, likes = 0, src = DEFAULT_IMAGE }) => {
   )
 }
 
-PhotoCard.propTypes = {
-  id: PropTypes.string.isRequired,
-  liked: PropTypes.bool.isRequired,
+/*PhotoCard.propTypes = {
+  id: PropTypes.string,
+  liked: PropTypes.bool,
   likes: function (props, propName, componentName) {
     const propValue = props[propName]
 
@@ -59,5 +59,5 @@ PhotoCard.propTypes = {
     }
   },
   onClick: PropTypes.func,
-  src: PropTypes.string.isRequired
-}
+  src: PropTypes.string
+}*/

src/components/PhotoCard/style.js

@@ -7,7 +7,7 @@ export const Image = styled.img`
   height: 100%;
   object-fit: cover;
   position: absolute;
-  border-radius: 10px;
+  border-radius: 5px;
   top: 0;
   width: 100%;
 `
@@ -16,7 +16,7 @@ export const ImgWrapper = styled.div`
   padding: 56.25% 0 0 0;
   height: 0;
   display: block;
-  border-radius: 10px;
+
   position: relative;
 `
 

src/components/PhotoDetail/index.js

@@ -2,12 +2,13 @@ import React from 'react'
 import { PropTypes } from 'prop-types'
 import { PhotoCard } from '../PhotoCard/'
 import { useGetSinglePhoto } from '../../hooks/useGetSinglePhoto.js'
+import { Loading } from '../Loading'
 
 export const PhotoDetail = ({ id }) => {
   const { loading, error, data } = useGetSinglePhoto(id)
 
   if (loading) {
-    return 'loading'
+    return <Loading />
   }
 
   if (error) {

src/components/SubmitButton/styles.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 export const Button = styled.button`
   padding: 10px;
   width: 100%;
-  background-color: #0095f6;
+  background-color: #f9ae5c;
   color: white;
   outline: none;
   border: 1px solid transparent;

src/components/UserForm/index.js

@@ -47,7 +47,7 @@ export const UserForm = ({ onSubmit, action, error, disabled }) => {
         </SubmitButton>
         {error && <Error>{error}</Error>}
         <Small display={action}>
-          You don't have an account? <a href='#'>Register Here!</a>
+          You don't have an account? <a href='/register'>Register Here!</a>
         </Small>
       </Form>
     </>

src/components/UserForm/styles.js

@@ -49,7 +49,7 @@ export const Small = styled.small`
   font-weight: 400;
   & a {
     text-decoration: none;
-    color: #0095f6;
+    color: #965726;
     font-weight: bold;
   }
   ${(props) =>

src/hooks/useCategoryData.js

@@ -19,6 +19,7 @@ export const useCategoryData = () => {
         setLoading(false)
         setError(error.message)
       }
+      // Abort both fetches on unmount
     }
     getCategories()
   }, [])

src/pages/AnonymousUser.js

@@ -1,20 +1,15 @@
 import React, { useContext } from 'react'
 import { Context } from '../Context'
 import { UserForm, userFormActions } from '../components/UserForm'
-import { useRegisterMutation } from '../hooks/useRegisterMutation'
+
 import { useLoginMutation } from '../hooks/useLoginMutation'
 import { Layout } from '../components/Layout/index'
 
 const AnonymousUser = () => {
   const { activateAuth } = useContext(Context)
-  const [register, { loadingRegister, errorRegister }] = useRegisterMutation()
+
   const [login, { loadingLogin, errorLogin }] = useLoginMutation()
-  const onSubmitRegister = ({ variables }) => {
-    register({ variables }).then(({ data }) => {
-      const { signup } = data
-      activateAuth(signup)
-    })
-  }
+
   const onSubmitLogin = ({ variables }) => {
     login({ variables }).then(({ data }) => {
       const { login } = data
@@ -24,13 +19,7 @@ const AnonymousUser = () => {
 
   return (
     <>
-      <Layout title='Sing In - Sing Up' subtitle='Welcome to petgram'>
-        <UserForm
-          onSubmit={onSubmitRegister}
-          action={userFormActions.REGISTER}
-          error={errorRegister && errorRegister.message}
-          disabled={loadingRegister}
-        />
+      <Layout title='Sing In' subtitle='Welcome to petgram'>
         <UserForm
           onSubmit={onSubmitLogin}
           action={userFormActions.LOGIN}

src/pages/Home.js

@@ -17,10 +17,9 @@ const HomePage = ({ id }) => {
 }
 
 export const Home = React.memo(HomePage, (prevProps, props) => {
-  console.log('Render: Home Memo')
   return prevProps.id === props.id
 })
 
-HomePage.propTypes = {
+/*HomePage.propTypes = {
   id: PropTypes.string
-}
+}*/