<file_sep>import React from 'react';
import {Grid} from '@material-ui/core';
import {makeStyles} from '@material-ui/core/styles'
import Logo from './images/logo.PNG'
import TextField from '@material-ui/core/TextField';


const useStyles=makeStyles((theme)=>({
   main:{
     backgroundColor:'#FFFFFF',
     borderBottom:'2px solid #efeff5',
     width:'100%',
     height:'60px'
     
   },
   logo:{
    [theme.breakpoints.down('xs')]: {
      marginLeft:'30px',
    },
     marginTop:'19px',
     marginLeft:'22%',
     
   }

}));
  

const Practice = () => {

  const classes=useStyles();
  return (
    <Grid className={classes.main} container xs={12} >
      <Grid className={classes.logo} item xs={3}>
      <img c src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" alt="umair" />
     </Grid>
     <Grid className={classes.search} item xs={3}>
     <TextField
         
          id="outlined-margin-dense"
          defaultValue="Search"
          className={classes.textField}
         
          margin="dense"
          variant="outlined"
        />
      

     </Grid>
  

    </Grid>
  )
}

export default Practice
<file_sep>import logo from './logo.svg';
import './App.css';
import Login from './component/Login/Login';
import SignUp from './component/Signup/SignUp';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import FrontPage from './component/FrontPage/FrontPage';
import AuthenticationRoute from './component/autheticationRoute'
import Profile from './component/Profile/index';
import UpdateProfile from './component/settings/UpdateProfile'
import Screen from './component/Login/Screen';
function onError() {
  return (
    <div>Error 404 page not found</div>
  )
}
function App() {
  return (
    <BrowserRouter>


      <Switch>
        {/* Login */}
        <Route exact path="/screen">
          <Screen />
        </Route>
        <Route exact path="/">
          <Login />
        </Route>
        {/* SignUP */}
        <Route exact path="/signup" >
          <SignUp />

        </Route>



        {/* <Route exact  path="/profile" component={Profile}>
    <Profile />
   
    </Route> */}
        <Route exact path="/updateProfile" component={UpdateProfile}>
          <UpdateProfile />

        </Route>
        {/* Front Page */}
        {/* <Route path="/frontpage" component={FrontPage} /> */}
        <AuthenticationRoute path="/frontpage" component={FrontPage} />
        <AuthenticationRoute path="/profile" component={Profile} />

        <Route path="*" component={onError} />



      </Switch>


    </BrowserRouter>
  );
}

export default App;<file_sep>import React from 'react';
import Header from './Header';
import Stories from './Stories';
import HomePosts from './Post'
import Posts from './Posts';
import Suggestion from './Suggestions';
import { withAuthContext } from '../../context';

const FrontPage = (props) => {

  
  return (
    <div>
      <Header />
<div className="container" >
    <div className="box">
    <Stories />
    <HomePosts />
    </div>
    <div className="hidden">
       <Suggestion /> 
    </div>
</div>
</div>
  )
}
export default withAuthContext(FrontPage)
<file_sep>import React, { createContext, useState, useEffect } from 'react'
import { gql, useLazyQuery } from '@apollo/client'

const USER = gql`
query{
    data: loggedInUser{
        name
        email
        phone
        avatar
    }
}
`

const { Provider, Consumer } = createContext()

export const withAuthContext = Component => props => (
    <Consumer>{value => <Component {...value} {...props} />}</Consumer>
)

export default function AuthProvider({ children }) {
    const [state, setState] = useState({})
    const [refetchUser, { loading }] = useLazyQuery(USER, {
        fetchPolicy: 'no-cache',
        onCompleted: ({ data }) => {
            setState(prev => ({ ...prev, user: { ...data } }))
        },
        onError: ({ message }) => {
            console.log(message);
        }
    });
    useEffect(() => {
        refetchUser();
    }, [])
    return (
        <Provider value={{
            ...state,
            refetchUser,
            userDataLoading: loading,
            setState,
        }}>
            {children}
        </Provider>
    )
}<file_sep>import React, { useState } from 'react';

import './style.css'
import profilePicture from '../../images/child.jpg'
import {gql, useQuery} from '@apollo/client'; 
const ShowData = gql`
query {
  loggedInUser {
    name,
    email,
    avatar

  }
}
`

export default function Suggestion() {
    
    const [userName, setUserName] = useState('Muhammadsaadali96')
    const {loading,data,error} =useQuery(ShowData);
    if(loading) return <h1>Loading</h1>
    return (
        <div className='main'>
            <div className='myProfile'>

                <div className='image'>
                {/* {loading ? (
                <Skeleton variant="circle" width={40} height={40} />
              ) : (
                  error ? 
                  (
                    <Avatar className={classes.small}
                      alt="Umair_Zafar"
                    >E</Avatar>
                  ) : (
                    <Avatar className=""
                      alt="Umair_Zafar"
                      src={`/images/${data.loggedInUser.avatar}`}
                    />
                  )
                )} */}

                    <img alt="avater" src={`/images/${data.loggedInUser.avatar}`}className="avatar" />
                </div>
                <div className='myName'>
                    <p><strong>{data.loggedInUser.name}</strong></p>
                    <p className='gray'>{data.loggedInUser.name}</p>
                </div>
            </div>

            <div className="suggestion">

                <p> Suggestion for You </p>
                <p > See all</p>

            </div>

            <div className='suggestionContainer'>
                <div className='suggestionProfile'>

                    <div className='image'>

                        <img alt="avater" src={profilePicture} className="suggestionAvatar" />
                    </div>
                    <div className='suggestionName'>
                        <p><strong>{userName}</strong></p>
                        <p className='gray'>Suggestion for you </p>
                    </div>
                </div>
                <div className='follow'>Follow</div>
            </div>
            <div className='suggestionContainer'>
                <div className='suggestionProfile'>

                    <div className='image'>

                        <img alt="avater" src={profilePicture} className="suggestionAvatar" />
                    </div>
                    <div className='suggestionName'>
                        <p><strong>{userName}</strong></p>
                        <p className='gray'>Suggestion for you </p>
                    </div>
                </div>
                <div className='follow'>Follow</div>
            </div>

            <div className='suggestionContainer'>
                <div className='suggestionProfile'>

                    <div className='image'>

                        <img alt="avater" src={profilePicture} className="suggestionAvatar" />
                    </div>
                    <div className='suggestionName'>
                        <p><strong>{userName}</strong></p>
                        <p className='gray'>Suggestion for you </p>
                    </div>
                </div>
                <div className='follow'>Follow</div>
            </div>

            <div className='suggestionContainer'>
                <div className='suggestionProfile'>

                    <div className='image'>

                        <img alt="avater" src={profilePicture} className="suggestionAvatar" />
                    </div>
                    <div className='suggestionName'>
                        <p><strong>{userName}</strong></p>
                        <p className='gray'>Suggestion for you </p>
                    </div>
                </div>
                <div className='follow'>Follow</div>
            </div>

        </div>
    )

}<file_sep>import React, { useState } from 'react'
import SettingsIcon from '@material-ui/icons/Settings';
import Grid from '@material-ui/core/Grid';
import { Link, useHistory } from "react-router-dom";




import { gql, useQuery } from '@apollo/client';
import UpdateProfile from '../settings/UpdateProfile';


import Topbar from '../../component/FrontPage/Header';
import Tabs from './Tabs'
import './styles.css'



const ShowData = gql`
query {
  loggedInUser {
    name,
    email,
    avatar

  }
}
`

