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

Newsfeed Content Buttons #1672

Merged
merged 3 commits into from
Jan 16, 2025
Merged

Newsfeed Content Buttons #1672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4b87c06
newsfeed content buttons
mertbagt Jan 10, 2025
7420faa
repositioned newsfeed buttons
mertbagt Jan 13, 2025
288c230
added prop on ProfileHeader
mertbagt Jan 13, 2025
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
89 changes: 77 additions & 12 deletions components/Newsfeed/Newsfeed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import ErrorPage from "next/error"
import { Timestamp } from "firebase/firestore"
import { useTranslation } from "next-i18next"
import { useEffect, useState } from "react"
import { useContext, useEffect, useState } from "react"
import { useAuth } from "../auth"
import { Col, Row, Spinner } from "../bootstrap"
import { usePublicProfile } from "../db"
Expand All @@ -15,12 +15,18 @@ import {
} from "./StyledNewsfeedComponents"
import { NewsfeedCard } from "components/NewsfeedCard/NewsfeedCard"

import { ProfileButtons } from "components/ProfilePage/ProfileButtons"
import { TabContext } from "components/shared/ProfileTabsContext"
import { Profile, ProfileHook, useProfile } from "../db"
import ProfileSettingsModal from "components/EditProfilePage/ProfileSettingsModal"

export default function Newsfeed() {
const { t } = useTranslation("common")

const { user } = useAuth()
const uid = user?.uid
const { result: profile, loading } = usePublicProfile(uid)
const isUser = user?.uid !== undefined

const [isShowingOrgs, setIsShowingOrgs] = useState<boolean>(true)
const [isShowingBills, setIsShowingBills] = useState<boolean>(true)
Expand Down Expand Up @@ -61,7 +67,7 @@ export default function Newsfeed() {
fetchNotifications()
}, [uid])

function Filters() {
function Filters({ profile }: { profile: Profile }) {
return (
<FilterBoxes
onOrgFilterChange={(isShowing: boolean) => {
Expand All @@ -72,27 +78,30 @@ export default function Newsfeed() {
}}
isShowingOrgs={isShowingOrgs}
isShowingBills={isShowingBills}
profile={profile}
/>
)
}

function FilterBoxes({
onOrgFilterChange,
onBillFilterChange,
isShowingBills,
isShowingOrgs,
isShowingBills
onBillFilterChange,
onOrgFilterChange,
profile
}: {
onOrgFilterChange: any
onBillFilterChange: any
isShowingOrgs: boolean
isShowingBills: boolean
isShowingOrgs: boolean
onBillFilterChange: any
onOrgFilterChange: any
profile: Profile
}) {
const { t } = useTranslation("common")

return (
<>
<Row className={`d-flex ms-5 mt-2 ps-4`} xs="auto">
<Col className="form-check checkbox">
<Col className="form-check checkbox mt-3">
<input
className="form-check-input"
type="checkbox"
Expand All @@ -107,7 +116,7 @@ export default function Newsfeed() {
{t("user_updates")}
</label>
</Col>
<BillCol className="form-check checkbox">
<BillCol className="form-check checkbox mt-3">
<input
className="form-check-input"
type="checkbox"
Expand All @@ -122,11 +131,67 @@ export default function Newsfeed() {
{t("bill_updates")}
</label>
</BillCol>
<Buttons profile={profile} />
</Row>
</>
)
}

function Buttons({ profile }: { profile: Profile }) {
const {
public: isPublic,
notificationFrequency: notificationFrequency
}: Profile = profile

const [settingsModal, setSettingsModal] = useState<"show" | null>(null)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not needed for this PR, just wanted to make a note while it was on my mind:

Should we DRY up some of this settings modal stuff? I think we have the profile fetched on most pages anyway via the service provider - could we move the useProfile hook into the SettingsModal itself to cut down on the prop passing we've needed for these?

const [notifications, setNotifications] = useState<
"Weekly" | "Monthly" | "None"
>(notificationFrequency ? notificationFrequency : "Monthly")
const [isProfilePublic, setIsProfilePublic] = useState<false | true>(
isPublic ? isPublic : false
)

const onSettingsModalOpen = () => {
setSettingsModal("show")
setNotifications(
notificationFrequency ? notificationFrequency : "Monthly"
)
setIsProfilePublic(isPublic ? isPublic : false)
}

const actions = useProfile()

const { t } = useTranslation("profile")

return (
<>
<div>
<ProfileButtons
isUser={isUser}
hideTestimonyButton={true}
onSettingsModalOpen={onSettingsModalOpen}
/>
</div>
<ProfileSettingsModal
actions={actions}
role={profile.role}
isProfilePublic={isProfilePublic}
setIsProfilePublic={setIsProfilePublic}
notifications={notifications}
setNotifications={setNotifications}
onHide={close}
onSettingsModalClose={() => {
setSettingsModal(null)
window.location.reload()
/* when saved and reopened, modal wasn't updating *
* would like to find cleaner solution */
}}
show={settingsModal === "show"}
/>
</>
)
}

return (
<>
{loading ? (
Expand All @@ -139,10 +204,10 @@ export default function Newsfeed() {
<div className={`d-flex align-self-center`}>
<StyledContainer>
<Header>
<HeaderTitle className={`mb-5`}>
<HeaderTitle className={`mb-4`}>
{t("navigation.newsfeed")}
</HeaderTitle>
<Filters />
<Filters profile={profile} />
</Header>
{filteredResults.length > 0 ? (
<>
Expand Down
26 changes: 16 additions & 10 deletions components/ProfilePage/ProfileButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,13 @@ export const EditProfileButton = ({
}

export function ProfileButtons({
onSettingsModalOpen,
isUser
isUser,
hideTestimonyButton,
onSettingsModalOpen
}: {
onSettingsModalOpen: () => void
isUser: boolean
hideTestimonyButton: boolean
onSettingsModalOpen: () => void
}) {
const { t } = useTranslation("editProfile")

Expand All @@ -89,13 +91,17 @@ export function ProfileButtons({
}}
tab={"button.followedContent"}
/>
<EditProfileButton
className={`py-1`}
handleClick={() => {
setTabStatus("Testimonies")
}}
tab={"button.yourTestimonies"}
/>
{hideTestimonyButton ? (
<></>
) : (
<EditProfileButton
className={`py-1`}
handleClick={() => {
setTabStatus("Testimonies")
}}
tab={"button.yourTestimonies"}
/>
)}
<OutlineButton
className={`py-1`}
label={t("settings")}
Expand Down
1 change: 1 addition & 0 deletions components/ProfilePage/ProfileHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ export const ProfileHeader = ({
}`}
>
<ProfileButtons
hideTestimonyButton={false}
isUser={isUser}
onSettingsModalOpen={onSettingsModalOpen}
/>
Expand Down
8 changes: 7 additions & 1 deletion pages/newsfeed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,13 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations"
export async function getStaticProps({ locale }: any) {
return {
props: {
...(await serverSideTranslations(locale, ["auth", "common", "footer"]))
...(await serverSideTranslations(locale, [
"auth",
"common",
"editProfile",
"footer",
"profile"
]))
// Will be passed to the page component as props
}
}
Expand Down
Loading