Added folder for each component, moved and renamed component to index.js

src/components/AnimalCard.js → src/components/AnimalCard/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { FcSpeaker } from 'react-icons/fc'
-import useAudio from '../hooks/useAudio'
+import useAudio from '../../hooks/useAudio'
 import styled from 'styled-components'
 import { Fade } from 'react-awesome-reveal'
 

src/components/Footer.js → src/components/Footer/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { FiFacebook, FiInstagram, FiTwitter, FiYoutube } from 'react-icons/fi'
-import logo from '../logo.svg'
+import logo from '../../logo.svg'
 import './Footer.css'
 const Footer = () => {
   return (

src/components/Gallery.js → src/components/Gallery/index.js

@@ -1,9 +1,8 @@
 import React, { useState, useEffect } from 'react'
-import { useGlobalContext } from '../contexts/AppContext'
+import { useGlobalContext } from '../../contexts/AppContext'
 import styled from 'styled-components'
-import load from '../resources/gifs/loading2.gif'
-import AnimalCard from './AnimalCard'
-import PlayCard from './PlayCard'
+import AnimalCard from '../AnimalCard'
+import PlayCard from '../PlayCard'
 import {
   FcAlphabeticalSortingAz,
   FcAlphabeticalSortingZa,
@@ -106,7 +105,7 @@ const Gallery = ({ mode }) => {
         {loading ? (
           <LoadingContainer>
             <ImgContainer>
-              <img src={load} alt='loading...' />
+              <img src='/images/loading.gif' alt='loading...' />
             </ImgContainer>
           </LoadingContainer>
         ) : mode === 'play' ? (

src/components/Login.js → src/components/Login/index.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
-import { signInWithGoogle } from '../firebase'
+import { signInWithGoogle } from '../../firebase'
 import { Redirect } from 'react-router-dom'
-import useAuth from '../hooks/useAuth'
+import useAuth from '../../hooks/useAuth'
 
 function Login() {
   // Once login, redirect to home page

src/components/Navbar.js → src/components/Navbar/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import './Navbar.css'
-import logo from '../logo.svg'
+import logo from '../../logo.svg'
 import { FcMenu, FcPrevious } from 'react-icons/fc'
 import {
   AiFillHome,
@@ -10,9 +10,9 @@ import {
 } from 'react-icons/ai'
 import { IoMdCloudUpload } from 'react-icons/io'
 import { RiSearchFill } from 'react-icons/ri'
-import { signOutUser } from '../firebase'
+import { signOutUser } from '../../firebase'
 import { Link } from 'react-router-dom'
-import useAuth from '../hooks/useAuth'
+import useAuth from '../../hooks/useAuth'
 
 const Navbar = () => {
   const [click, setClick] = useState(false)

src/components/PlayCard.js → src/components/PlayCard/index.js

@@ -1,5 +1,5 @@
 import React, { useRef, useContext } from 'react'
-import { PlayContext } from '../pages/Play'
+import { PlayContext } from '../../pages/Play'
 
 const PlayCard = ({ name, imageURL, showMini }) => {
   const { checkResult } = useContext(PlayContext)

src/components/Playbar.js → src/components/Playbar/index.js

@@ -1,7 +1,7 @@
 import React, { useRef, useContext } from 'react'
 import styled from 'styled-components'
-import { PlayContext } from '../pages/Play'
-import { useGlobalContext } from '../contexts/AppContext'
+import { PlayContext } from '../../pages/Play'
+import { useGlobalContext } from '../../contexts/AppContext'
 import { FcSearch } from 'react-icons/fc'
 
 const Playbar = () => {

src/components/SearchForm.js → src/components/SearchForm/index.js

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react'
-import { useGlobalContext } from '../contexts/AppContext'
+import { useGlobalContext } from '../../contexts/AppContext'
 
 const SearchForm = () => {
   const { setSearchTerm } = useGlobalContext()

src/components/Subscription.js → src/components/Subscription/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import { useHistory } from 'react-router-dom'
-import { addDoc, subscriptionRef } from '../firebase'
+import { addDoc, subscriptionRef } from '../../firebase'
 
 function Subscription() {
   const [email, setEmail] = useState()

src/components/Upload.js → src/components/Upload/index.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { addDoc, animalsRef } from '../firebase'
+import { addDoc, animalsRef } from '../../firebase'
 import styled from 'styled-components'
 import {
   getStorage,

src/components/Viewers.js → src/components/Viewers/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { useGlobalContext } from '../contexts/AppContext'
+import { useGlobalContext } from '../../contexts/AppContext'
 
 function Viewers() {
   const { setAnimalType } = useGlobalContext()

src/contexts/AuthContext.js

@@ -0,0 +1,43 @@
+import React, { useReducer, useContext } from 'react'
+
+const AuthContext = React.createContext()
+
+const initialState = {
+  name: '',
+  email: '',
+  photo: '',
+}
+
+const ACTIONS = {
+  SET_USER_LOGIN: 'SET_USER_LOGIN',
+  SET_SIGN_OUT: 'SET_SIGN_OUT',
+}
+
+function reducer(state, action) {
+  switch (action.type) {
+    case ACTIONS.SET_USER_LOGIN:
+      return {
+        name: action.payload.name,
+        email: action.payload.email,
+        photo: action.payload.photo,
+      }
+    case ACTIONS.SET_SIGN_OUT:
+      return { name: '', email: '', photo: '' }
+    default:
+      return state
+  }
+}
+export const AuthProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState)
+  const selectUserName = () => state.name
+  const selectUserEmail = () => state.email
+  const selectUserPhoto = () => state.photo
+  const signIn = () => {
+    dispatch({type: ACTIONS.SET_USER_LOGIN, payload: {}})
+  }
+  return <AuthContext.Provider value={{}}>{children}</AuthContext.Provider>
+}
+
+export const useAuth = () => {
+  return useContext(AuthContext)
+}