const Profile = () => {
    const [name, setName] = useState('Umair')
    const [post, setPost] = useState(0)
    const [followers, setFollowers] = useState(0)
    const [following, setFollowing] = useState(0)
    const { data, loading, error } = useQuery(ShowData);
    const history = useHistory();
    // const navigateTo = () => history.push('/updateProfile');

    if (loading || !data) return <h1>Loading</h1>

    const onChange = () => {
        let path = '/updateProfile'

        history.push(path);

    }

    return (
        <div >
            <Topbar />
            <br />
            <div>
                <Grid className='flex' container spacing={1}>
                    <img alt="Avatar" src={`/images/${data.loggedInUser.avatar}`} className="profileAvatar" />
                    <div >

                        <div className='nameSection' >
                            <div className='marginLeft'>{data.loggedInUser.name}</div>

                            <div className='marginLeft'>

                                <button type="submit" onClick={onChange}> Edit Profile</button>

                            </div>
                            <div className='marginLeft'>  <SettingsIcon /></div>

                        </div>
                        <div className='nameSection' >
                            <div className='marginLeft row'> <p>Post </p><span>{post}</span> </div>

                            <div className='marginLeft row'>
                                <p> Followers </p><span>{followers}</span>
                            </div>
                            <div className='marginLeft row'>  <p> Following </p> <p> {following} </p> </div>

                        </div>
                        <div className='nameSection' >
                            <div className='marginLeft '> <b> {data.loggedInUser.name} </b> </div>

                        </div>
                    </div>
                </Grid>
            </div>
            <div className='stories'>

                {/* Stories Section */}

            </div>
            <div className=''>
                <Tabs />
            </div>
        </div>
    )
}

export default Profile<file_sep>
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
   root:{
    
     
     textAlign:'center'


   },
    paper: {
      display: 'flex',
      // flexWrap: 'wrap',
      alignItems: 'center',
      justifyContent: 'center',
      '& > *': {
        margin: theme.spacing(3),
        width: theme.spacing(50),
        height: theme.spacing(100),
      },
    },
    inputField: {
        '& > *': {
          
          margin: theme.spacing(1),
          marginLeft: 'auto',
          marginRight: 'auto',
          width: '35ch',
          height: '6ch'
        },
    },
    signUpPaper: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      '& > *': {
        margin: theme.spacing(-2),
        width: theme.spacing(50),
        height: theme.spacing(8),
      },
    },  
    
  }));

  export default useStyles<file_sep>const {AuthenticationError} = require('apollo-server');
const jwt=require('jsonwebtoken');
const { SECRET_KEY } = require('./config');

module.exports=(context) =>{
  const authHeader = context.req.headers.authorization;
  if(authHeader){
    const token =authHeader.split('Bearer ')[1];
    if(token){
      try{
        const user=jwt.verify(token,SECRET_KEY);
        return user
      }catch(err){
        throw new AuthenticationError('Invalid/Expired token');

      }
    }
    throw new Error('Athentication must be \ Bearer [token]');
  }
  throw new Error('Athentication token must be provided');
  
}<file_sep>import React, { useState, useEffect } from 'react'

import _ from 'lodash';
import profilePicture from '../../images/child.jpg'

import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';





import CardHeader from '@material-ui/core/CardHeader';
import IconButton from '@material-ui/core/IconButton';
import Button from '@material-ui/core/Button';
import Header from '../FrontPage/Header';

import { from, gql, useMutation, useQuery } from '@apollo/client';
import { withAuthContext } from '../../context';





const UPDATEPROFILE = gql`

mutation($name:String,$avatar:Upload,$email:String,$password:String,$phone:String){
  updateProfile(name:$name,avatar:$avatar,email:$email,password:$<PASSWORD>,phone:$phone){
    name
    email
    avatar
    phone    
  }
}

`;



