FZ12OK-55 firebase fix

infoshareacademy · Feb 23, 2020 · b7c8cb2 · b7c8cb2
1 parent 2a98afe
commit b7c8cb2
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 75 deletions.
diff --git a/src/add-button/AddButton.js b/src/add-button/AddButton.js
diff --git a/src/auth/Auth.js b/src/auth/Auth.js
@@ -1,26 +1,24 @@
 import React from 'react'
 import firebase from "firebase";
-import { Login } from './LogIn';
-import Navigation from '../navigation/Navigation';
 export const MyContext = React.createContext(null);
 
 
 export class AuthContext extends React.Component {
     state = {
-        user: null,
+        user: '',
         userList: [],
     }
 
     componentDidMount() {
         const authRef = firebase.auth().onAuthStateChanged(user => {
             this.setState({
                 user
-            })
+            }, () => this.fetchList())
         })
-
         this.setState({
             ref: authRef
         })
+
     }
 
     componentWillUnmount() {
@@ -29,36 +27,46 @@ export class AuthContext extends React.Component {
         }
     }
 
-    addToList = (e) => {
-
-        this.setState({
-            userList: [...this.state.userList, e]
-        }, () => firebase.database().ref('user-items/' + this.state.user.uid).set({
-            list: [...this.state.userList]
-        }))
-
+    fetchList = () => {
+        if (this.state.user) { 
+        firebase.database().ref('user-items/' + this.state.user.uid + '/list')
+            .on('value', (snapshot) => {
+                let list = snapshot.val()
+                list ? this.setState({ userList: list }) : this.setState({ userList: [] })
+            })
     }
+}
 
-    removeFromList = (e) => {
-        const userlist = [...this.state.userList]
-        const index = this.state.userList.indexOf(e);
-        if (index > -1) {
-            userlist.splice(index, 1);
-        }
-        this.setState({
-            userList: userlist
+addToList = (e) => {
+    const addedItem = e
+    addedItem.done = false
+    this.setState({
+        userList: [...this.state.userList, addedItem]
+    }, () => firebase.database().ref('user-items/' + this.state.user.uid).set({
+        list: [...this.state.userList]
+    }))
+}
 
-        }, () => firebase.database().ref('user-items/' + this.state.user.uid).set({
-            list: [...this.state.userList]
-        }))
-    }
-    render() {
-        return <MyContext.Provider value={{
-            state: this.state,
-            addToList: this.addToList,
-            removeFromList: this.removeFromList,
-        }}>
-            {this.props.children}
-        </MyContext.Provider>
+removeFromList = (e) => {
+    const userlist = [...this.state.userList]
+    const index = this.state.userList.map(item => item.id).indexOf(e);
+    if (index > -1) {
+        userlist.splice(index, 1);
     }
+    this.setState({
+        userList: userlist
+
+    }, () => firebase.database().ref('user-items/' + this.state.user.uid).set({
+        list: [...this.state.userList]
+    }))
+}
+render() {
+    return <MyContext.Provider value={{
+        state: this.state,
+        addToList: this.addToList,
+        removeFromList: this.removeFromList,
+    }}>
+        {this.props.children}
+    </MyContext.Provider>
+}
 }
diff --git a/src/item-details/Item-details.js b/src/item-details/Item-details.js
@@ -5,15 +5,15 @@ import { AddToList } from '../user-list/AddToList'
 export default function ItemDetails(props) {
     const [item, setItem] = useState('')
     const [error, setError] = useState(false)
-    const [loading, setLoading] = useState(true)
-
-
+    const [loading, setLoading] = useState(false)
 
     useEffect(() => {
-        fetch(`https://okularnicy-app.firebaseio.com/items/${props.location.state.item.id}.json`)
+        fetch(`https://okularnicy-app.firebaseio.com/items/${props.match.params.id}.json`)
             .then(response => response.json())
             .then(data => {
-                setItem(data)
+                const currentitem = data
+                currentitem.id = props.match.params.id
+                setItem(currentitem)
                 setLoading(false)
             })
             .catch(err => setError(err))
@@ -33,7 +33,7 @@ export default function ItemDetails(props) {
                     </Item.Meta>
                     <Item.Description>Tip: {item.proTip}</Item.Description>
                     <Item.Extra>
-                        <AddToList itemId={item.id} />
+                        <AddToList item={item} />
                     </Item.Extra>
                 </Item.Content>
             </Item>

diff --git a/src/main-list/Main-list.js b/src/main-list/Main-list.js
@@ -67,7 +67,7 @@ function MainList() {
             .map(item => (
                 <List.Item key={item.id}>
                     <List.Content floated='right'>
-                        <AddToList itemId={item.id} iconic={true} />
+                        <AddToList item={item} iconic={true} />
                     </List.Content>
                     <List.Content>
                         <Link to={{

diff --git a/src/user-list/AddToList.js b/src/user-list/AddToList.js
@@ -4,38 +4,18 @@ import { MyContext } from '../auth/Auth'
 
 export function AddToList(props) {
     const userList = useContext(MyContext)
-    function findItem(itemId) { return (userList.state.userList.indexOf(itemId)) }
-    if (props.iconic) {
-        return (
-            <>
-                {(findItem(props.itemId) > -1) ? (<Button itemId={props.itemId}  size="large" color='red' icon floated='right' onClick={(e) => userList.removeFromList(props.itemId)}>
-                    <Icon name='minus' />
-                </Button>
-                )
-                    : (
-                        <Button itemId={props.itemId} color='green' floated='right' size={"large"} icon onClick={(e) => userList.addToList(props.itemId)}>
-                            <Icon name='plus' />
-                        </Button>)
-                }
-            </>
-        )
-    }
-
-    return (
-        <>
-            {(findItem(props.itemId) > -1) ? (<Button itemId={props.itemId} coSr='red' floated='right' onClick={(e) => userList.removeFromList(props.itemId)}>
-                Remove<Icon name='right minus' />
-            </Button>
-            )
-                : (
-                    <Button itemId={props.itemId} color='green' floated='right' onClick={(e) => userList.addToList(props.itemId)}>
-                        Add<Icon name='right plus' />
-                    </Button>)
-            }
+    function findItem(item) { return (userList.state.userList.map(item => item.id).indexOf(item.id)) }
 
+    return <> {(findItem(props.item) > -1)
+        ? <Button size="large" color='red' icon floated='right' onClick={() => userList.removeFromList(props.item.id)}>
+            <Icon name='minus' />
+        </Button>
+        : <Button color='green' floated='right' size={"large"} icon onClick={() => userList.addToList(props.item)}>
+            <Icon name='plus' />
+        </Button>
+    }
+    </>
 
 
-        </>
-    )
 }
 
diff --git a/src/user-list/User-list.js b/src/user-list/User-list.js
@@ -67,7 +67,7 @@ export default class UserList extends React.Component {
             <h1> Things to pack</h1>
             <List divided>
                 {
-                    this.filterItems().map(item =>
+                    this.context.state.userList.map(item =>
                         <List.Item key={item.id}>
                             <Link to={{
                                 pathname: `/items/${item.id}`,
@@ -81,7 +81,7 @@ export default class UserList extends React.Component {
                                 </List.Content>
                             </Link>
                             <List.Content floated='right'>
-                                <AddToList itemId={item.id} iconic={true} />
+                                <AddToList item={item}  iconic={true} />
                             </List.Content>
                         </List.Item>
                     )