From e199f28a384dfd6fdf71e6ddaa21799096099cf9 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sat, 27 Jun 2020 16:49:58 +0300
Subject: add dialog window for uploading avatar

---
 src/components/UploadImage/UploadImage.tsx | 69 ++++++++++++++++++++++++++++++
 src/index.tsx                              |  2 +-
 src/pages/ProfilePage/ProfileInfo.tsx      | 32 +++-----------
 src/pages/ProfilePage/ProfilePage.tsx      |  5 ++-
 4 files changed, 80 insertions(+), 28 deletions(-)
 create mode 100644 src/components/UploadImage/UploadImage.tsx

(limited to 'src')

diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx
new file mode 100644
index 0000000..929151f
--- /dev/null
+++ b/src/components/UploadImage/UploadImage.tsx
@@ -0,0 +1,69 @@
+import React, {useRef} from 'react';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import {patch} from "../../requests";
+import {User} from 'which-types';
+
+interface PropTypes {
+ displayD: boolean;
+ setDisplayD: (d: boolean) => void;
+ setUserInfo: (a: User) => void;
+ setUser: (a: User) => void
+}
+
+const UploadImage: React.FC<PropTypes>  = ({displayD,setDisplayD,setUserInfo,setUser}) => {
+  const urlRef = useRef<HTMLInputElement>(null);
+
+  const handleClose = () => {
+    setDisplayD(false);
+  };
+
+  const updateAvatar = (event: any) => {
+    const id = localStorage.getItem('userId');
+    const newAvatar = urlRef.current?.value;
+    console.log(newAvatar);
+    patch(`/users/${id}`, {avatarUrl: newAvatar}).then(res => {
+      setUserInfo(res.data);
+      setUser(res.data);
+    });
+    setDisplayD(false);
+  };
+
+  return (
+    <div>
+      <Dialog open={displayD} onClose={handleClose} >
+        <DialogTitle id="form-dialog-title">Upload an Image</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Unfortunetly we do not support uploading images yet. Please provide a valid URL to your image.
+          </DialogContentText>
+          <TextField
+            autoFocus
+            margin="dense"
+            id="name"
+            label="Image URL"
+            type="text"
+            fullWidth
+            autoComplete="off"
+            inputRef={urlRef}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={updateAvatar} color="primary">
+            Submit
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+};
+
+export default UploadImage;
diff --git a/src/index.tsx b/src/index.tsx
index d50700b..0e6f761 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -92,7 +92,7 @@ const App: React.FC = () => {
       <CssBaseline />
       <Header navigate={navigate} userImage={user?.avatarUrl}/>
       <div className={classes.root}>
-        { page.prefix === 'profile' && <ProfilePage logOut={logOut} id={page.id} navigate={navigate} /> }
+        { page.prefix === 'profile' && <ProfilePage logOut={logOut} id={page.id} navigate={navigate} setUser={setUser}/> }
         { page.prefix === 'feed' && <FeedPage navigate={navigate} /> }
         { page.prefix === 'auth' && <AuthPage logIn={logIn} /> }
       </div>
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index b68075f..6578764 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -6,6 +6,7 @@ import CameraAltIcon from '@material-ui/icons/CameraAlt';
 import MoreMenu from "./MoreMenu";
 import {patch} from '../../requests';
 import Highlight from "../../components/Highlight/Highlight";
+import UploadImage from "../../components/UploadImage/UploadImage";
 
 
 interface PropTypes {
@@ -13,6 +14,8 @@ interface PropTypes {
   logOut: () => void;
   savedPolls: number;
   totalVotes: number;
+  setUserInfo: (a: User) => void;
+  setUser: (a:User) => void;
 }
 
 const useStyles = makeStyles({
@@ -67,22 +70,14 @@ const StyledBadge = withStyles((theme) => ({
   },
 }))(Badge);
 
-const ProfileInfo: React.FC<PropTypes> = ({user, logOut,savedPolls, totalVotes}) => {
+const ProfileInfo: React.FC<PropTypes> = ({user, logOut,savedPolls, totalVotes, setUserInfo,setUser}) => {
   const classes = useStyles();
-  const [input,setInput] = useState('hide');
-  const urlRef = useRef<HTMLInputElement>();
+  const [input,setInput] = useState(false);
 
   const handleClick = () => {
-    input === 'hide' ? setInput('show') : setInput('hide');
+    input === false ? setInput(true) : setInput(false);
   };
 
-  const updateAvatar = (event: any) => {
-    const id = localStorage.getItem('userId');
-    const newAvatar = urlRef.current?.value;
-    patch(`/users/${id}`, {avatarUrl: newAvatar}).then(res => {
-      console.log(res);
-    })
-  };
 
   return (
     <div className={classes.root}>
@@ -109,20 +104,7 @@ const ProfileInfo: React.FC<PropTypes> = ({user, logOut,savedPolls, totalVotes})
                 <Avatar className={classes.avatar} src={user?.avatarUrl}/>
               </StyledBadge>
             </div>
-            {
-              input === 'show'
-                ?<form>
-                <TextField
-                  inputRef={urlRef}
-                  id="url"
-                  label="url:"
-                  variant="outlined"
-                  color="secondary"
-                />
-                  <button type='submit' onClick={updateAvatar}>upload</button>
-                </form>
-                : null
-            }
+            <UploadImage displayD={input} setDisplayD={setInput} setUserInfo={setUserInfo} setUser={setUser}/>
           </div>
           : <Avatar className={classes.avatar} src={user?.avatarUrl}/>
       }
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 3506995..b2ca0a0 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -9,9 +9,10 @@ interface PropTypes {
   logOut: () => void;
   navigate: (prefix: string, id: string) => void;
   id: string;
+  setUser:(a:User)=>void;
 }
 
-const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate }) => {
+const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate,setUser }) => {
   const [userInfo, setUserInfo] = useState<User>();
   const [polls, setPolls] = useState<Poll[]>([]);
   const [totalVotes, setTotalVotes] = useState<number>(0);
@@ -39,7 +40,7 @@ const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate }) => {
 
   return (
     <>
-      <ProfileInfo user={userInfo} logOut={logOut} savedPolls={polls.length} totalVotes={totalVotes}/>
+      <ProfileInfo user={userInfo} setUserInfo={setUserInfo} setUser={setUser} logOut={logOut} savedPolls={polls.length} totalVotes={totalVotes}/>
       <Feed polls={polls} navigate={navigate} />
     </>
   );
-- 
cgit v1.2.3