Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resolve the working of multi column layout in favourites page #498

Merged
merged 6 commits into from
Jun 21, 2023
+169 −162
Merged

Resolve the working of multi column layout in favourites page #498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a3e0c97
Resolve the working of multi column layout in favourites page
Palakkgoyal Jun 19, 2023
760efed
format code
narayan954 Jun 20, 2023
a0d93ba
Merge branch 'master' into threeColumnLayout
narayan954 Jun 20, 2023
240674a
Pass RowModeContext to Navbar
Palakkgoyal Jun 20, 2023
fe6340f
Merge branch 'threeColumnLayout' of https://github.com/Palakkgoyal/du…
Palakkgoyal Jun 20, 2023
28ff4f2
fix formatting
narayan954 Jun 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
286 changes: 144 additions & 142 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import NotFoundPage from "./components/NotFound";
import Post from "./components/Post";
import PostView from "./pages/PostView";
import Profile from "./pages/Profile";
import { RowModeContext } from "./hooks/useRowMode";
import ShareModal from "./reusableComponents/ShareModal";
import SideBar from "./components/SideBar";
import SignupScreen from "./pages/Signup";
Expand Down Expand Up @@ -185,163 +186,164 @@ function App() {
};

return (
<div className="app">
<Navbar
row={rowMode}
setRow={setRowMode}
user={user}
setUser={setUser}
open={open}
setOpen={setOpen}
setLogout={setLogout}
/>

<ShareModal
openShareModal={openShareModal}
setOpenShareModal={setOpenShareModal}
currentPostLink={currentPostLink}
postText={postText}
/>

<Modal open={logout} onClose={() => setLogout(false)}>
<div style={getModalStyle()} className={classes.paper}>
<form className="modal__signup">
<img
src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
alt="dummygram"
className="modal__signup__img"
style={{
width: "80%",
marginLeft: "10%",
filter: "invert(var(--val))",
}}
/>
<RowModeContext.Provider value={rowMode}>
narayan954 marked this conversation as resolved.
Show resolved Hide resolved
<div className="app">
<Navbar
onClick={() => setRowMode((prev) => !prev)}
user={user}
setUser={setUser}
open={open}
setOpen={setOpen}
setLogout={setLogout}
/>

<p
style={{
fontSize: "15px",
fontFamily: "monospace",
padding: "10%",
color: "var(--color)",
}}
>
Are you sure you want to Logout?
</p>
<ShareModal
openShareModal={openShareModal}
setOpenShareModal={setOpenShareModal}
currentPostLink={currentPostLink}
postText={postText}
/>

<div className={classes.logout}>
<AnimatedButton
type="submit"
onClick={signOut}
variant="contained"
color="primary"
sx={buttonStyle}
>
Logout
</AnimatedButton>
<AnimatedButton
type="submit"
onClick={() => setLogout(false)}
variant="contained"
color="primary"
sx={buttonStyle}
>
Cancel
</AnimatedButton>
</div>
</form>
</div>
</Modal>
<Modal open={logout} onClose={() => setLogout(false)}>
<div style={getModalStyle()} className={classes.paper}>
<form className="modal__signup">
<img
src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
alt="dummygram"
className="modal__signup__img"
style={{
width: "80%",
marginLeft: "10%",
filter: "invert(var(--val))",
}}
/>

<Routes>
<Route
exact
path="/dummygram/"
element={
user ? (
<div
<p
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
fontSize: "15px",
fontFamily: "monospace",
padding: "10%",
color: "var(--color)",
}}
>
<SideBar />
Are you sure you want to Logout?
</p>

<div className={classes.logout}>
<AnimatedButton
type="submit"
onClick={signOut}
variant="contained"
color="primary"
sx={buttonStyle}
>
Logout
</AnimatedButton>
<AnimatedButton
type="submit"
onClick={() => setLogout(false)}
variant="contained"
color="primary"
sx={buttonStyle}
>
Cancel
</AnimatedButton>
</div>
</form>
</div>
</Modal>

<Routes>
<Route
exact
path="/dummygram/"
element={
user ? (
<div
style={
!loadingPosts
? {}
: {
width: "100%",
minHeight: "100vh",
display: "flex",
justifyContent: "center",
alignItems: "center",
}
}
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
{loadingPosts ? (
<Loader />
) : (
<div
className={`${
rowMode ? "app__posts" : "app_posts_column"
}`}
>
{posts.map(({ id, post }) => (
<Post
rowMode={rowMode}
key={id}
postId={id}
user={user}
post={post}
shareModal={setOpenShareModal}
setLink={setCurrentPostLink}
setPostText={setPostText}
/>
))}
</div>
)}
<SideBar />
<div
style={
!loadingPosts
? {}
: {
width: "100%",
minHeight: "100vh",
display: "flex",
justifyContent: "center",
alignItems: "center",
}
}
>
{loadingPosts ? (
<Loader />
) : (
<div
className={`${
rowMode ? "app__posts" : "app_posts_column"
}`}
>
{posts.map(({ id, post }) => (
<Post
rowMode={rowMode}
key={id}
postId={id}
user={user}
post={post}
shareModal={setOpenShareModal}
setLink={setCurrentPostLink}
setPostText={setPostText}
/>
))}
</div>
)}
</div>
</div>
</div>
) : (
<></>
)
}
/>
) : (
<></>
)
}
/>

