Skip to content

Commit

Permalink
feat: update home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@FredericNumericite
FredericNumericite committed Jan 8, 2024
1 parent 6a69264 commit c1ffd33
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 277 deletions.
90 changes: 0 additions & 90 deletions tumeplay-vitrine/components/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,96 +25,6 @@ const Header = () => {
SEXE ?
</Box>
</Heading>
<Box
display="flex"
alignItems="center"
flexDirection={["column", "column", "row"]}
>
<Link
href="https://apps.apple.com/fr/app/tumeplay/id1559879813"
target="_blank"
rel="noreferrer"
title="Télécharger l'application sur apple iOS"
>
<Box mr={4} opacity={0.8} _hover={{ opacity: 0.6 }} w={52}>
<Image
width={200}
height={80}
layout="responsive"
src="/button-ios.svg"
alt={`Bouton pour télécharger l'application sur iOS`}
/>
</Box>
</Link>
<Link
href="https://play.google.com/store/apps/details?id=com.tumeplaymobile"
target="_blank"
rel="noreferrer"
title="Télécharger l'application sur Android"
>
<Box
ml={[0, 0, 4]}
mt={[4, 4, 0]}
opacity={0.8}
_hover={{ opacity: 0.6 }}
w={52}
>
<Image
width={200}
height={80}
layout="responsive"
src="/button-android.svg"
alt={`Bouton pour télécharger l'application sur Android`}
/>
</Box>
</Link>
</Box>
<Box pt={5}>
<Text fontWeight="bold" textAlign={["center", "center", "left"]}>
Retrouve-nous sur les réseaux sociaux pour découvrir nos actualités
</Text>
<Box
display="flex"
alignItems="center"
justifyContent="center"
justifyItems="center"
pt={2}
>
<Link
href="https://www.instagram.com/tumeplay/"
rel="noreferrer"
target="_blank"
title="Accéder au compte Instagram de tumeplay"
>
<Box mr={2} opacity={1} _hover={{ opacity: 0.8 }} w={12}>
<Image
src="/instagram.png"
width={50}
height={50}
layout="responsive"
alt={`Bouton pour accéder au réseau social Instagram`}
/>
</Box>
</Link>
<Link
href="https://www.tiktok.com/@tu.me.play"
target="_blank"
rel="noreferrer"
w={12}
opacity={1}
_hover={{ opacity: 0.8 }}
title="Accéder au compte Tiktok de tumeplay"
>
<Image
src="/Tiktok.png"
width={50}
height={50}
layout="responsive"
alt={`Bouton pour accéder au réseau social Tiktok`}
/>
</Link>
</Box>
</Box>
</Box>
);
};
Expand Down
223 changes: 36 additions & 187 deletions tumeplay-vitrine/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,24 @@
import { useState, useEffect } from "react";
import axios from "axios";
import { Post, Theme, ZPost } from "./api/posts/types";
import { Post, Theme } from "./api/posts/types";
import Head from "next/head";
import {
Box,
Container,
Spinner,
Text,
Input,
InputGroup,
InputLeftAddon,
InputRightElement,
Flex,
Divider,
UnorderedList,
ListItem,
Link as ChakraLink,
FormLabel,
FormControl,
} from "@chakra-ui/react";
import { SearchIcon, CloseIcon } from "@chakra-ui/icons";
import Header from "../components/header";
import Themes from "../components/themes";
import PostCard from "../components/PostCard";
import { useDebounce } from "usehooks-ts";
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
import Link from "next/link";