function TabPanel(props) {
    const { children, value, index, ...other } = props;



    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`vertical-tabpanel-${index}`}
            aria-labelledby={`vertical-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Box p={3}>
                    <Typography>{children}</Typography>
                </Box>
            )}
        </div>
    );
}

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
};

function a11yProps(index) {
    return {
        id: `vertical-tab-${index}`,
        'aria-controls': `vertical-tabpanel-${index}`,
    };
}

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.paper,
        display: 'flex',
        height: 224,
        marginTop: '60px',
        marginLeft: '20%',
        marginRight: '20%',
    },
    tabs: {
        borderRight: `2px solid ${theme.palette.divider}`,
    },
    indicator: {
        backgroundColor: '#262626',
        left: '0px'
    },
    avatar: {
        width: '5vh',
        height: '5vh',
        borderRadius: '50%',
        border: '1px solid #DBDBDB'
    },
    margin: {
        margin: '-40px 0px 0px 0px',
        fontSize: '9px',
        textAlign: 'center',
        color: '#17A2F7'
    },

}));

const initialState = {
    name: '',
    email: '',
    phone: '',
    avatar: {
        file: null,
        preview: ''
    },
}

function UpdateProfile({ user }) {
    const classes = useStyles();
    const [isLoading, setLoading] = useState(true);
    const [tabValue, setTabValue] = React.useState(0);



    // donot change
    const [previousValues, setPreviousValues] = useState(initialState);

    // changeable state
    const [userData, setUserData] = useState(initialState);
    //This is for Update Data
    const [updateProfile] = useMutation(UPDATEPROFILE, {
        //Set for Initial State
        onCompleted: ({ updateProfile }) => {
            setPreviousValues(reformUser(updateProfile))
            setUserData(reformUser(updateProfile))
            setLoading(false);
        },
        onError: ({ message }) => {
            console.log(message);
            setLoading(false);
        }
    })

    const reformUser = (data) => {
        const { name, email, phone, ...user } = data
        const avatar = {
            file: null,
            preview: `/images/${user.avatar}`
        }
        return { name, email, phone, avatar }
    }

    useEffect(() => {
        if (user) {
            setUserData(reformUser(user))
            setPreviousValues(reformUser(user))
            setLoading(false)
        }
    }, [user])
    const handleChangeTab = (event, newValue) => setTabValue(newValue)
    // const {data,loading,error} =useQuery(ShowData);



    const handleChange = ({ target: { name, value, files } }) => {

        setUserData(prev => ({
            ...prev,
            [name]: name === 'avatar' ? {
                file: files[0],
                preview: URL.createObjectURL(files[0])
            }
                : value

        }))
    };


    const formSubmit = (ev) => {
        ev.preventDefault();
        if (!canBeSubmitted()) {
            return console.log("Form is not changed at all...")
        }

        setLoading(true);
        const variables = {
            ...userData,
            avatar: userData.avatar.file
        }
        updateProfile({ variables })
    }

    function canBeSubmitted() {
        return !_.isEqual(previousValues, userData);
    }

    console.log('canBeSubmitted', !canBeSubmitted())

    if (isLoading) return <h1>Loading</h1>;

    return (
        <div style={{ backgroundColor: '#FAFAFA', minHeight: '100%' }}>
            <Header />
            <div className={classes.root} style={{ border: '1px solid #DBDBDB', height: '450px' }}>
                <Tabs
                    orientation="vertical"
                    variant="scrollable"
                    value={tabValue}
                    classes={{
                        indicator: classes.indicator
                    }}
                    onChange={handleChangeTab}
                    aria-label="Vertical tabs example"
                    className={classes.tabs}
                >
                    <Tab label="Edit Profile" {...a11yProps(0)} />
                    <Tab label="Change Password" {...a11yProps(1)} />
                    <Tab label="Apps and Websites" {...a11yProps(2)} />
                    <Tab label="Email and SMS" {...a11yProps(3)} />
                    <Tab label="Push Notification" {...a11yProps(4)} />
                    <Tab label="Item Six" {...a11yProps(5)} />
                    <Tab label="Item Seven" {...a11yProps(6)} />
                </Tabs>
                <TabPanel value={tabValue} index={0}>
                    <div style={{ display: 'flex', justifyContent: 'center', marginLeft: '70px' }}>
                        <form onSubmit={formSubmit}>
                            <CardHeader
                                avatar={
                                    <img src={`${userData.avatar.preview}`} className={classes.avatar} alt={userData.name} />
                                }
                                action={
                                    <IconButton
                                        aria-label="more"
                                        aria-controls="long-menu"
                                        aria-haspopup="true"
                                    >
                                    </IconButton>
                                }
                                title={userData.name}
                            />
                            <input type="file" name="avatar" id="avatar" onChange={handleChange} /><br /><br />
                            <div style={{ textAlign: 'right' }}>
                                <label><b>Username</b></label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input
                                    type="text"
                                    name="name"
                                    value={userData.name}
                                    onChange={handleChange}
                                    style={{ border: '1px solid #dbdbdb', height: '30px', borderRadius: '5px' }}

                                />
                                <br />
                                <br />
                                <label><b>Phone Number</b></label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input
                                    type="number"
                                    name="phone"
                                    value={userData.phone}
                                    onChange={handleChange}

                                    style={{ border: '1px solid #dbdbdb', height: '30px', borderRadius: '5px' }} />
                                <br />
                                <br />
                                <label><b>Email</b></label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input
                                    type="email"
                                    name="email"
                                    value={userData.email}
                                    onChange={handleChange}
                                    style={{ border: '1px solid #dbdbdb', height: '30px', borderRadius: '5px' }} />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


                                <br />
                                <br />
                                <br />
                                <div style={{ marginRight: '90px' }}>
                                    <Button
                                        disabled={!canBeSubmitted()}
                                        variant="contained"
                                        type="submit"
                                        // style={{ backgroundColor: '#17a2f7', color: 'white' }}
                                    >Submit</Button>
                                </div>

                            </div>
                        </form>
                    </div>
                </TabPanel>
                <TabPanel value={tabValue} index={1}>
                    <div style={{ display: 'flex', justifyContent: 'center', marginLeft: '70px' }}>
                        <form>
                            <CardHeader
                                avatar={
                                    <img src={profilePicture} className={classes.avatar} alt='Saad' />
                                }
                                action={
                                    <IconButton
                                        aria-label="more"
                                        aria-controls="long-menu"
                                        aria-haspopup="true"
                                    >
                                    </IconButton>
                                }
                                title='USERNAME'
                            />
                            <div style={{ textAlign: 'right' }}>
                                <label><b>Old Password</b></label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="password" style={{ border: '1px solid #db<PASSWORD>', height: '30px', borderRadius: '5px', backgroundColor: '#FAFAFA' }}></input>
                                <br />
                                <br />
                                <label><b>New Password</b></label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="password" style={{ border: '1px solid #<PASSWORD>', height: '30px', borderRadius: '5px', backgroundColor: '#FAFAFA' }}></input>
                                <br />
                                <br />
                                <label><b>Confirm Password</b></label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="password" style={{ border: '1px solid #<PASSWORD>', height: '30px', borderRadius: '5px', backgroundColor: '#FAFAFA', }}></input>
                                <br />
                                <br />
                                <br />
                                <div style={{ marginRight: '90px' }}>
                                    <Button variant="contained" style={{ backgroundColor: '#17a2f7', color: 'white' }}>
                                        Change password</Button>
                                </div>

                            </div>
                        </form>
                    </div>
                </TabPanel>
                <TabPanel value={tabValue} index={2}>
                    Item Three
      </TabPanel>
                <TabPanel value={tabValue} index={3}>
                    Item Four
      </TabPanel>
                <TabPanel value={tabValue} index={4}>
                    Item Five
      </TabPanel>
                <TabPanel value={tabValue} index={5}>
                    Item Six
      </TabPanel>
                <TabPanel value={tabValue} index={6}>
                    Item Seven
      </TabPanel>
            </div>

        </div>
    )
}

export default withAuthContext(UpdateProfile);<file_sep>import React, { useState } from 'react';
import { RiMessengerLine } from 'react-icons/ri';
import { MdExplore } from 'react-icons/md'
import { Avatar } from '@material-ui/core';
import TurnedInNotIcon from '@material-ui/icons/TurnedInNot';
import useStyles from './StylesH';
import Child from '../../images/child.jpg'
import { fade, makeStyles } from '@material-ui/core/styles';
import Skeleton from '@material-ui/lab/Skeleton';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import Badge from '@material-ui/core/Badge';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import SearchIcon from '@material-ui/icons/Search';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MailIcon from '@material-ui/icons/Mail';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import HomeIcon from '@material-ui/icons/Home';
import SettingsIcon from '@material-ui/icons/Settings';
import TextField from '@material-ui/core/TextField';
import { useHistory, Link } from 'react-router-dom';
import PostB from './Posts';
import { gql, useQuery } from '@apollo/client'
import { Token } from 'graphql';
import Profile from '../../component/Profile/index';
import updateProfile from '../settings/UpdateProfile'

const ShowData = gql`
query {
  loggedInUser {
    name,
    email,
    avatar

  }
}
`

function Header() {
  const classes = useStyles();
  const { data, loading, error } = useQuery(ShowData);
  const history = useHistory();
  const logout = () => {
    localStorage.clear();
    history.push('/');
  }




  //  let user=JSON.parse(localStorage.getItem())

  const [anchorEl, setAnchorEl] = React.useState(null);
  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);
  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMobileMenuClose = () => {
    setMobileMoreAnchorEl(null);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
    handleMobileMenuClose();
  };

  const handleMobileMenuOpen = (event) => {
    setMobileMoreAnchorEl(event.currentTarget);
  };

  const menuId = 'primary-search-account-menu';
  const renderMenu = (


    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      id={menuId}
      keepMounted
      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >

      <MenuItem onClick={handleMenuClose}>

        {/* LOGOUT  */}
      Profile</MenuItem>
      <MenuItem onClick={logout}>LOGOUT</MenuItem>
    </Menu>
  );

  const mobileMenuId = 'primary-search-account-menu-mobile';
  const renderMobileMenu = (
    <Menu
      anchorEl={mobileMoreAnchorEl}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      id={mobileMenuId}
      keepMounted
      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      open={isMobileMenuOpen}
      onClose={handleMobileMenuClose}
    >
      <MenuItem onClick={handleProfileMenuOpen}>
        <IconButton
          aria-label="account of current user"
          aria-controls="primary-search-account-menu"
          aria-haspopup="true"
          color="inherit"
        >
          <AccountCircle />
        </IconButton>
        <p>Profile</p>
      </MenuItem>
      <MenuItem>
        <IconButton aria-label="show 4 new mails" color="inherit">
          <Badge badgeContent={4} color="secondary">
            <TurnedInNotIcon />
          </Badge>
        </IconButton>
        <p>Saved</p>
      </MenuItem>
      <MenuItem>
        <IconButton aria-label="show 11 new notifications" color="inherit">
          <Badge badgeContent={11} color="secondary">
            <SettingsIcon />
          </Badge>
        </IconButton>
        <p>Settings</p>
      </MenuItem>
      <MenuItem>
        <hr />

        <p>LOGOUT</p>
      </MenuItem>


    </Menu>
  );
  
  return (

    <div className={classes.grow}>

      <AppBar position="static">
        <Toolbar style={{ backgroundColor: 'white', color: 'black' }} >
          <Typography className={classes.title} variant="h6" noWrap style={{ fontFamily: 'Lobster cursive', marginLeft: '10vw' }}>
            <img
              className={classes.insta}
              src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
              alt="Insta"
            />
          </Typography>
          <div className={classes.search} style={{ marginLeft: '13vw' }}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>


            <InputBase

              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
            />

          </div>
          <div className={classes.grow} />
          <div className={classes.sectionDesktop}>
            <IconButton aria-label="show 4 new mails" color="inherit">

              <Badge badgeContent={0} color="secondary">
                <PostB />
              </Badge>
            </IconButton>
            <IconButton aria-label="show 4 new mails" color="inherit">

              <Badge badgeContent={0} color="secondary">
                <RiMessengerLine />
              </Badge>
            </IconButton>
            <IconButton aria-label="show 4 new mails" color="inherit">

              <Badge badgeContent={0} color="secondary">
                <Link to="/profile">
                  <MdExplore />
                </Link>

              </Badge>
            </IconButton>
            <IconButton aria-label="show 17 new notifications" color="inherit">
              <Badge badgeContent={0} color="secondary">
                <FavoriteBorderIcon />
              </Badge>
            </IconButton>
            <IconButton
              edge="end"
              aria-label="account of current user"
              aria-controls={menuId}
              aria-haspopup="true"
              onClick={handleProfileMenuOpen}
              color="inherit"
            >
              {loading ? (
                <Skeleton variant="circle" width={40} height={40} />
              ) : (
                  error ? 
                  (
                    <Avatar className={classes.small}
                      alt="Umair_Zafar"
                    >E</Avatar>
                  ) : (
                    <Avatar className={classes.small}
                      alt="Umair_Zafar"
                      src={`/images/${data.loggedInUser.avatar}`}
                    />
                  )
                )}
            </IconButton>
          </div>
          <div className={classes.sectionMobile}>

            <IconButton aria-label="show 4 new mails" color="inherit">

              <Badge badgeContent={0} color="secondary">
                <HomeIcon />
              </Badge>
            </IconButton>
            <IconButton aria-label="show 4 new mails" color="inherit">

              <Badge badgeContent={0} color="secondary">
                <MailIcon />
              </Badge>
            </IconButton>
            <IconButton aria-label="show 17 new notifications" color="inherit">
              <Badge badgeContent={0} color="secondary">
                <FavoriteBorderIcon />
              </Badge>
            </IconButton>
            <IconButton aria-label="show 4 new mails" color="inherit"
              aria-label="show more"
              aria-controls={mobileMenuId}
              aria-haspopup="true"
              onClick={handleMobileMenuOpen}
              color="inherit"
            >


              <Badge badgeContent={0} color="secondary">
                <Avatar className={classes.small}
                  alt="Umair_Zafar"
                  src={Child}
                />

              </Badge>

            </IconButton>


          </div>
        </Toolbar>
      </AppBar>
      {renderMobileMenu}
      {renderMenu}
    </div>
  );
}

export default Header;<file_sep>/*
  Warnings:

  - You are about to drop the column `contetnt` on the `Comment` table. All the data in the column will be lost.

*/
-- RedefineTables
PRAGMA foreign_keys=OFF;
CREATE TABLE "new_Comment" (
    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    "content" TEXT,
    "createdAt" DATETIME,
    "postId" INTEGER NOT NULL,
    "userId" INTEGER,
    FOREIGN KEY ("postId") REFERENCES "Post" ("id") ON DELETE CASCADE ON UPDATE CASCADE,
    FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
);
INSERT INTO "new_Comment" ("id", "createdAt", "postId", "userId") SELECT "id", "createdAt", "postId", "userId" FROM "Comment";
DROP TABLE "Comment";
ALTER TABLE "new_Comment" RENAME TO "Comment";
PRAGMA foreign_key_check;
PRAGMA foreign_keys=ON;
<file_sep>const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();
const jwt = require('jsonwebtoken')
const bcrypt = require('bcryptjs');
const path = require('path');
const fs = require('fs');
const { Upload } = require('graphql-upload');
const moment = require('moment');
// const APP_SECRET = 'GraphQL-is-aw3some';
const { APP_SECRET, getUserID } = require('./util');
const { create } = require('domain');
const { error, info } = require('console');
const { ApolloError } = require('apollo-server');

const { existsSync, mkdirSync, unlinkSync, createWriteStream } = require('fs');
const { saveImage } = require('./savefile');


module.exports = {
  Query: {
    userPosts: async (root, args, context, info) => {
      const user = await getUserID(context)

      const oneUser = await prisma.user.findUnique({
        where: {
          id: user.id
        }
      })
      return oneUser
    },
    users: () => prisma.user.findMany(),
    posts: () => prisma.post.findMany(),
    comments: (_, { postId }) => prisma.comment.findMany({ where: { postId }}),
    loggedInUser: async (_, __, context, ___) => {
      return getUserID(context);
    },
    

  },
  Mutation: {
    singUp: async (root, { password, avatar, ...data }, context) => {
      const isEmailExists = await prisma.user.findUnique({ where: { email: data.email } });
      if (isEmailExists) throw new Error("User already exists with this email...");
      const hashpassword = bcrypt.hashSync(password, 10)
      data.password = <PASSWORD>password
      if (avatar && typeof avatar === 'object') {
        data.avatar = await saveImage(avatar);
      }

      const user = await prisma.user.create({ data })

      const token = jwt.sign({ userId: user.id }, APP_SECRET)

      return {
        token,
        user

      }
    },
    login: async (root, data, context, info) => {
      const user = await prisma.user.findUnique({
        where: { email: data.email }
      })
      if (!user) throw new Error('No such user found')

      const isPasswordMatched = bcrypt.compareSync(data.password, user.password)
      if (!isPasswordMatched) throw new Error('Password Mismatched');

      const token = jwt.sign({ userId: user.id }, APP_SECRET)

      // 3
      return {
        token,
        user
      }

    },

    createPost: async (root, { picture, ...data }, context, info) => {
      const user = await getUserID(context)

      data.picture = await new Promise((resolve, reject) => {
        return picture.then(({ createReadStream, ...rest }) => {
          const id = Math.random().toString(32).substr(7);
          const filename = `${id}-${rest.filename}`;
          if (!fs.existsSync("./uploads")) fs.mkdirSync("./uploads");
          createReadStream()
            .pipe(fs.createWriteStream(path.join('./uploads', filename)))
            .on('error', (error) => reject(new Error(error.message)))
            .on('finish', () => resolve(filename));
        })
      })

      data.user = {
        connect: {
          id: user.id
        }
      }
      return prisma.post.create({ data })
    },
    deletePost: async (root, { id }, context, info) => {
      const user = await getUserID(context);
      const post = await prisma.post.findUnique({ where: { id } });
      if (!post) throw new ApolloError("Post not found...");

      if (post.userId !== user.id) {
        throw new ApolloError("Post doesn't belong to you...")
      }

      await prisma.post.delete({ where: { id } });
     
      // deleting if old file is given
      if (existsSync(`./uploads/${post.picture}`)) unlinkSync(`./uploads/${post.picture}`);

      return `Post deleted$ {id} Successfully...`
    },
    updateProfile: async (root, { avatar, ...data }, context) => {
      const user = await getUserID(context);
      console.log(user)
      const isEmailDuplicate = await prisma.user.findFirst({
        where: { email: data.email, NOT: { id: user.id } }
      })
      if (isEmailDuplicate) throw new Error('Email already exists')
      if (avatar && typeof avatar === 'object') {
        data.avatar = await saveImage(avatar, user.avatar || false);
      }
      const updateData = await prisma.user.update({
        where: { id: user.id },
        data
      })

      return updateData



    },
    updatePost: async (root, { picture, id, ...data }, context, info) => {
      await getUserID(context);
      const post = await prisma.post.findUnique({ where: { id } });
      if (picture && typeof picture === 'object') {
        data.picture = await saveImage(picture, post.picture || false);
      }

      return prisma.post.update({
        where: { id },
        data
      })
    },
    createComment: async (root, { postId, ...data }, context, info) => {
      const user = await getUserID(context);
      const post = await prisma.post.findUnique({ where: { id: postId } });
      data.postId = post.id
      data.userId = user.id

      return prisma.comment.create({ data })
    },
    deleteComment: async (root, { deleteId }, context, info) => {
      const user = await getUserID(context);
      const comment = await prisma.comment.findUnique({ where: { id: deleteId } })
      if (!comment) throw new Error('Comment not Found');
      if (comment.userId !== user.id) throw new ApolloError("This isn't your comment...")

      await prisma.comment.delete({ where: { id: deleteId } });
      return "Comment id delete Successfully"
    }

  },
  User: {
    posts: async (root, args, context, info) => {
      return prisma.post.findMany({ where: { userId: root.id } })
    }
  },
  Post: {
    user: async (root, args, context, info) => {
      return prisma.user.findUnique({ where: { id: root.userId } })
    },
    comments:async (root,args,contetx,info)=>{
      return prisma.comment.findMany({where:{postId:root.id}})
    }
    
  },
  
  Comment: {
    user: async (root, args, context, info) => {
      return prisma.user.findUnique({ where: { id: root.userId } })
    },
    post: async (root, args, context, info) => {
      return prisma.post.findUnique({ where: { id: root.postId } })
    }
  }
}<file_sep>export { default as AuthProvider, withAuthContext } from './auth';<file_sep>import React,{useState,useRef, useEffect} from 'react';
import styled, { css } from 'styled-components/macro';
const HeroSection = styled.section`
margin-bottom:0px;
height:100vh;
max-height:1100px;
position:relative;
overflow:hidden;
`;

const HeroWrapper =styled.div`
position:relative;
margin-left:110px;
border-radius:2px;
width:240px;
height:430px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;

`;

const HeroSlide = styled.div`
z-index:1;
width:100%;
height:100%;
`;

const HeroSlider = styled.div`
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;

}
`;

const HeroImage = styled.img`
position:absolute;
top:0;
left:0;
/* width:290px;
height:480px; */
width:100%;
height:100%;
object-fit:cover;

