Skip to content

Commit

Permalink
langue
Browse files Browse the repository at this point in the history
  • Loading branch information
@luccinmasirika
luccinmasirika committed Apr 10, 2023
1 parent 85af4b6 commit 19500d7
Show file tree
Hide file tree
Showing 27 changed files with 1,332 additions and 270 deletions.
863 changes: 837 additions & 26 deletions package-lock.json
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p 3017",
"start": "next start -p 3029",
"postbuild": "next-sitemap",
"lint": "next lint"
},
"dependencies": {
Expand Down Expand Up @@ -34,7 +35,7 @@
"next-dark-mode": "^3.0.0",
"next-pwa": "^5.6.0",
"next-seo": "^5.14.0",
"next-sitemap": "^3.1.32",
"next-sitemap": "^3.1.55",
"nextjs-progressbar": "^0.0.14",
"npm": "^9.2.0",
"qs": "^6.11.0",
Expand Down
Binary file modified public/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 8 additions & 2 deletions src/components/comments/CommentCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,23 @@ import CommentReactions from "./CommentReactions";
const CommentCard: React.FC<{ data: PostComment }> = ({ data }) => {
const user = useStore((state) => state.session?.user);
const { currentPost } = useStore((state) => state);
const { push, locale } = useRouter();
const { push, locale, query } = useRouter();
const [, setUserReaction] = React.useState<QuestionReactionType | undefined>();
const [openReaction, setOpenReaction] = React.useState(false);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const postContent = getContent(data?.content, isMobile ? 180 : 220, locale);
const { comments, setComments } = useStore((state) => state);
let postContent = data.content;

const { author } = data;
const goToProfile = useGoToUserProfile();

if (data.depth < 1 && data.id === query?.commentId) {
postContent = data.content;
} else {
postContent = getContent(data?.content, isMobile ? 180 : 220, locale);
}

const handleCloseReaction = () => {
setOpenReaction(false);
};
Expand Down
51 changes: 0 additions & 51 deletions src/components/common/PostTags.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,8 @@
import useStore from "@/hooks/useStore";
import { patchRequest } from "@/lib";
import CloseIcon from "@mui/icons-material/Close";
import TagIcon from "@mui/icons-material/Tag";
import Button from "@mui/material/Button";
import Chip from "@mui/material/Chip";
import Grid from "@mui/material/Grid";
import IconButton from "@mui/material/IconButton";
import Snackbar from "@mui/material/Snackbar";
import { useRouter } from "next/router";
import React from "react";

const PostTags = ({ tags }: { tags?: Tags[] }) => {
const { locale } = useRouter();
const [open, setOpen] = React.useState(false);
const userId = useStore((state) => state.session?.user?.id);
const [tagName, setTagName] = React.useState<string | null>(null);

const handleClose = (event: React.SyntheticEvent | Event, reason?: string) => {
if (reason === "clickaway") {
return;
}
setOpen(false);
};

const handleUndo = async () => {
if (tagName) {
return await patchRequest({ endpoint: `/tags/follow/${tagName}/${userId}` });
}
setOpen(false);
};

const handleTagClick = async (tag: string) => {
setTagName(tag);
await patchRequest({ endpoint: `/tags/follow/${tag}/${userId}` });
setOpen(true);
};

const action = (
<>
<Button color="secondary" size="small" onClick={handleUndo}>
{locale === "en" ? "UNDO" : "ANNULER"}
</Button>
<IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
<CloseIcon fontSize="small" />
</IconButton>
</>
);

return (
<>
<Grid container spacing={1} sx={{ py: 1 }} direction="row">
Expand All @@ -56,13 +12,6 @@ const PostTags = ({ tags }: { tags?: Tags[] }) => {
</Grid>
))}
</Grid>
<Snackbar
open={open}
autoHideDuration={3000}
onClose={handleClose}
message={locale === "en" ? "Tag followed" : "Tag suivi"}
action={action}
/>
</>
);
};
Expand Down
36 changes: 12 additions & 24 deletions src/components/common/Share.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import FacebookIcon from "@mui/icons-material/Facebook";
import LinkedInIcon from "@mui/icons-material/LinkedIn";
import ShareIcon from "@mui/icons-material/ShareOutlined";
import TwitterIcon from "@mui/icons-material/Twitter";
import WhatsAppIcon from "@mui/icons-material/WhatsApp";
import { Box, Divider, Grid, Paper, Stack, Typography } from "@mui/material";
import Button from "@mui/material/Button";
Expand All @@ -11,7 +12,6 @@ import Popover from "@mui/material/Popover";
import Tooltip from "@mui/material/Tooltip";
import { useRouter } from "next/router";
import React from "react";
import TwitterIcon from '@mui/icons-material/Twitter';