<Route path="/dummygram/profile" element={<Profile />} />
<Route path="/dummygram/profile" element={<Profile />} />

<Route path="/dummygram/login" element={<LoginScreen />} />
<Route path="/dummygram/login" element={<LoginScreen />} />

<Route path="/dummygram/signup" element={<SignupScreen />} />
<Route path="/dummygram/signup" element={<SignupScreen />} />

<Route
path="/dummygram/posts/:id"
element={
<PostView
user={user}
shareModal={setOpenShareModal}
setLink={setCurrentPostLink}
setPostText={setPostText}
/>
}
/>
<Route
path="/dummygram/posts/:id"
element={
<PostView
user={user}
shareModal={setOpenShareModal}
setLink={setCurrentPostLink}
setPostText={setPostText}
/>
}
/>

<Route path="*" element={<NotFoundPage />} />
<Route path="/dummygram/favourites" element={<Favorite />} />
</Routes>
<Route path="*" element={<NotFoundPage />} />
<Route path="/dummygram/favourites" element={<Favorite />} />
</Routes>

<FaArrowCircleUp
fill="#777"
// stroke="30"
className="scrollTop"
onClick={scrollTop}
style={{
height: 50,
display: showScroll ? "flex" : "none",
}}
/>
</div>
<FaArrowCircleUp
fill="#777"
// stroke="30"
className="scrollTop"
onClick={scrollTop}
style={{
height: 50,
display: showScroll ? "flex" : "none",
}}
/>
</div>
</RowModeContext.Provider>
);
}

Expand Down
29 changes: 17 additions & 12 deletions src/components/Favorite.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, { useEffect, useState } from "react";
import React, { useContext, useEffect, useState } from "react";
import { auth, db } from "../lib/firebase";

import { Box } from "@mui/material";
import Post from "./Post";
import { RowModeContext } from "../hooks/useRowMode";
import ShareModal from "../reusableComponents/ShareModal";
import SideBar from "./SideBar";

Expand All @@ -11,6 +12,7 @@ function Favorite() {
const [currentPostLink, setCurrentPostLink] = useState("");
const [postText, setPostText] = useState("");
const [posts, setPosts] = useState([]);
const rowMode = useContext(RowModeContext);

useEffect(() => {
const fetchPosts = async () => {
Expand Down Expand Up @@ -48,17 +50,20 @@ function Favorite() {
{posts.length ? (
<>
<h1>Your Favourites</h1>
{posts.map(({ id, post }) => (
<Post
key={id}
postId={id}
user={auth.currentUser}
post={post}
shareModal={setOpenShareModal}
setLink={setCurrentPostLink}
setPostText={setPostText}
/>
))}
<div className={`${rowMode ? "app__posts" : "app_posts_column"}`}>
{posts.map(({ id, post }) => (
<Post
rowMode={true}
key={id}
postId={id}
user={auth.currentUser}
post={post}
shareModal={setOpenShareModal}
setLink={setCurrentPostLink}
setPostText={setPostText}
/>
))}
</div>
</>
) : (
<>You have nothing in favourites</>
Expand Down
Loading