`;




function Hearo({slides}) {

    const [current,setCurrent]=useState(0);
    const length=slides.length;
    const timeout=useRef(null);
    useEffect(()=>{
        const nextSlide = () =>{
            setCurrent(current=>(current===length -1 ? 0 :current + 1))
        }
        timeout.current = setTimeout(nextSlide,2000)

        return function(){
            if(timeout.current){
                clearTimeout(timeout.current)
            }
        }

    },[current,length])
    const nextSlide =()=>{
        if(timeout.current){
            clearTimeout(timeout.current)
        }
        setCurrent(current === length -1 ? 0 :current +1)
        // console.log(current) 
    }
    const prevSlide=()=>{
        if(timeout.current){
            clearTimeout(timeout.current)
        }
        setCurrent(current===0 ? length -1 :current -1)
        // console.log(current);
    }
    if(!Array.isArray(slides)||slides.length<=0)
    {
        return null;
    }
    return (
        <HeroSection>
        <HeroWrapper>
            
            {slides.map((slide,index)=>{
                return(
                    <HeroSlide key={index}>
                      {index === current && (
                        <HeroSlider>
                            <HeroImage src={slide.image} alt={slide.alt}/>
                            

                            
                        </HeroSlider>
                      )};
                        
                    </HeroSlide>
                );

            })}
            
        </HeroWrapper>
        </HeroSection>
    );
};
export default Hearo;
<file_sep>/*
  Warnings:

  - You are about to drop the column `date` on the `Post` table. All the data in the column will be lost.

*/
-- RedefineTables
PRAGMA foreign_keys=OFF;
CREATE TABLE "new_Post" (
    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    "content" TEXT,
    "userId" INTEGER,
    "createdAt" DATETIME,
    FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
);
INSERT INTO "new_Post" ("id", "content", "userId", "createdAt") SELECT "id", "content", "userId", "createdAt" FROM "Post";
DROP TABLE "Post";
ALTER TABLE "new_Post" RENAME TO "Post";
PRAGMA foreign_key_check;
PRAGMA foreign_keys=ON;
<file_sep>-- AlterTable
ALTER TABLE "Post" ADD COLUMN "picture" TEXT;
<file_sep>import { Hidden } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

 const useStyles = makeStyles((theme) => console.log(theme) || ({
  root: {
      flexGrow: 1,
      display:'flex',
      alignItems:'center',
      backgroundColor: "",
      overflow:'hidden'
      
  },
  main:{
   
   
      
  },
  grandpa:{
    
    position: 'relative',
    [theme.breakpoints.down('xs')]:{
        display:'none',
       

        

        
    },
    
   
    


    top: 2,
    left: 0
  },
  paper: {
      padding: theme.spacing(2),
      paddingLeft:'30px ',
      textAlign: 'center',
      backgroundColor: "#FFFFFF",
      height: '400px',
      width: '320px',
      marginTop: '30px',
      border: '1px solid #FAFAFA '


  },
  paper1: {
    height: '5px',
    width: '360px',
    marginTop: '10px',
    marginRight:'100px',
    paddingRight:'10px',
    textAlign: 'center',
    border: 'none',
    

  },
  image5:{
   position:'absolute',
   
   marginLeft:'353px',
   marginTop:'-562px',
   [theme.breakpoints.up('lg')]:{
     marginLeft:'336px'
   },
   [theme.breakpoints.down('lg')]:{
    marginLeft:'111px'
  },
  [theme.breakpoints.down('sm')]:{
    marginLeft:'-10px'
  },
  [theme.breakpoints.down('sm')]:{
    marginLeft:'-10px'
  },
  [theme.breakpoints.up('lg')]:{
    marginRight:'100px'
  },
  
   

  },
  mobile: {
    position:'relative',
    marginLeft: '43%',
    marginTop: '8px',
    height:'660px',
    width:'500px',
    [theme.breakpoints.down('lg')]:{
        position:'relative',
        marginTop: '6px',
        marginLeft:'70px'
      },
      [theme.breakpoints.down('sm')]:{
        position:'relative',
        marginLeft:'-50px'
      },
    // [theme.breakpoints.up('md')]: {
    //     paddingRight:'100px'
       
    // },

    // [theme.breakpoints.up('md')]: {
        
       
    //   },
      
    //   [theme.breakpoints.down('xs')]: {
    //     alignItems: 'center',
    //     justifyContent: 'center',
    //       display:'none'
         
       
    // }
     
  },
  logo: {
      marginTop: '5px'
  },
  paper2: {
      padding: theme.spacing(2),
      textAlign: 'center',
      backgroundColor: "#FFFFFF",
      height: '41px',
      width: '320px',
      marginTop: '13px',
      paddingLeft:'30px ',
  },
  textField: {
      marginTop: '20px',
      backgroundColor: "#FAFAFA",
  },
  textField1: {
      marginTop: '15px',
      backgroundColor: "#FAFAFA",

  },
  buttonLogin: {
      backgroundColor: "#0095f6",
      height: 30,
      width: 266,
      marginTop: '20px'
  },
  para1: {
      fontSize: '14px',
      margin: '15px',
      textDecoration:'none'
  },
  para2:{
      textAlign:'center',
      margin:'60px 30px 10px 60px'
  },
  linkS:{
      textDecoration:'none',
      color:'blue',
      
      
  }
}));


export default useStyles;<file_sep>const { gql } = require('apollo-server-express');

module.exports = gql`
type User{
  id:Int!
  name:String!
  email:String!
  password:String!
  gender:Gender!
  avatar:String
  phone: String
  dateOfBirth:String!
  posts:[Post!]
  comments:[Comment!]
}
type Post{
  id:Int!
  picture:String
  content:String!
  user:User!
  comments:[Comment!]
}
type Comment{
  id:Int!
  content:String!
  createdAt:String!
  user:User!
  post: Post!  
}
type Authpayload{
  token:String!
  user:User!
}
enum Gender{
  Male
  Female
}
type Query{
  users:[User!]
  posts:[Post!]
  comments(postId: Int!):[Comment!]
  loggedInUser: User!
  userPosts:User!
  
}
type Mutation{
  
  singUp(name:String!,email:String!,password:<PASSWORD>!gender:String!,avatar:Upload, phone: String!,dateOfBirth:String!):Authpayload!
  login(email:String!,password:String!):Authpayload!
 
  updateProfile(name:String,avatar:Upload,email:String,password:<PASSWORD>,phone:String):User!
  createPost(picture:Upload!,content:String!):Post!
  
  deletePost(id:Int!):String! 
  updatePost(id:Int!,picture:Upload!,content:String!):Post!
  
  #For comment Mutation
  createComment(postId: Int!,content:String!):Comment!
  deleteComment(deleteId:Int!):Authpayload!





  



  
}

