Skip to content

Commit

Permalink
Make create post button disabled if no text entered by user
Browse files Browse the repository at this point in the history
  • Loading branch information
@markohanesian
markohanesian committed Jun 20, 2024
1 parent 5a47835 commit 01cf443
Showing 1 changed file with 180 additions and 150 deletions.
330 changes: 180 additions & 150 deletions src/components/CreatePost.js
View file
Original file line number Diff line number Diff line change
@@ -1,187 +1,217 @@
import React, { useContext, useState } from 'react'
import { UserContext } from '../contexts/user'
import React, { useContext, useState } from "react";
import { UserContext } from "../contexts/user";
// icon for photo upload button
import {Fab, Tooltip, Button } from '@material-ui/core';
import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
import { Fab, Tooltip, Button } from "@material-ui/core";
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
import firebase from "firebase";
import { db, storage } from '../firebase';
import makeId from './helper/functions';
import HeaderNewUser from './HeaderNewUser';
import { db, storage } from "../firebase";
import makeId from "./helper/functions";
import HeaderNewUser from "./HeaderNewUser";

// topmost div
const CreatePostStyle = {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
margin: '1rem',
padding: '1rem',
width: '90vw',
maxWidth: '900px',
backgroundColor: 'rgb(22,22,22)',
borderRadius: "16px"
}
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
margin: "1rem",
padding: "1rem",
width: "90vw",
maxWidth: "900px",
backgroundColor: "rgb(22,22,22)",
borderRadius: "16px",
};

// Sub-div containing text and other elements
const CreatePostContainer = {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}
display: "flex",
flexDirection: "column",
alignItems: "center",
};

// User post div
const CreatePostTextArea = {
display: 'flex',
flexDirection: 'column',
width: '90vw',
maxWidth: '600px'
}
display: "flex",
flexDirection: "column",
width: "90vw",
maxWidth: "600px",
};

// text box where user writes post
const CreatePostInput = {
display: 'flex',
backgroundColor: 'whitesmoke',
resize: 'none',
border: 'none',
margin: '1rem',
padding: '.5rem',
fontWeight: '700',
borderRadius: '12px',
fontStyle: 'italic'
}
display: "flex",
backgroundColor: "whitesmoke",
resize: "none",
border: "none",
margin: "1rem",
padding: ".5rem",
fontWeight: "700",
borderRadius: "12px",
fontStyle: "italic",
};

// image preview styling
const CreatePostImagePreview = {
display: 'flex',
justifyContent: 'center',
color: 'red',
}
display: "flex",
justifyContent: "center",
color: "red",
};

// Bottom bar section
const CreatePostBottomBar = {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
padding: '2rem'
}
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
padding: "2rem",
};

// upload image icon
const CreatePostPhotoIconFab = {
display: 'flex',
backgroundColor: 'white',}
display: "flex",
backgroundColor: "white",
};

const CreatePostPhotoIcon = {
display: 'flex',
cursor: "pointer",
fontSize: "2rem",
height: "120px",
}
display: "flex",
cursor: "pointer",
fontSize: "2rem",
height: "120px",
};

// hidden default upload button
// hidden default upload button
const CreatePostUploadButton = {
display: "none"

}
display: "none",
};

