I’m working on a component that asks a user to upload a profile photo. There is a `next` button greyed out below the image container. When the user uploads a photo, a photo size slider appears between the photo container and the button. This causes the button to scroll down and the user has to scroll down to click next. My goal is to prevent this and perhaps make the container go up instead to keep the button visible. I’ve linked to 2 images that illustrate a before and after and I’m showing the React component with `styled-components` code below.

Before:

r/webdev - How to prevent a page from scrolling down when adding another component?

Before

r/webdev - How to prevent a page from scrolling down when adding another component?

After

import React, { useContext, useState, useEffect } from 'react';
import styled from 'styled-components';
import Typography from 'components/Typography';
// import { useMediaQuery } from 'beautiful-react-hooks';
import { medium } from 'constants/mediaQueries';
import AppButton from 'components/AppButton';
import useFetcher from 'hooks/useFetcher';
import { getMeApi } from 'utils/apiRoutes';
import Loader from 'components/Loader';
import routePaths from 'containers/Router/routePaths';
import { useHistory, useLocation } from 'react-router-dom';
import { UserContext } from 'containers/context/UserContext';
import checkmarkImage from 'assets/images/checkmark.svg';
import { useDispatch } from 'react-redux';
import BackArrowGrid from 'components/Auth/BackArrowGrid';
import UploadImageInput from 'components/UploadImageInput';
import { setPlainLogo, setInitialLogo } from '../../store/header/actions';

// const MOBILE = 250;
// const DESKTOP = 356;

const Container = styled.div`
  width: 100%;
  min-height: 0;
  align-items: center;
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  border: pink solid 2px;
`;

const ButtonContainer = styled.div`
  margin-top: 32px;
  display: flex;
  align-items: center;
  flex-direction: row;
  div {
    margin-bottom: 16px;
  }

  img {
    margin-left: 8px;
  }
`;

const Title = styled(Typography)`
  font-size: 40px;
  text-transform: uppercase;
  margin-bottom: 64px;

  @media (min-width: ${medium}) {
    margin-bottom: 64px;
  }
`;

const ButtonContent = styled.span`
  display: flex;
  align-items: center;
`;

const Form = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  border: yellow solid 2px;
  .empty {
    display: none;
  }

  @media (min-width: ${medium}) {
    flex-direction: column;
    align-items: center;
    min-height: auto;

    .empty {
      display: block;
      width: 118px;
    }
  }
`;

const UploadPicture = () => {
  const { fetcher, error, isLoading } = useFetcher();
  const { setUserFromLogin } = useContext(UserContext);
  const history = useHistory();
  const location = useLocation();
  // const isDesktop = useMediaQuery(`(min-width: ${medium})`);
  const dispatch = useDispatch();
  const [image, setImage] = useState({});

  const uploadImage = async () => {
    const result = await fetcher({
      url: getMeApi,
      method: 'POST',
      body: {
        photo: image.croppedImage.source,
      },
    });
    if (result.errors) {
      return;
    }
    setUserFromLogin(result.user);
    if (location.profile) {
      history.push(routePaths.Profile);
    } else {
      history.push(routePaths.Welcome);
    }
  };

  useEffect(() => {
    dispatch(setPlainLogo());
    return () => dispatch(setInitialLogo());
  }, []);

  const onPictureChange = newImage => {
    setImage(prevImage => ({
      ...prevImage,
      ...newImage,
    }));
  };

  return (
    <>
      <BackArrowGrid>
        <Container>
          <Title h1>Profile photo</Title>
          <Form>
            <div className="empty">&nbsp;</div>
            <UploadImageInput
              onChange={onPictureChange}
              image={image}
              placeholder={
                "Upload a profile photo. This is how you'll appear to other Color TV users."
              }
              height={356}
              width={356}
              horizontalPadding={60}
              aspect={1}
              round
            />
            <ButtonContainer>
              {error && (
                <Typography error>
                  Error while uploading the image, please try again.
                </Typography>
              )}

              <AppButton
                primary={!!image.croppedImage}
                disabled={isLoading || !image.croppedImage}
                onClick={uploadImage}
                noBorder
              >
                <ButtonContent>
                  {isLoading ? <Loader className="center" size={30} /> : 'Next'}
                  {!isLoading && !!image.croppedImage && (
                    <img src={checkmarkImage} alt="checkmark_icon" />
                  )}
                </ButtonContent>
              </AppButton>
            </ButtonContainer>
          </Form>
        </Container>
      </BackArrowGrid>
    </>
  );
};

export default UploadPicture;



Source link

Write A Comment