type Subscription{
  _:Boolean
}
`;<file_sep>import React, { useState } from 'react';
import mobile from '../../images/screen.png'
import instalogo from '../../images/logo.PNG'
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import InputAdornment from "@material-ui/core/InputAdornment";
import Button from '@material-ui/core/Button';
import useStyles from './styles';
import { Link } from 'react-router-dom';
import AppStore from '../../images/AppStore.png';
import GoogleStore from '../../images/google.png';
import FrontPage from '../FrontPage/FrontPage';
import AUTH_TOKEN from '../../constant';
import { FaFacebookSquare } from 'react-icons/fa';
import Haro from './slider';
import { IconContext } from "react-icons";
import { SliderData } from './SliderData';
import './slides.css';
import { BrowserRouter as Router, Route, Switch, Redirect, useHistory } from 'react-router-dom';
import {
  ApolloClient, gql, useMutation
} from '@apollo/client';


const LOGIN_MUTATION = gql`
  mutation LoginMutation(
    $email: String!
    $password: String!
  ) {
    login(email: $email, password: $password) {
      token
      user{
        name
        email
      }
    }
  }
`;






const Home = () => {
  const [showPassword, setShowPassword] = useState(false);
  const handleClickShowPassword = () => setShowPassword(!showPassword);
  const handleMouseDownPassword = () => setShowPassword(!showPassword);
  const classes = useStyles();
  const [loginValues, setLoginValues] = useState({

    email: '',
    password: '',

  });
  const history = useHistory();
  const [login] = useMutation(LOGIN_MUTATION, {
    onCompleted: (data) => {
      localStorage.setItem(AUTH_TOKEN, data.login.token)
      console.log(localStorage)
      history.push('/frontpage');
    },
    onError: ({ message }) => alert(message)
  })

  function onFormChange(event) {
    setLoginValues({
      ...loginValues,
      [event.target.name]: event.target.value

    })

  }
  function onValueChange(event) {
    event.persist()
    event.preventDefault();
    console.log({ loginValues })
    login({ variables: loginValues })
  } 
  if (localStorage.getItem(AUTH_TOKEN)) return <Redirect to='/frontpage' />

  return (
    <div className={classes.root}>
      <Grid container spacing={6}>
        <Grid item xs={12} sm={6}>
          <div className={classes.grandpa}>
            <div className={classes.mobile}>
              <img src={mobile} alt='Mobile Phone' />
            </div>
            <div className={classes.image5}>

              <Haro slides={SliderData} />
            </div>

          </div>

        </Grid>

        <Grid className={classes.main} item xs={12} sm={6}>
          <Paper className={classes.paper}>
            <div className={classes.logo}>
              <img src={instalogo} alt="LOGO" />
            </div>
            <form onSubmit={onValueChange}>
              <div>

                <TextField type="email" name="email" onChange={onFormChange} required style={{ height: 50, width: 266, border: '1px solid #EDEDED' }} InputProps={{ disableUnderline: true }} className={classes.textField} FloatingLabelStyle={{ color: 'black' }} id="Username" label="Phonenumber, username, or email" />
                <TextField type="password" name="password" onChange={onFormChange} required style={{ height: 50, width: 266, border: '1px solid #<PASSWORD>' }} className={classes.textField1} label='Password' type={showPassword ? "text" : "password"} // <-- This is where the magic happens
                  InputProps={{ // <-- This is where the toggle button is added.
                    disableUnderline: true,
                    endAdornment: (
                      <InputAdornment position="end">
                        <Button aria-label="toggle password visibility" onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword}>
                          {showPassword ? "Hide" : "Show"}
                        </Button>
                      </InputAdornment>
                    )
                  }}
                />
              </div>


              {/* <Link to=""> */}
              <Button


                style={{ backgroundColor: "#0095F6", color: "white" }}
                className={classes.buttonLogin}
                type="submit"
                variant="contained"
              > Login</Button>
              {/* </Link> */}
            </form>
            <div style={{ marginLeft: '43px', marginTop: '15px ', width: '70%', height: '12px', borderBottom: '1px solid #EDEDED', textAlign: 'center' }}>
              <span style={{ backgroundColor: 'white', padding: ' 0 10px' }}>
                OR
             </span>
            </div>
            <IconContext.Provider value={{ color: "#385185", className: "global-class-name" }}>
              <div style={{ margin: '28px' }}>
                <FaFacebookSquare /> Log in With Facebook
  </div>
            </IconContext.Provider>
            <div style={{ marginBottom: '3px' }}>
              <p>Forgot Password</p>
            </div>

          </Paper>
          <Paper className={classes.paper2}>
            <div className={classes.para1}>
              <p>Don't have an account? <Link className={classes.linkS} to="/signup"> Sign up  </Link></p>
            </div>
          </Paper>
          {/* <Paper className={classes.paper1}>
              <div style={{ marginTop: '-10px', color: '#000000' }}>
                Don't have an account? <Link className={classes.sign}>Sign Up</Link>
              </div>
            </Paper> */}

          <div className={classes.detail}>
            <div style={{ marginLeft: '8.5em' }}>
              <p>Get the App</p>

            </div>
            <div style={{ marginTop: '15px' }}>
              <img src={AppStore} alt="GooleApp" style={{ marginRight: '10px', marginLeft: '30px', height: '45px', width: '140px' }} />
              <img src={GoogleStore} alt="App Storex" style={{ height: '45px', width: '140px' }} />

            </div>


          </div>
        </Grid>

      </Grid>
    </div>
  );
}

export default Home;<file_sep>import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Divider from '@material-ui/core/Divider';
import Typography from '@material-ui/core/Typography';
import Logo from '../../images/logo.PNG';
import Avatar from '@material-ui/core/Avatar';
import Child from '../../images/child.jpg';
import { Link, useHistory } from "react-router-dom";


const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    maxWidth: 370,
    height:'350px',
    border:'1px solid #C0C0C0',
    backgroundColor: theme.palette.background.paper,
    margin:'10px',
    
  },
  chip: {
    margin: theme.spacing(0.5),
  },
  section1: {
    margin: theme.spacing(2, 2),
  },
  section2: {
    margin: theme.spacing(2),
    marginTop:'-10px'
  },
  section3: {
    margin: theme.spacing(3, 1, 1),
  },
  // section4: {
   
  //   display:'flex',
  //   justifyContent:'center',
  //    margin: theme.spacing(2, 10),
    
    
  // },
  Logo:{
    height:'70px',
    width:'200px',
    margin:'25px 0px 0px 70px'


  },
  avatar:{
    height:'100px',
    width:'100px',
    margin:'15px 40px 0px 120px'
  },
  button:{
    width:'200px',
    height:'30px',
    marginLeft:'11vh',
    backgroundColor:'#0095F6'
  },
  link:{
    color:'#0095F6',
    paddingLeft:'1px'
    
  }
}));



export default function MiddleDividers() {
  const history = useHistory();
  const classes = useStyles();
  const onChange = () =>{
    let path='/'
    
     history.push(path);

 }
  return (
    <div className={classes.root}>
      <div className={classes.section1}>
        <Grid container alignItems="center">
          <Grid item xs>
            <img  className={classes.Logo} src={Logo} alt="umair" />
          </Grid>
         
        </Grid>
       </div>
     
      <div className={classes.section2}>
      <Avatar className={classes.avatar} alt="<NAME>" src={Child} />
        
        
      </div>
      <div className={classes.section3}>
      <Button style={{textTransform:'none'}} className={classes.button}  variant="contained" color="primary" disableElevation>
      Continue as iiiumair
    </Button>
      </div>
      <div className={classes.section4}>
      <span style={{marginLeft:'94px', display:'flex'}}>
      <p>Not iiiumair?</p>
      <Button onClick={onChange} type="submit" style={{textTransform:'none'}} className={classes.link} href="#text-buttons" color="primary">
        Switch accounts
      </Button>
      </span>
      </div>
    </div>
  );
}<file_sep>const { existsSync, mkdirSync, unlinkSync, createWriteStream } = require('fs');
const path = require('path');

async function saveImage(image, old) {
	return new Promise((resolve, reject) => {
		image.then(({ createReadStream, ...rest }) => {
			const filename = `${Math.random().toString(32).substr(7, 5)}-${rest.filename}`;

			// checking whether the uploads folder is exists
			if (!existsSync('./uploads')) mkdirSync('./uploads');

			// deleting if old file is given
			if (old && existsSync(`./uploads/${old}`)) unlinkSync(`./uploads/${old}`);

			createReadStream()
				.pipe(createWriteStream(path.join('./uploads', filename)))
				.on('error', (error) => reject(new Error(error.message)))
				.on('finish', () => resolve(filename));
		});
	});
}

module.exports = {
	saveImage
}<file_sep>-- CreateTable
CREATE TABLE "User" (
    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    "name" TEXT NOT NULL,
    "email" TEXT NOT NULL,
    "password" TEXT,
    "gender" TEXT,
    "avatar" TEXT NOT NULL
);

-- CreateTable
CREATE TABLE "Post" (
    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    "content" TEXT,
    "date" DATETIME NOT NULL,
    "userId" INTEGER,
    "createdAt" DATETIME,
    FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
);

-- CreateTable
CREATE TABLE "Comment" (
    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    "contetnt" TEXT,
    "createdAt" DATETIME,
    "postId" INTEGER NOT NULL,
    "userId" INTEGER,
    FOREIGN KEY ("postId") REFERENCES "Post" ("id") ON DELETE CASCADE ON UPDATE CASCADE,
    FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
);

-- CreateTable
CREATE TABLE "PostLikeBy" (
    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    "postId" INTEGER NOT NULL,
    "userId" INTEGER,
    "createdAt" DATETIME,
    FOREIGN KEY ("postId") REFERENCES "Post" ("id") ON DELETE CASCADE ON UPDATE CASCADE,
    FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
);

-- CreateIndex
CREATE UNIQUE INDEX "User.email_unique" ON "User"("email");
<file_sep>-- AlterTable
ALTER TABLE "User" ADD COLUMN "dateOfBirth" TEXT;
<file_sep>import React from 'react';
import Slider from "react-slick";
import { makeStyles, Paper, Avatar } from '@material-ui/core';
// import {} from '@material-ui/core';
// import { IoChevronForwardCircle, IoChevronBackCircleSharp } from 'react-icons/fa';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import Car from '../../images/fruit.jpg';

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        justifyContent: 'center',
        flexWrap: 'wrap',
        margin: 'auto',
        // width: '60%',
        width: '100%',

        '& > *': {
            margin: theme.spacing(2),
            // width: theme.spacing(105),
            height: theme.spacing(13),

            [theme.breakpoints.up('xs')]: {
                width: '98%'
            },
        },
    },
    slider: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexWrap: 'wrap',

        '& > *': {
            margin: theme.spacing(2),
        },
    },

    pictures: {
        width: theme.spacing(7),
        height: theme.spacing(7),
        border: 'double 4px #CBC8C8',
        margin: 'auto'

    },
}));
function SampleNextArrow(props) {
    const { className, style, onClick } = props;
    return (
        <div
            className={className}
            style={{ ...style, display: "block", borderRadius: '50%', backgroundColor: '#dce0e6'}}
            onClick={onClick}
        />
    );
}
function SamplePrevArrow(props) {
    const { className, style, onClick } = props;
    return (
        <div
            className={className}
            style={{ ...style, display: "block", borderRadius: '50%', backgroundColor: '#dce0e6' }}
            onClick={onClick}
        />
    );
}



export default function Stories() {
    const classes = useStyles();
    var settings = {
        dots: false,
        infinite: false,
        speed: 800,
        slidesToShow: 8,
        slidesToScroll: 3,
        nextArrow: <SampleNextArrow />,
        prevArrow: <SamplePrevArrow />,
        responsive: [
            {
                breakpoint: 1440,
                settings: {
                    slidesToShow: 7,
                    slidesToScroll: 3,

                }
            },
            {
                breakpoint: 1070,
                settings: {
                    slidesToShow: 6,
                    slidesToScroll: 3,

                }
            },
            {
                breakpoint: 966,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 3,

                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 6,
                    slidesToScroll: 3,

                }
            },
            {
                breakpoint: 550,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 3,
                }
            },
            {
                breakpoint: 426,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 333,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 2,
                }
            },

        ]
    };
    return (
        <div className={classes.root}>
            <Paper className={classes.paper} >

                <Slider className={classes.slider}  {...settings} >
                    <div><Avatar alt="Saad" className={classes.pictures} src={Car} />
                        <span  >Saad</span>
                    </div>
                    <div><Avatar alt="Saad" className={classes.pictures} src={Car} /><span >Umair</span> </div>
                    <div ><Avatar alt="Saad" className={classes.pictures} src={Car} /><span >Saad</span>  </div>
                    <div ><Avatar alt="Saad" className={classes.pictures} src={Car} /><span >Saad</span>  </div>
                    <div ><Avatar alt="Saad" className={classes.pictures} src={Car} /><span >Saad</span>  </div>
                    <div ><Avatar alt="Saad" className={classes.pictures} src={Car} /><span >Saad</span>  </div>
                    <div ><Avatar alt="Saad" className={classes.pictures} src={Car} /><span >Saad</span>  </div>
                    <div ><Avatar alt="Saad" className={classes.pictures} src={Car} /><span >Saad</span>  </div>
                    <div ><Avatar alt="Saad" className={classes.pictures} src={Car} /><span >Saad</span>  </div>
                    <div ><Avatar alt="Saad" className={classes.pictures} src={Car} /><span >Saad</span>  </div>
                    <div ><Avatar alt="Saad" className={classes.pictures} src={Car} /><span >Saad</span>  </div>
                    <div ><Avatar alt="Saad" className={classes.pictures} src={Car} /><span >Saad</span>  </div>
                </Slider>
            </Paper>

        </div>
    );
}<file_sep>/*
  Warnings:

  - Made the column `content` on table `Comment` required. The migration will fail if there are existing NULL values in that column.
  - Made the column `userId` on table `Comment` required. The migration will fail if there are existing NULL values in that column.

*/
-- RedefineTables
PRAGMA foreign_keys=OFF;
CREATE TABLE "new_Comment" (
    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    "content" TEXT NOT NULL,
    "postId" INTEGER NOT NULL,
    "createdAt" DATETIME,
    "userId" INTEGER NOT NULL,
    FOREIGN KEY ("postId") REFERENCES "Post" ("id") ON DELETE CASCADE ON UPDATE CASCADE,
    FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
);
INSERT INTO "new_Comment" ("id", "content", "createdAt", "postId", "userId") SELECT "id", "content", "createdAt", "postId", "userId" FROM "Comment";
DROP TABLE "Comment";
ALTER TABLE "new_Comment" RENAME TO "Comment";
PRAGMA foreign_key_check;
PRAGMA foreign_keys=ON;
<file_sep>import React from 'react'
import { Redirect, Route } from 'react-router-dom'
import AUTH_TOKEN from '../constant';

function AuthenticationRoute({ component, path }) {

    if (localStorage.getItem(AUTH_TOKEN)) return <Route path={path} component={component}/>
    return <Redirect path='/'/>
}

export default AuthenticationRoute

<file_sep>//      Instagram Logo Image 
// <img src="https://i.imgur.com/zqpwkLQ.png" alt='logo' style={{marginTop: '20px'}}  /> 
import React,{useState,useEffect} from 'react'
import { Link } from "react-router-dom";
import {
    ApolloClient,from,gql, useMutation
} from '@apollo/client';
// import from '@material-ui';
import { Paper, FormControl, TextField, Button } from '@material-ui/core';
import FacebookIcon from '@material-ui/icons/Facebook';
import useStyles from './Styles';
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'
import { formatPhoneNumberIntl } from 'react-phone-number-input'


const Reg=gql`
   mutation($name:String!,$email:String!,$password:String!,$phone:String!,$gender:String!,$avatar:Upload ,$dateOfBirth:String!){
    singUp(name:$name,email:$email,password:$password,phone:$phone,gender:$gender,avatar:$avatar ,dateOfBirth:$dateOfBirth){
    
        user{
            id
            name
            email
            password
            phone
            gender
            avatar
            dateOfBirth
        }
    }
}
`;

const initial={
    
    name:'',
    email:'',
    password:'',
    conformPassword:'',
    phone:'',
    gender:'',
    avatar:'',
    dateOfBirth:'',
}

function SignUp() {
    const classes = useStyles()
    const [formState, setFormState] = useState(initial);
    const [countryCode, setCountryCode] = useState('');
    useEffect(() => {
        fetch('https://extreme-ip-lookup.com/json/')
            .then((res) => res.json())
            .then(({ countryCode }) => setCountryCode(countryCode))
            .catch((data, status) => console.log('Request failed:', data, status));
    }, []);

    const [singUp] = useMutation(Reg,{
        onCompleted:()=>{
            setFormState(initial)
        },
        onError:({message})=>{
          alert(message);
        }
    })
    const onFormChange = (event) => {
        if(typeof event=== 'string'|| !event){
            setFormState({...formState,phone:event||''})
        }
        else
        {
        const { name, type, value } = event.target
        // console.log({type})
        if (type == 'file') {
            // console.log(event.target.files[0])
            setFormState({
                ...formState,
                avatar: event.target.files[0]

            })}
            else{
                setFormState({
                    ...formState,
                    [event.target.name]: event.target.value,
                
            })}
        }}
    const onSubmitForm=e=>{
        e.preventDefault();
        console.log(formState);
        if(formState.password !== formState.conformPassword){
            alert('Password not Match');
        }
        else
        {
            singUp({variables:formState});
        }
    }

    return (
        <div className={classes.root}>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div className={classes.paper}>
                <Paper elevation={2}>

                    <h2 style={{ fontFamily: 'Lobster cursive' }}>
                        Social Media App
            </h2>
                    <h5 style={{ color: '#A9A9A9' }}>
                        Sign up to see photos and videos from your friends.
            </h5>
                    <Button variant="contained" style={{ backgroundColor: '#0095f6', color: 'white' }} >
                        <div style={{ display: 'flex', justifyContent: 'center' }}>

                            <FacebookIcon fontSize="small" /> Login with facebook
               </div>             </Button>


                    <div style={{ width: '100%', height: '12px', borderBottom: '1px solid black', textAlign: 'center' }}>
                        <span style={{ backgroundColor: 'white', padding: ' 0 10px' }}>
                            OR
             </span>
                    </div>
                    <form onSubmit={onSubmitForm}  className={classes.inputField}>
                        <TextField  name="email" label="Email" onChange={onFormChange} variant="outlined" />
                        <PhoneInput international defaultCountry={countryCode} name="phone" label="Phone" onChange={onFormChange} variant="outlined" />
                        <TextField name="name" label="Full name" onChange={onFormChange} variant="outlined" />
                        <TextField name="password" label="Password" onChange={onFormChange} variant="outlined" />
                        <TextField name="conformPassword" label="conform Password" onChange={onFormChange} variant="outlined" />
                        <TextField name="dateOfBirth" label="Date of Birth" onChange={onFormChange} variant="outlined" />
                        <input type="file" id="avatar" name="avatar" onChange={onFormChange}  /><br /><br />

                        <Button type="submit" variant="contained" style={{ backgroundColor: '#0095f6', color: 'white' }} >
                            Sign Up
             </Button>
                        <div style={{ color: '#C0C0C0', fontSize: '10px' }}>
                            By signing up, you agree to our Terms , Data Policy and Cookies Policy
             </div>

                    </form>
                </Paper>

            </div>

            <div className={classes.signUpPaper}>
                <Paper elevation={3}>
                    <div style={{ marginTop: '1.5vw' }}>
                        have an account? <Link style={{ color: '#3EC3DF', textDecoration: 'none' }} to="/">Login</Link>
                    </div>
                </Paper>
            </div>
        </div>
        </div>
    )
}

export default SignUp;