const Share = ({ data }: { data: Post | null }) => {
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
Expand All @@ -32,6 +32,12 @@ const Share = ({ data }: { data: Post | null }) => {
setAnchorEl(event.currentTarget);
};

const getTextToShare = () => {
return data?.type === "ARTICLE"
? `${data?.title} ${NEXT_PUBLIC_URL}/articles/${data?.slug}`
: `${NEXT_PUBLIC_URL}/posts/${data?.slug}`;
};

return (
<>
<Popover
Expand Down Expand Up @@ -76,11 +82,7 @@ const Share = ({ data }: { data: Post | null }) => {
color="secondary"
startIcon={<TwitterIcon />}
onClick={() => {
window.open(
`https://twitter.com/intent/tweet?text=${NEXT_PUBLIC_URL}/${
data?.type === "ARTICLE" ? "articles" : "posts"
}/${data?.slug}`
);
window.open(`https://twitter.com/intent/tweet?text=${getTextToShare()}`);
}}
>
Twitter
Expand All @@ -94,11 +96,7 @@ const Share = ({ data }: { data: Post | null }) => {
color="secondary"
startIcon={<FacebookIcon />}
onClick={() => {
window.open(
`https://www.facebook.com/sharer/sharer.php?u=${NEXT_PUBLIC_URL}/${
data?.type === "ARTICLE" ? "articles" : "posts"
}/${data?.slug}`
);
window.open(`https://www.facebook.com/sharer/sharer.php?u=${getTextToShare()}`);
}}
>
Facebook
Expand All @@ -112,11 +110,7 @@ const Share = ({ data }: { data: Post | null }) => {
color="secondary"
startIcon={<LinkedInIcon />}
onClick={() => {
window.open(
`https://www.linkedin.com/shareArticle?mini=true&url=${NEXT_PUBLIC_URL}/${
data?.type === "ARTICLE" ? "articles" : "posts"
}/${data?.slug}`
);
window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${getTextToShare()}`);
}}
>
LinkedIn
Expand All @@ -132,16 +126,10 @@ const Share = ({ data }: { data: Post | null }) => {

<Stack component={Paper} alignItems="center" variant="outlined" direction="row" sx={{ width: 1, px: 1 }}>
<Typography variant="body2" noWrap>
{`${NEXT_PUBLIC_URL}/${data?.type === "ARTICLE" ? "articles" : "posts"}/${data?.slug}`}
{`${getTextToShare()}`}
</Typography>
<Tooltip title={locale === "en" ? "Copier" : "Copy"} placement="bottom" arrow>
<IconButton
onClick={() =>
navigator.clipboard.writeText(
`${NEXT_PUBLIC_URL}/${data?.type === "ARTICLE" ? "articles" : "posts"}/${data?.slug}`
)
}
>
<IconButton onClick={() => navigator.clipboard.writeText(`${getTextToShare()}`)}>
<ContentCopyIcon />
</IconButton>
</Tooltip>
Expand Down
1 change: 1 addition & 0 deletions src/components/menu/Auth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ const Auth = () => {
theme="filled_blue"
shape="circle"
locale="en"
auto_select
onSuccess={(credentialResponse) => {
onLogin(credentialResponse.credential);
}}
Expand Down
27 changes: 3 additions & 24 deletions src/components/menu/Icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import Popper from "@mui/material/Popper";
import Stack from "@mui/material/Stack";
import { styled } from "@mui/material/styles";
import { useDarkMode } from "next-dark-mode";
import Image from "next/image";
import { useRouter } from "next/router";
import React from "react";
import useUser from "../../hooks/useUser";
Expand Down Expand Up @@ -125,27 +124,7 @@ const Icons = () => {
onClick={handleToggle}
color="inherit"
sx={{ display: { xs: "none", md: "flex" }, px: 2, borderRadius: 50 }}
startIcon={
locale === "fr" ? (
<Stack
sx={{
boxShadow: "0 0 5px 0 rgba(0,0,0,0.3)",
borderRadius: 30,
}}
>
<Image src="/icons/fr.png" width={20} height={20} alt="Logo fr" />
</Stack>
) : (
<Stack
sx={{
boxShadow: "0 0 5px 0 rgba(0,0,0,0.3)",
borderRadius: 30,
}}
>
<Image src="/icons/en.png" width={20} height={20} alt="Logo en" />
</Stack>
)
}
startIcon={locale === "fr" ? "FR" : "EN"}
>
<ArrowDown color="primary" />
</Button>
Expand Down Expand Up @@ -180,7 +159,7 @@ const Icons = () => {
switchLanguages("en");
}}
>
En
English
</MenuItem>
<MenuItem
selected={locale === "fr"}
Expand All @@ -189,7 +168,7 @@ const Icons = () => {
switchLanguages("fr");
}}
>
Fr
Français
</MenuItem>
</MenuList>
</ClickAwayListener>
Expand Down
8 changes: 5 additions & 3 deletions src/components/menu/Menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,11 @@ const Menu: React.FC = () => {
<Grid container alignItems="center" spacing={{ xs: 0, md: 2 }}>
<Grid item xs={2} md={3} lg={2} justifyContent="center" alignItems="center" sx={{ height: 65 }}>
{isMobile ? (
<IconButton sx={{ width: 1, height: 1 }} onClick={toggleDrawer()}>
<MenuIcon />
</IconButton>
<Stack justifyContent="center" alignItems="center" sx={{ width: 1, height: 1 }}>
<IconButton onClick={toggleDrawer()}>
<MenuIcon />
</IconButton>
</Stack>
) : (
<Logo />
)}
Expand Down
3 changes: 2 additions & 1 deletion src/components/posts/Post.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import SuggestionViewMore from "@/components/common/SuggestionViewMore";
import PostContent from "@/components/posts/PostContent";
import PostHeader from "@/components/posts/PostHeader";
import useStore from "@/hooks/useStore";
import { Typography, alpha } from "@mui/material";
import Stack from "@mui/material/Stack";
import dynamic from "next/dynamic";
import React from "react";
Expand All @@ -18,7 +19,7 @@ const Post: React.FC<{ data: Post; comments: PostComment[] }> = ({ data, comment
}, []);

return (
<Stack spacing={2}>
<Stack spacing={2} sx={{ positon: "relative" }}>
<PostHeader data={data} />
<PostContent data={data} />
<div id="comments"></div>
Expand Down
27 changes: 26 additions & 1 deletion src/components/posts/PostCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { useGoToPost, useGoToUserProfile } from "@/hooks/posts";
import { getArticleImageUrl, getContent, parseDate } from "@/lib/posts";
import { shortenNumber } from "@/lib/shorterNumber";
import CommentIcon from "@mui/icons-material/Comment";
import EyeIcon from "@mui/icons-material/RemoveRedEye";
import { alpha } from "@mui/material";
import Grid from "@mui/material/Grid";
import IconButton from "@mui/material/IconButton";
import Paper from "@mui/material/Paper";
Expand Down Expand Up @@ -39,7 +41,23 @@ const PostCard: React.FC<{ data: Post }> = ({ data }) => {
}, [data]);

return (
<Paper variant="outlined" sx={{ p: 2 }}>
<Paper variant="outlined" sx={{ p: 2, position: "relative" }}>
<Stack
sx={{
bgcolor: (theme) => alpha(theme.palette.primary.main, 0.1),
px: 2,
py: 0.5,
borderRadius: 2,
width: "fit-content",
position: "absolute",
top: 12,
right: 12,
}}
>
<Typography variant="caption" textAlign="end" color="text.secondary">
{data?.locale === "EN" ? "English" : "French"}
</Typography>
</Stack>
<Grid container spacing={{ xs: 0, sm: 2, lg: 4 }}>
<Grid item xs={12} sm={8}>
<PostCardHeader
Expand Down Expand Up @@ -97,6 +115,13 @@ const PostCard: React.FC<{ data: Post }> = ({ data }) => {
>
<PostReaction post={data} />
<Stack direction="row" spacing={2}>
<Stack direction="row" alignItems="center" spacing={1}>
<EyeIcon fontSize="small" />
<Typography variant="caption" color="text.secondary" fontWeight={700}>
{shortenNumber(data?._count?.views || 0)}
</Typography>
</Stack>

<Stack direction="row" alignItems="center">
<Link href={`/articles/${data?.slug}/#comments`} passHref>
<IconButton>
Expand Down
19 changes: 18 additions & 1 deletion src/components/posts/PostContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import PostTags from "@/components/common/PostTags";
import Share from "@/components/common/Share";
import { useGoToUserProfile } from "@/hooks";
import { parseDate } from "@/lib";
import { alpha } from "@mui/material";
import Divider from "@mui/material/Divider";
import Paper from "@mui/material/Paper";
import Stack from "@mui/material/Stack";
Expand All @@ -24,7 +25,23 @@ const PostContent: React.FC<{ data: Post }> = ({ data }) => {
}, [author?.username]);

return (
<Paper variant="outlined" spacing={2} sx={{ p: 2 }} component={Stack}>
<Paper variant="outlined" spacing={2} sx={{ p: 2, position: "relative" }} component={Stack}>
<Stack
sx={{
bgcolor: (theme) => alpha(theme.palette.primary.main, 0.1),
px: 2,
py: 0.5,
borderRadius: 2,
width: "fit-content",
position: "absolute",
top: 20,
right: 15,
}}
>
<Typography variant="caption" textAlign="end" color="text.secondary">
{data?.locale === "EN" ? "English" : "French"}
</Typography>
</Stack>
<PostCardHeader
handleClickGoToProfile={handleGoToProfile}
date={parseDate({ date: data?.createdAt, type: "relative" })}
Expand Down
Loading

0 comments on commit 19500d7

Please sign in to comment.