const Home = ({
initialPosts,
initialThemes,
}: {
initialPosts: Post[];
initialThemes: Theme[];
}) => {
const [posts, setPosts] = useState<Post[]>(initialPosts);
const [selectedThemesIds, setSelectedThemesIds] = useState<number[]>([]);
const [themes] = useState<Theme[]>(initialThemes);
const [isLoading, setIsLoading] = useState(false);
const [search, setSearch] = useState<string | null>(null);
const debouncedValue = useDebounce<string>(search as string, 500);
const Home = () => {
const NEXT_PUBLIC_STRAPI_URL = process.env.NEXT_PUBLIC_STRAPI_URL as string;
const [isFetching, setIsFetching] = useState<boolean>(false);
const [country, setCountry] = useState<string>("");

const handleScroll = () => {
const windowH = window.innerHeight;
const documentH = document.documentElement.scrollTop;
const documentOffset = document.documentElement.offsetHeight;
if (documentH + windowH <= documentOffset - 2500) {
return;
}
setIsFetching(true);
};

const loadmoreContent = () => {
axios
.get(`${NEXT_PUBLIC_STRAPI_URL}/contents`, {
params: {
_start: posts.length + 1,
_limit: 15,
title_mobile_null: false,
thematique_mobile_null: false,
},
})
.then((res) => {
const adjustedRes = (res.data || []).map((c: Post) => ({
...c,
image: {
...c.image,
url: NEXT_PUBLIC_STRAPI_URL + c.image?.formats?.thumbnail?.url,
},
thematique_mobile: {
...c.thematique_mobile,
image: {
...c.thematique_mobile?.image,
url: NEXT_PUBLIC_STRAPI_URL + c.thematique_mobile?.image?.url,
},
},
etiquette: {
...c.etiquette,
image: {
...c.etiquette?.image,
url:
NEXT_PUBLIC_STRAPI_URL +
c.etiquette?.image.formats?.thumbnail?.url,
},
},
}));
const tmpPosts = [...posts, ...adjustedRes];
setPosts(tmpPosts);
setIsFetching(false);
});
};

const getCountryLocation = () => {
fetch("https://ipapi.co/json/").then((res) => {
res.json().then((data) => {
Expand All @@ -99,59 +27,16 @@ const Home = ({
});
};

const siteData = [
{ url: "https://www.onsexprime.fr/", name: "Onsexprime" },
{ url: "https://questionsexualite.fr/", name: "Questions Sexualité" },
{ url: "https://ivg.gouv.fr/", name: "Le site officiel sur l'IVG" },
];

useEffect(() => {
getCountryLocation();
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);

useEffect(() => {
if (!isFetching) return;
loadmoreContent();
}, [isFetching]);

const fetchPosts = (themeIds: number[]) => {
setIsLoading(true);
let params: {
[key: string]: string | string[] | boolean | number | number[];
} = {};

if (themeIds.length > 0) {
params.theme = themeIds;
}

if (search) {
params.search = search;
}

axios
.get("/api/posts", { params })
.then((response) => {
setPosts((response.data || []).map((p: any) => ZPost.parse(p)));
})
.finally(() => {
setIsLoading(false);
});
};

const handleThemeClick = (id: number) => {
if (selectedThemesIds.includes(id)) {
let newThemeIds = selectedThemesIds.filter((tId) => tId !== id);
setSelectedThemesIds(newThemeIds);
fetchPosts(newThemeIds);
} else {
let newThemeIds = [...selectedThemesIds, id];
setSelectedThemesIds(newThemeIds);
fetchPosts(newThemeIds);
}
};

useEffect(() => {
if (search !== null) {
fetchPosts(selectedThemesIds);
}
}, [debouncedValue]);

if (country === "French Guiana") {
window.location.href =
"https://guyane-tumeplay.fabrique.social.gouv.fr/?zone_choice=true";
Expand Down Expand Up @@ -322,67 +207,31 @@ const Home = ({
<meta name="robots" content="all" />
</Head>
<Header />
<FormControl>
<FormLabel htmlFor="input-search" fontWeight="bold">
Rechercher un contenu :
</FormLabel>
<InputGroup size="lg" mb={10}>
<InputLeftAddon>
<SearchIcon />
</InputLeftAddon>
<Input
id="input-search"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSearch(e.target.value)
}
placeholder="Tape un mot clé : contraception, clitoris, consentement..."
value={search || ""}
/>
{search && (
<InputRightElement cursor="pointer" onClick={() => setSearch("")}>
<CloseIcon />
</InputRightElement>
)}
</InputGroup>
</FormControl>
<Themes
onClick={handleThemeClick}
selectedThemesIds={selectedThemesIds}
themes={themes}
/>
{isLoading ? (
<Box h="100vh">
<Spinner
size="xl"
color="primary"
mx="auto"
display="block"
mt={16}
/>
</Box>
) : posts.length > 0 ? (
<Box mt={4}>
<ResponsiveMasonry
columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}
>
<Masonry gutter="1rem">
{posts.map((p) => (
<Box key={p.id}>
<PostCard post={p} />
</Box>
))}
</Masonry>
</ResponsiveMasonry>
</Box>
) : (
<Text fontSize="xl" textAlign="center" mt={10}>
<Box as="span" fontSize="4xl">
😢
</Box>
<br />
Aucun élement à afficher
<Flex flexDir={"column"} align={"center"} fontSize={18}>
<Text fontWeight={"bold"} textAlign={"center"}>
Tumeplay c’est terminé ! Mais tu peux retrouver d’autres contenus
sur les sites suivants :
</Text>
)}

<UnorderedList mt={4}>
{siteData.map((site, index) => (
<ListItem key={index}>
<ChakraLink
href={site.url}
color={"blue.600"}
target="_blank"
_hover={{ textDecoration: "underline" }}
>
{site.name}
</ChakraLink>
</ListItem>
))}
</UnorderedList>
<Box mt={10} textAlign={"center"}>
<Text fontWeight={"bold"}>Numéro vert fil santé jeune :</Text>
<Text>0 800 235 236</Text>
</Box>
</Flex>
</Container>
</Box>
);
Expand Down Expand Up @@ -435,7 +284,7 @@ export async function getServerSideProps() {
},
}));

return { props: { initialPosts: posts, initialThemes: themes } };
return { props: {} };
}

export default Home;

0 comments on commit c1ffd33

Please sign in to comment.