FZ12OK-55 addButton improvements

infoshareacademy · Feb 23, 2020 · 53a50a1 · 53a50a1
1 parent b7c8cb2
commit 53a50a1
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 63 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,3 +1,17 @@
+body {
+    background-image: url("./images/background.jpg");
+    background-position: center;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.containerWrapper {
+    background: rgb(255, 255, 255);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8897934173669468) 0%, rgba(255, 255, 255, 0.7805497198879552) 100%);
+    padding: 78px 20px 10px;
+}
+
 .fileContainer {
     overflow: hidden;
     position: relative;
@@ -15,4 +29,8 @@
     right: 0;
     text-align: right;
     top: 0;
+}
+
+.item-done {
+    text-decoration: line-through;
 }
diff --git a/src/App.js b/src/App.js
@@ -19,7 +19,7 @@ function App() {
 
       <BrowserRouter>
         <Navigation />
-        <Container style={{ paddingTop: '78px'}} >
+        <Container className="containerWrapper" >
           <AuthProtected>
             <Switch>
               <Route

diff --git a/src/auth/Auth.js b/src/auth/Auth.js
@@ -7,6 +7,7 @@ export class AuthContext extends React.Component {
     state = {
         user: '',
         userList: [],
+        refresh: false
     }
 
     componentDidMount() {
@@ -28,45 +29,69 @@ export class AuthContext extends React.Component {
     }
 
     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: [] })
-            })
+        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: [] })
+                })
+        }
     }
-}
 
-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]
-    }))
-}
+    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]
+        }))
+    }
 
-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);
+    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]
+        }))
+    }
+    markAsDone = (e) => {
+        const userlist = [...this.state.userList]
+        const index = this.state.userList.map(item => item.id).indexOf(e);
+        if (index > -1) {
+            console.log("done", userlist);
+
+            userlist[index].done = !userlist[index].done;
+        }
+        this.setState({
+            userList: userlist
+
+        }, () => firebase.database().ref('user-items/' + this.state.user.uid).set({
+            list: [...this.state.userList]
+        }))
     }
-    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>
-}
+    refresh = () => {
+        this.setState((prevState) => ({
+            refresh: !prevState.refresh
+        }))
+    }
+
+    render() {
+        return <MyContext.Provider value={{
+            state: this.state,
+            addToList: this.addToList,
+            markAsDone: this.markAsDone,
+            removeFromList: this.removeFromList,
+            refresh: this.refresh
+        }}>
+            {this.props.children}
+        </MyContext.Provider>
+    }
 }
