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

Jump to bottom

Ayomiku cu #860qdehpp enable sharing on social channels #31

Merged
merged 6 commits into from
Apr 4, 2023
Merged

Ayomiku cu #860qdehpp enable sharing on social channels #31

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
826f8ab
CU_#860qdehpp enabled share on social media
Ayomikuolatunji Apr 4, 2023
774f577
CU_#860qdehpp enabled share on social media
Ayomikuolatunji Apr 4, 2023
d4e2398
CU_#860qdehpp enabled share on social media done
Ayomikuolatunji Apr 4, 2023
7397522
CU_#860qdehpp enabled share on social now working
Ayomikuolatunji Apr 4, 2023
34dfecf
CU_#860qdehpp improved social media share configuration
Ayomikuolatunji Apr 4, 2023
392ac27
remove prop title from EmailShareButton and FacebookShareButton
Ayomikuolatunji Apr 4, 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
10 changes: 5 additions & 5 deletions src/components/DetailPageComponents/FoodOverview/FoodOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,21 @@ import { ForLoops } from "@forkfacts/helpers";
import { SharedSocialMedia } from "@forkfacts/components";
import React, { useState } from "react";

interface FoodOverviewPropsWithLocation extends FoodOverviewProps {
//location: Location; // todo(h2): not sure how this is used
}

const FoodOverview: React.FC<FoodOverviewPropsWithLocation> = ({ values }) => {
const FoodOverview: React.FC<FoodOverviewProps> = ({ values }) => {
const [isSharedMediaOpen, setIsSharedMediaOpen] = useState(false);
const theme = useTheme();
let fullUrl = "";

if (typeof window !== "undefined") {
fullUrl = window.location.href;
}

const mobile = useMediaQuery(theme.breakpoints.down("md"));
return (
<Box sx={{ position: "relative" }}>
<SharedSocialMedia
link={fullUrl}
shareName={values.name}
isSharedMediaOpen={isSharedMediaOpen}
setIsSharedMediaOpen={setIsSharedMediaOpen}
/>
Expand Down Expand Up @@ -164,6 +163,7 @@ const FoodOverview: React.FC<FoodOverviewPropsWithLocation> = ({ values }) => {
link="https://www.forkfacts.app/raw-banana-23hy-ripe"
isSharedMediaOpen={isSharedMediaOpen}
setIsSharedMediaOpen={setIsSharedMediaOpen}
shareName={values.name}
/>
</Box>
<Typography
Expand Down
26 changes: 22 additions & 4 deletions src/components/SharedSocialMedia/SharedSocialMedia.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const SharedSocialMedia: React.FC<SharedSocialMediaProps> = ({
isSharedMediaOpen,
setIsSharedMediaOpen,
link,
shareName,
}) => {
const theme = useTheme();
const mobile = useMediaQuery(theme.breakpoints.down("md"));
Expand Down Expand Up @@ -103,16 +104,33 @@ const SharedSocialMedia: React.FC<SharedSocialMediaProps> = ({
mt: theme.spacing(2.5),
}}
>
<EmailShareButton url={"youremail@example.com"} title={"Check out this website!"}>
<EmailShareButton
url={link}
body={"Check out this website!"}
subject={`Nutrition Facts for ${shareName} `}
>
<Email style={{ width: "44px", height: "44px" }} />
</EmailShareButton>
<FacebookShareButton url={"https://www.facebook.com/"} title={"Check out this website!"}>
<FacebookShareButton
url={link}
quote={`Nutrition Facts for ${shareName}`}
hashtag={"nutrition facts"}
>
<Facebook style={{ width: "44px", height: "44px" }} />
</FacebookShareButton>
<TwitterShareButton url={"https://twitter.com/ "} title={"Check out this website!"}>
<TwitterShareButton
url={link}
title={`Nutrition Facts for ${shareName}`}
hashtags={["nutritionfacts", "nutrition"]}
>
<Twitter style={{ width: "44px", height: "44px" }} />
</TwitterShareButton>
<LinkedinShareButton url={"https://www.linkedin.com/"} title={"Check out this website!"}>
<LinkedinShareButton
url={link}
title={`Nutrition Facts for ${shareName}`}
source={"https://forkfacts.app"}
summary={"Check out this website!"}
>
<Linkedin style={{ width: "44px", height: "44px" }} />
</LinkedinShareButton>
</Box>
Expand Down
1 change: 1 addition & 0 deletions src/models/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ export interface SharedSocialMediaProps {
isSharedMediaOpen: boolean;
setIsSharedMediaOpen: Dispatch<SetStateAction<boolean>>;
link: string;
shareName: string;
}

export interface NutritionSummaryProps {
Expand Down