export default function CreatePost() {
const [user] = useContext(UserContext).user;
const [caption, setCaption] = useState("");
const [image, setImage] = useState(null);
const [progress, setProgress] = useState(0);
// choose file button function
const handleChange = (e) => {
if (e.target.files[0]) {
setImage(e.target.files[0]);
const [user] = useContext(UserContext).user;
const [caption, setCaption] = useState("");
const [image, setImage] = useState(null);
const [progress, setProgress] = useState(0);
const [userInput, setUserInput] = useState("");
// choose file button function
const handleChange = (e) => {
setUserInput(e.target.value);

var selectedImageSrc = URL.createObjectURL(e.target.files[0]);
if (e.target.files[0]) {
setImage(e.target.files[0]);

var imagePreview = document.getElementById("image-preview");
var selectedImageSrc = URL.createObjectURL(e.target.files[0]);

imagePreview.src = selectedImageSrc;
imagePreview.style.display = "block"
}
}
var imagePreview = document.getElementById("image-preview");

// function for uploading images, creating storage ID, progress, error handling
const handleUpload = () => {
if (image) {
// variable imported from functions.js
var imageName = makeId(10);
// image storage location
const uploadTask = storage.ref(`images/${imageName}.jpg`).put(image);
// will give update when task is completed
uploadTask.on("state_changed", (snapshot) => {
// progress function with percentage
const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
setProgress(progress);
}, (error) => {
console.log(error);
}, () => {
// get download url and upload the post info
storage.ref("images").child(`${imageName}.jpg`)
.getDownloadURL()
.then((imageUrl) => {
db.collection("posts").add({
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
caption: caption,
uploadURL: imageUrl,
// makes username from email signed in with google without "@gmail.com"
username: user.email.replace("@gmail.com", ""),
avatar: user.photoURL
});
})
// after user posts, remove caption, progress percentage, and image
setCaption("");
setProgress(0);
setImage(null);

// hides image preview after uploading
document.getElementById("image-preview").style.display = "none";
imagePreview.src = selectedImageSrc;
imagePreview.style.display = "block";
}
};

// function for uploading images, creating storage ID, progress, error handling
const handleUpload = () => {
if (image) {
// variable imported from functions.js
var imageName = makeId(10);
// image storage location
const uploadTask = storage.ref(`images/${imageName}.jpg`).put(image);
// will give update when task is completed
uploadTask.on(
"state_changed",
(snapshot) => {
// progress function with percentage
const progress = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(progress);
},
(error) => {
console.log(error);
},
() => {
// get download url and upload the post info
storage
.ref("images")
.child(`${imageName}.jpg`)
.getDownloadURL()
.then((imageUrl) => {
db.collection("posts").add({
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
caption: caption,
uploadURL: imageUrl,
// makes username from email signed in with google without "@gmail.com"
username: user.email.replace("@gmail.com", ""),
avatar: user.photoURL,
});
});
// after user posts, remove caption, progress percentage, and image
setCaption("");
setProgress(0);
setImage(null);

// hides image preview after uploading
document.getElementById("image-preview").style.display = "none";
}
};

return (
<div style={CreatePostStyle}>

{/* if user exists, post. If not, sign in */}
{user ? (

<div style={CreatePostContainer}>
<div style={CreatePostTextArea}>
<textarea
style={CreatePostInput}
rows="3"
placeholder="Write something to post to the feed, and add an image if you have one to share..."
value={caption}
onChange={((e) => setCaption(e.target.value))}
>
</textarea>
<div style={CreatePostImagePreview}>
{/* img styled inline so that it is hidden by default */}
<img style={{ display: 'none', height: '8rem' }} id="image-preview" alt="preview" />
</div>
</div>
<section style={CreatePostBottomBar}>
<div>
<Tooltip title="Add Image" aria-label="add">
<Fab style={CreatePostPhotoIconFab}>
<label htmlFor="file-input">
<AddAPhotoIcon style={CreatePostPhotoIcon} />
</label>
</Fab>
</Tooltip>

<input style={CreatePostUploadButton} id="file-input" type="file" accept="image/*" onChange={handleChange} />
</div>
<Button variant="contained" style={{ color: caption ? "black" : "whitesmoke", border: "none", backgroundColor: "white" }} onClick={handleUpload}>
{`Upload ${progress !== 0 ? progress : ""}`}
</Button>
</section>
</div>
) : <HeaderNewUser />}
);
}
};

return (
<div style={CreatePostStyle}>
{/* if user exists, post. If not, sign in */}
{user ? (
<div style={CreatePostContainer}>
<div style={CreatePostTextArea}>
<textarea
style={CreatePostInput}
rows="3"
placeholder="Write something to post to the feed, and add an image if you have one to share..."
value={caption}
onChange={(e) => setCaption(e.target.value)}
></textarea>
<div style={CreatePostImagePreview}>
{/* img styled inline so that it is hidden by default */}
<img
style={{ display: "none", height: "8rem" }}
id="image-preview"
alt="preview"
/>
</div>
</div>
<section style={CreatePostBottomBar}>
<div>
<Tooltip title="Add Image" aria-label="add">
<Fab style={CreatePostPhotoIconFab}>
<label htmlFor="file-input">
<AddAPhotoIcon style={CreatePostPhotoIcon} />
</label>
</Fab>
</Tooltip>

<input
style={CreatePostUploadButton}
id="file-input"
type="file"
accept="image/*"
onChange={handleChange}
/>
</div>
<Button
variant="contained"
style={{
color: caption ? "black" : "whitesmoke",
border: "none",
backgroundColor: "white",
}}
onClick={handleUpload}
disabled={!userInput}
>
{`Upload ${progress !== 0 ? progress : ""}`}
</Button>
</section>
</div>
)
) : (
<HeaderNewUser />
)}
</div>
);
}

0 comments on commit 01cf443

Please sign in to comment.