diff --git a/src/images/background.jpg b/src/images/background.jpg
diff --git a/src/item-details/Item-details.js b/src/item-details/Item-details.js
@@ -33,7 +33,8 @@ export default function ItemDetails(props) {
                     </Item.Meta>
                     <Item.Description>Tip: {item.proTip}</Item.Description>
                     <Item.Extra>
-                        <AddToList item={item} />
+                        <AddToList item={item} list desc/>
+
                     </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 item={item} iconic={true} />
+                        <AddToList item={item} iconic={true} desc/>
                     </List.Content>
                     <List.Content>
                         <Link to={{
@@ -121,7 +121,7 @@ function MainList() {
             {list}
             <List.Item>
                 <Link to="/item-add">
-                    <Button fluid>Missed?</Button>
+                    <Button fluid>Missing something? Add new item</Button>
                 </Link>
             </List.Item>
         </List>

diff --git a/src/navigation/Navigation.js b/src/navigation/Navigation.js
@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react'
-import { Icon, Menu, Button } from 'semantic-ui-react'
+import { Icon, Menu, Button, Image, Label } from 'semantic-ui-react'
 import { Link } from 'react-router-dom';
 import firebase from 'firebase'
 import { MyContext } from '../auth/Auth';
@@ -21,6 +21,9 @@ const Navigation = () => {
           onClick={handleItemClick}
         >
           <Icon name='list ul' />
+          {context.state.userList.length > 0 && <Label color='teal' corner size="mini">
+            {context.state.userList.length}
+          </Label>}
           My list
         </Menu.Item>
       </Link>
@@ -42,9 +45,11 @@ const Navigation = () => {
             active={activeItem === 'user'}
             onClick={handleItemClick}
           >
-            <Icon name='user circle' />
-            Your profile
-            </Menu.Item>
+            <Image
+              size="mini"
+              avatar
+              src={context.state.user.photoURL || '/assets/userPlaceholder.jpg'} />
+          </Menu.Item>
 
         </Link>
         <Menu.Item>

diff --git a/src/user-list/AddToList.js b/src/user-list/AddToList.js
@@ -1,15 +1,34 @@
 import React, { useContext } from 'react';
-import { Button, Icon } from 'semantic-ui-react'
+import { Button, Icon, Label } from 'semantic-ui-react'
 import { MyContext } from '../auth/Auth'
 
 export function AddToList(props) {
     const userList = useContext(MyContext)
     function findItem(item) { return (userList.state.userList.map(item => item.id).indexOf(item.id)) }
+    const isPacked = () => userList.state.userList[findItem(props.item)].done
 
     return <> {(findItem(props.item) > -1)
-        ? <Button size="large" color='red' icon floated='right' onClick={() => userList.removeFromList(props.item.id)}>
-            <Icon name='minus' />
-        </Button>
+        ? <>
+            <Button size="large" color='red' icon floated='right' onClick={() => userList.removeFromList(props.item.id)}>
+                <Icon name='minus' />
+            </Button>
+
+            {props.desc &&
+                (isPacked()
+                    ? <Label color='green' horizontal>
+                        Packed
+              </Label>
+
+                    : <Label color='gray' horizontal>
+                    To pack
+          </Label>
+                )
+            }
+            {props.list &&
+                <Button size="large" color={isPacked() && "orange"} icon floated='right' onClick={() => userList.markAsDone(props.item.id)}>
+                    <Icon color={isPacked() && "green"} name='check' />
+                </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
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, List, Segment, Loader, Dimmer } from 'semantic-ui-react';
+import { Image, List, Segment, Loader, Dimmer, Button } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { AddToList } from '../user-list/AddToList';
 import { MyContext } from '../auth/Auth'
@@ -65,28 +65,32 @@ export default class UserList extends React.Component {
 
         return <>
             <h1> Things to pack</h1>
-            <List divided>
+            {this.context.state.userList.length < 1
+            ? <> <h3>Nothing to pack</h3> <Link to='/' ><Button color="orange" fluid content="See list of items"/></Link></>
+            :<List divided>
                 {
                     this.context.state.userList.map(item =>
                         <List.Item key={item.id}>
+                            < List.Content floated='right'>
+                                <AddToList item={item} iconic={true} list desc />
+                            </List.Content>
                             <Link to={{
                                 pathname: `/items/${item.id}`,
                                 state: {
                                     item
                                 }
                             }}>
-                                <List.Content>
-                                    <List.Header>{item.img} {item.name}</List.Header>
+
+                                <List.Content className={item.done && 'item-done'}>
+                                    <List.Header >{item.img} {item.name}</List.Header>
                                     <List.Description>{item.description}</List.Description>
                                 </List.Content>
                             </Link>
-                            <List.Content floated='right'>
-                                <AddToList item={item}  iconic={true} />
-                            </List.Content>
+
                         </List.Item>
                     )
                 }
-            </List>
+            </List>}
         </>
     }
 }
diff --git a/src/user-profile/User-profile.js b/src/user-profile/User-profile.js
@@ -58,13 +58,16 @@ export default class UserProfile extends React.Component {
             uploadTask.snapshot.ref.getDownloadURL().then(url => {
                 this.context.state.user.updateProfile({
                     photoURL: url
-                }).then(() => this.setState((prevState) => ({
-                    refresh: !prevState.refresh,
-                    uploadSuccess: true,
-                    uploadMessage: "Photo updated successfully",
-                    uploadProgress: !prevState.uploadProgress,
-                    editPhoto: false
-                })))
+                }).then(() => {
+                    this.setState((prevState) => ({
+                        // refresh: !prevState.refresh,
+                        uploadSuccess: true,
+                        uploadMessage: "Photo updated successfully",
+                        uploadProgress: !prevState.uploadProgress,
+                        editPhoto: false
+                    }))
+                    this.context.refresh()
+                })
             });
         });