diff --git a/.nvmrc b/.nvmrc index 53d838af2..9de225682 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -lts/gallium +lts/iron diff --git a/docs/0-creating-pages.md b/docs/0-creating-pages.md index b4a31c877..6f49bf052 100644 --- a/docs/0-creating-pages.md +++ b/docs/0-creating-pages.md @@ -2,6 +2,7 @@ When creating a new page, make sure to require a namespace for translations. This ensures that only the translations that are needed are sent along with that page. +// TODO: update to remove withApollo ```jsx const MyPage: NextPage = () => { /* ... */ diff --git a/docs/1-internationalization.md b/docs/1-internationalization.md index b352f9e93..16e01471e 100644 --- a/docs/1-internationalization.md +++ b/docs/1-internationalization.md @@ -13,7 +13,7 @@ When using translations in a React component, default to using the [useTranslati ```jsx import React from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' export function MyComponent() { const { t } = useTranslation() @@ -32,7 +32,7 @@ For simple interpolation, follow this pattern: ```jsx import React from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' export function MyComponent() { const { t } = useTranslation() diff --git a/packages/j-db-client/package.json b/packages/j-db-client/package.json index 70a63ac4d..3efde18ee 100644 --- a/packages/j-db-client/package.json +++ b/packages/j-db-client/package.json @@ -1,6 +1,6 @@ { "name": "@journaly/j-db-client", - "version": "13.22.0", + "version": "13.23.0", "description": "Journaly's internal database client.", "main": "dist/index", "scripts": { diff --git a/packages/j-db-client/prisma/migrations/20240523150228_add_missing_uilangs_to_enum/migration.sql b/packages/j-db-client/prisma/migrations/20240523150228_add_missing_uilangs_to_enum/migration.sql new file mode 100644 index 000000000..78a335aea --- /dev/null +++ b/packages/j-db-client/prisma/migrations/20240523150228_add_missing_uilangs_to_enum/migration.sql @@ -0,0 +1,14 @@ +-- AlterEnum +-- This migration adds more than one value to an enum. +-- With PostgreSQL versions 11 and earlier, this is not possible +-- in a single migration. This can be worked around by creating +-- multiple migrations, each migration adding only one value to +-- the enum. + + +ALTER TYPE "UILanguage" ADD VALUE 'CHINESE_SIMPLIFIED'; +ALTER TYPE "UILanguage" ADD VALUE 'CHINESE_TRADITIONAL'; +ALTER TYPE "UILanguage" ADD VALUE 'ITALIAN'; +ALTER TYPE "UILanguage" ADD VALUE 'PORTUGUESE_BRAZILIAN'; + +-- TODO (this PR) URGENT: remember to shimmity shim this into the prod DB before all goes live \ No newline at end of file diff --git a/packages/j-db-client/prisma/schema.prisma b/packages/j-db-client/prisma/schema.prisma index b7bd3bcb3..57f0682b3 100644 --- a/packages/j-db-client/prisma/schema.prisma +++ b/packages/j-db-client/prisma/schema.prisma @@ -497,6 +497,10 @@ enum UILanguage { ENGLISH GERMAN SPANISH + CHINESE_SIMPLIFIED + CHINESE_TRADITIONAL + ITALIAN + PORTUGUESE_BRAZILIAN } enum BadgeType { diff --git a/packages/j-mail/package-lock.json b/packages/j-mail/package-lock.json index 397cf3fd9..588cb7836 100644 --- a/packages/j-mail/package-lock.json +++ b/packages/j-mail/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "@journaly/j-db-client": "^13.20.0", + "@journaly/j-db-client": "^13.23.0", "@types/nodemailer": "^6.4.0", "aws-sdk": "^2.737.0", "date-fns": "^2.16.1", @@ -56,9 +56,9 @@ } }, "node_modules/@journaly/j-db-client": { - "version": "13.20.0", - "resolved": "https://registry.npmjs.org/@journaly/j-db-client/-/j-db-client-13.20.0.tgz", - "integrity": "sha512-azX4mKZhicDmomFZqtliVhRaEjlu2Y9gz9u+NkrN1epDewov4SvwAoSn98/90cRr6W2Vh6GbjfxjUddzs7YraQ==", + "version": "13.23.0", + "resolved": "https://registry.npmjs.org/@journaly/j-db-client/-/j-db-client-13.23.0.tgz", + "integrity": "sha512-orb9a6bWIgoBO/VVXhOc6e7bNlyXdH7brofvvgZQfOVqNpR5dlaMotLEuX/L2xt6QFmofDpQDNuKDm2WzAgThw==", "dependencies": { "@prisma/client": "^3.15.2" } @@ -2415,9 +2415,9 @@ } }, "@journaly/j-db-client": { - "version": "13.20.0", - "resolved": "https://registry.npmjs.org/@journaly/j-db-client/-/j-db-client-13.20.0.tgz", - "integrity": "sha512-azX4mKZhicDmomFZqtliVhRaEjlu2Y9gz9u+NkrN1epDewov4SvwAoSn98/90cRr6W2Vh6GbjfxjUddzs7YraQ==", + "version": "13.23.0", + "resolved": "https://registry.npmjs.org/@journaly/j-db-client/-/j-db-client-13.23.0.tgz", + "integrity": "sha512-orb9a6bWIgoBO/VVXhOc6e7bNlyXdH7brofvvgZQfOVqNpR5dlaMotLEuX/L2xt6QFmofDpQDNuKDm2WzAgThw==", "requires": { "@prisma/client": "^3.15.2" } diff --git a/packages/j-mail/package.json b/packages/j-mail/package.json index ed0b8cf2f..f7064c80f 100644 --- a/packages/j-mail/package.json +++ b/packages/j-mail/package.json @@ -36,7 +36,7 @@ "typescript": "4.2.4" }, "dependencies": { - "@journaly/j-db-client": "^13.22.0", + "@journaly/j-db-client": "^13.23.0", "@types/nodemailer": "^6.4.0", "aws-sdk": "^2.737.0", "date-fns": "^2.16.1", diff --git a/packages/jadmin/jadmin.js b/packages/jadmin/jadmin.js index bdcf0ea75..4bc78288e 100755 --- a/packages/jadmin/jadmin.js +++ b/packages/jadmin/jadmin.js @@ -84,6 +84,9 @@ async function getDb(args) { const db = pgTag( new Pool({ connectionString: dbUrl, + ssl: { + rejectUnauthorized: false, + }, }), ) diff --git a/packages/web/components/Badge/Badge.tsx b/packages/web/components/Badge/Badge.tsx index bed60793b..897a8a742 100644 --- a/packages/web/components/Badge/Badge.tsx +++ b/packages/web/components/Badge/Badge.tsx @@ -1,7 +1,7 @@ import React from 'react' import { UserBadgeFragmentFragment as Badge, BadgeType } from '@/generated/graphql' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import theme from '@/theme' type Props = { diff --git a/packages/web/components/Dashboard/Filters/Filters.tsx b/packages/web/components/Dashboard/Filters/Filters.tsx index 014b78eb0..01d57dd20 100644 --- a/packages/web/components/Dashboard/Filters/Filters.tsx +++ b/packages/web/components/Dashboard/Filters/Filters.tsx @@ -7,7 +7,8 @@ import LanguageSelect from './LanguageSelect' import TopicSelect from './TopicSelect' import useToggle from '@/hooks/useToggle' import useUILanguage from '@/hooks/useUILanguage' -import { Router, useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' +import { useRouter } from 'next/router' import PremiumFeatureModal from '@/components/Modals/PremiumFeatureModal' export type PostQueryVarsType = { @@ -43,6 +44,7 @@ const Filters: React.FC = ({ showSavedPosts = false, }) => { const { t } = useTranslation('common') + const router = useRouter() const [showAdvancedFilters, setShowAdvancedFilters] = useToggle(false) const [displayPremiumFeatureModal, setDisplayPremiumFeatureModal] = useState(false) const onSearchChange = useCallback( @@ -143,7 +145,7 @@ const Filters: React.FC = ({ })) resetPagination() }, [resetPagination]) - + const toggleMyLanguagesFilter = useCallback(() => { setPostQueryVars((prevState) => ({ ...prevState, @@ -277,7 +279,7 @@ const Filters: React.FC = ({ setDisplayPremiumFeatureModal(false) }} onGoToPremium={() => { - Router.push('/settings/subscription') + router.push('/settings/subscription') setDisplayPremiumFeatureModal(false) }} /> diff --git a/packages/web/components/Dashboard/Filters/LanguageSelect.tsx b/packages/web/components/Dashboard/Filters/LanguageSelect.tsx index e3b57f15d..526c26c49 100644 --- a/packages/web/components/Dashboard/Filters/LanguageSelect.tsx +++ b/packages/web/components/Dashboard/Filters/LanguageSelect.tsx @@ -1,7 +1,7 @@ import React from 'react' import MultiSelect from '@/components/MultiSelect' import { LanguagesQuery } from '@/generated/graphql' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' type Props = { languagesData: LanguagesQuery | undefined diff --git a/packages/web/components/Dashboard/Filters/SearchInput.tsx b/packages/web/components/Dashboard/Filters/SearchInput.tsx index 4ff8c4b38..7509bb868 100644 --- a/packages/web/components/Dashboard/Filters/SearchInput.tsx +++ b/packages/web/components/Dashboard/Filters/SearchInput.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useState } from 'react' import _ from 'lodash' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' type Props = { defaultValue: string diff --git a/packages/web/components/Dashboard/Filters/TopicSelect.tsx b/packages/web/components/Dashboard/Filters/TopicSelect.tsx index ed2c5a7a1..b043d9f25 100644 --- a/packages/web/components/Dashboard/Filters/TopicSelect.tsx +++ b/packages/web/components/Dashboard/Filters/TopicSelect.tsx @@ -1,7 +1,7 @@ import React from 'react' import MultiSelect from '@/components/MultiSelect' import { Topic } from '@/generated/graphql' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' type Props = { topics: Topic[] | undefined diff --git a/packages/web/components/Dashboard/MyFeed/FeedHeader.tsx b/packages/web/components/Dashboard/MyFeed/FeedHeader.tsx index b54a2a2c1..d1a23edb9 100644 --- a/packages/web/components/Dashboard/MyFeed/FeedHeader.tsx +++ b/packages/web/components/Dashboard/MyFeed/FeedHeader.tsx @@ -45,9 +45,9 @@ const FeedHeader: React.FC = ({ currentUser }) => { diff --git a/packages/web/components/Dashboard/MyFeed/MyFeed.tsx b/packages/web/components/Dashboard/MyFeed/MyFeed.tsx index d53b9b4ec..c16f93771 100644 --- a/packages/web/components/Dashboard/MyFeed/MyFeed.tsx +++ b/packages/web/components/Dashboard/MyFeed/MyFeed.tsx @@ -4,7 +4,7 @@ import { useRouter } from 'next/router' import { toast } from 'react-toastify' import _ from 'lodash' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { gtag } from '@/components/GoogleAnalytics' import Pagination from '@/components/Pagination' import LoadingWrapper from '@/components/LoadingWrapper' @@ -17,24 +17,33 @@ import { import PostCard from '../PostCard' import FeedHeader from './FeedHeader' -import Filters from '../Filters' -import { PostQueryVarsType } from '../Filters' +import Filters, { PostQueryVarsType } from '@/components/Dashboard/Filters' import { makeReference, useApolloClient } from '@apollo/client' const NUM_POSTS_PER_PAGE = 9 type Props = { currentUser: UserType - initialSearchFilters: InitialSearchFilters | null + initialSearchFilters: PostQueryVarsType | null } -export type InitialSearchFilters = { - languages: number[] - topics: number[] - needsFeedback: boolean - hasInteracted: boolean - savedPosts: boolean - search: string +export const constructPostQueryVars = ( + postQueryVars: PostQueryVarsType | null, + currentPage: number, +) => { + const variables = { + first: NUM_POSTS_PER_PAGE, + skip: (currentPage - 1) * NUM_POSTS_PER_PAGE, + status: PostStatus.Published, + languages: postQueryVars?.languages || [], + topics: postQueryVars?.topics || [], + followedAuthors: postQueryVars?.followedAuthors || false, + needsFeedback: postQueryVars?.needsFeedback || false, + hasInteracted: postQueryVars?.hasInteracted || false, + search: postQueryVars?.search || '', + savedPosts: postQueryVars?.savedPosts || false, + } + return variables } const MyFeed: React.FC = ({ currentUser, initialSearchFilters }) => { @@ -79,12 +88,7 @@ const MyFeed: React.FC = ({ currentUser, initialSearchFilters }) => { // fetch posts for the feed! const { loading, error, data } = usePostsQuery({ - variables: { - first: NUM_POSTS_PER_PAGE, - skip: (currentPage - 1) * NUM_POSTS_PER_PAGE, - status: PostStatus.Published, - ...postQueryVars, - }, + variables: constructPostQueryVars(postQueryVars, currentPage), }) const posts = data?.posts?.posts diff --git a/packages/web/components/Dashboard/MyFeed/index.ts b/packages/web/components/Dashboard/MyFeed/index.ts index f0063b594..01478ad4d 100644 --- a/packages/web/components/Dashboard/MyFeed/index.ts +++ b/packages/web/components/Dashboard/MyFeed/index.ts @@ -1,2 +1 @@ export { default } from './MyFeed' -export type { InitialSearchFilters } from './MyFeed' \ No newline at end of file diff --git a/packages/web/components/Dashboard/MyPosts/MyPosts.tsx b/packages/web/components/Dashboard/MyPosts/MyPosts.tsx index 459f11231..07ccdd53e 100644 --- a/packages/web/components/Dashboard/MyPosts/MyPosts.tsx +++ b/packages/web/components/Dashboard/MyPosts/MyPosts.tsx @@ -6,15 +6,14 @@ import { User as UserType, usePostsQuery, } from '@/generated/graphql' -import { useTranslation, Trans } from '@/config/i18n' +import { useTranslation, Trans } from 'next-i18next' import TranslationLink from '@/components/TranslationLink' import LoadingSpinner from '@/components/Icons/LoadingSpinner' import PostCard from '../PostCard' import theme from '@/theme' import Filters, { PostQueryVarsType } from '@/components/Dashboard/Filters' import Pagination from '@/components/Pagination' - -const NUM_POSTS_PER_PAGE = 10 +import { NUM_POSTS_PER_MY_POSTS_PAGE } from '@/constants' type Props = { currentUser: UserType @@ -40,8 +39,8 @@ const MyPosts: React.FC = ({ currentUser, status }) => { }) const { loading, data, error } = usePostsQuery({ variables: { - first: NUM_POSTS_PER_PAGE, - skip: (currentPage - 1) * NUM_POSTS_PER_PAGE, + first: NUM_POSTS_PER_MY_POSTS_PAGE, + skip: (currentPage - 1) * NUM_POSTS_PER_MY_POSTS_PAGE, status, authorId: currentUser.id, ...postQueryVars, @@ -51,7 +50,7 @@ const MyPosts: React.FC = ({ currentUser, status }) => { const posts = (data?.posts?.posts as PostType[]) || [] const count = data?.posts?.count || 0 const showPosts = !loading && posts.length > 0 - const showPagination = count > NUM_POSTS_PER_PAGE + const showPagination = count > NUM_POSTS_PER_MY_POSTS_PAGE const showEmptyState = !loading && posts.length === 0 const pageTitle = t('pageTitle') @@ -92,7 +91,7 @@ const MyPosts: React.FC = ({ currentUser, status }) => { )} diff --git a/packages/web/components/Dashboard/Nav/Nav.tsx b/packages/web/components/Dashboard/Nav/Nav.tsx index 5b9ba49c4..b5f8ef37b 100644 --- a/packages/web/components/Dashboard/Nav/Nav.tsx +++ b/packages/web/components/Dashboard/Nav/Nav.tsx @@ -2,7 +2,8 @@ import React, { useCallback, useState, useEffect, useRef } from 'react' import Link from 'next/link' import classNames from 'classnames' -import { Router, useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' +import { useRouter } from 'next/router' import { navConstants } from './nav-constants' import theme from '@/theme' import { @@ -77,6 +78,7 @@ const useNotificationFeedState = () => { const Nav: React.FC = ({ expanded, collapse, disableLargeNav }) => { const { t } = useTranslation() + const router = useRouter() const { data, error } = useCurrentUserQuery() const [logout] = useLogoutMutation({ @@ -113,7 +115,7 @@ const Nav: React.FC = ({ expanded, collapse, disableLargeNav }) => { await logout() // Redirect to home page - Router.push('/') + router.push('/') }, [logout]) return ( @@ -153,19 +155,31 @@ const Nav: React.FC = ({ expanded, collapse, disableLargeNav }) => {
- + - + - + @@ -185,7 +199,11 @@ const Nav: React.FC = ({ expanded, collapse, disableLargeNav }) => { {t('dashboardNav.notifications')} - + @@ -328,8 +346,8 @@ const Nav: React.FC = ({ expanded, collapse, disableLargeNav }) => { } .help-btn { - cursor: pointer; ${theme.buttonReset} + cursor: pointer; } .nav-wrapper:not(.logged-in) .nav-logo { @@ -394,16 +412,16 @@ const Nav: React.FC = ({ expanded, collapse, disableLargeNav }) => { } .nav-link { + ${theme.buttonReset} display: flex; flex-direction: column; align-items: center; justify-content: center; height: 70px; font-size: 16px; - color: ${theme.colors.white}; transition: padding-left ${navConstants.transitionDuration}ms linear, padding-right ${navConstants.transitionDuration}ms linear; - ${theme.buttonReset} + color: ${theme.colors.white}; } .nav-link.notifications { diff --git a/packages/web/components/Dashboard/Post/Post.tsx b/packages/web/components/Dashboard/Post/Post.tsx index 2e2dd4d7f..5e3b7910d 100644 --- a/packages/web/components/Dashboard/Post/Post.tsx +++ b/packages/web/components/Dashboard/Post/Post.tsx @@ -23,7 +23,8 @@ import Button, { ButtonVariant } from '@/components/Button' import theme from '@/theme' import PostBodyStyles from '@/components/PostBodyStyles' import InlineFeedbackPopover, { PendingThreadData } from '@/components/InlineFeedbackPopover' -import { Router, useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' +import { Router, useRouter } from 'next/router' import PostHeader from '@/components/PostHeader' import ConfirmationModal from '@/components/Modals/ConfirmationModal' import PremiumFeatureModal from '@/components/Modals/PremiumFeatureModal' @@ -158,6 +159,7 @@ const PostContent = memo( const Post = ({ post, currentUser, refetch }: PostProps) => { const { t } = useTranslation('post') + const router = useRouter() const selectableRef = useRef(null) const popoverRef = useRef(null) @@ -172,7 +174,7 @@ const Post = ({ post, currentUser, refetch }: PostProps) => { const [displayDeleteModal, setDisplayDeleteModal] = useState(false) const [displayPremiumFeatureModal, setDisplayPremiumFeatureModal] = useState(false) const [displayUserListModal, setDisplayUserListModal] = useState(false) - const [premiumFeatureModalExplanation, setPremiumFeatureModalExplanation] = useState() + const [premiumFeatureModalExplanation, setPremiumFeatureModalExplanation] = useState() const [ReportSpamConfirmationModal, confirmReportSpam] = useConfirmationModal({ title: t('reportSpamModal.title'), body: t('reportSpamModal.confirmationText'), @@ -253,7 +255,7 @@ const Post = ({ post, currentUser, refetch }: PostProps) => { const [deletePost] = useDeletePostMutation({ onCompleted: () => { toast.success(t('deletePostSuccess')) - Router.push('/my-posts') + router.push('/my-posts') }, onError: (err) => { console.error(err) @@ -543,9 +545,7 @@ const Post = ({ post, currentUser, refetch }: PostProps) => { }, }, update(cache, { data }) { - console.log('before') if (data?.updatePost) { - console.log('after') cache.modify({ id: cache.identify(makeReference('ROOT_QUERY')), fields: { @@ -587,7 +587,7 @@ const Post = ({ post, currentUser, refetch }: PostProps) => { numRemaining: POST_BUMP_LIMIT - (post.bumpCount + 1), }), ) - Router.push('/my-feed') + router.push('/my-feed') }, }) @@ -697,7 +697,7 @@ const Post = ({ post, currentUser, refetch }: PostProps) => { type="button" variant={ButtonVariant.Secondary} onClick={() => { - Router.push('/post/[id]/edit', `/post/${post.id}/edit`) + router.push('/post/[id]/edit', `/post/${post.id}/edit`) }} > {t('editPostAction')} @@ -815,7 +815,7 @@ const Post = ({ post, currentUser, refetch }: PostProps) => { setDisplayPremiumFeatureModal(false) }} onGoToPremium={() => { - Router.push(JOURNALY_PREMIUM_URL) + router.push(JOURNALY_PREMIUM_URL) setPremiumFeatureModalExplanation(undefined) setDisplayPremiumFeatureModal(false) }} diff --git a/packages/web/components/Dashboard/Post/PostAuthorCard.tsx b/packages/web/components/Dashboard/Post/PostAuthorCard.tsx index a01f4c43c..55adcf110 100644 --- a/packages/web/components/Dashboard/Post/PostAuthorCard.tsx +++ b/packages/web/components/Dashboard/Post/PostAuthorCard.tsx @@ -7,7 +7,7 @@ import { useUnfollowUserMutation, useFollowingUsersQuery, } from '@/generated/graphql' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { languageNameWithDialect } from '@/utils/languages' import Button, { ButtonVariant } from '@/components/Button' import LevelGauge from '@/components/LevelGauge' diff --git a/packages/web/components/Dashboard/Post/PostComment.tsx b/packages/web/components/Dashboard/Post/PostComment.tsx index ed63e3f2d..ba65a026c 100644 --- a/packages/web/components/Dashboard/Post/PostComment.tsx +++ b/packages/web/components/Dashboard/Post/PostComment.tsx @@ -6,7 +6,7 @@ import { useDeletePostCommentMutation, PostCommentFragmentFragment as PostCommentType, } from '@/generated/graphql' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import EditableMarkdown from '@/components/EditableMarkdown' import Button, { ButtonSize, ButtonVariant } from '@/components/Button' diff --git a/packages/web/components/Dashboard/Post/PostComments.tsx b/packages/web/components/Dashboard/Post/PostComments.tsx index 159926727..33266291e 100644 --- a/packages/web/components/Dashboard/Post/PostComments.tsx +++ b/packages/web/components/Dashboard/Post/PostComments.tsx @@ -12,7 +12,7 @@ import { PostPageQueryVariables, LanguageLevel, } from '@/generated/graphql' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import theme from '@/theme' import PostComment from './PostComment' diff --git a/packages/web/components/Dashboard/Post/helpers.ts b/packages/web/components/Dashboard/Post/helpers.ts index b9af7a01b..79f071ad1 100644 --- a/packages/web/components/Dashboard/Post/helpers.ts +++ b/packages/web/components/Dashboard/Post/helpers.ts @@ -1,5 +1,5 @@ import { PostClapFragmentFragment as PostClapType } from '@/generated/graphql' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { isChildOf } from '@/utils' // Elements whose boundaries a comment can cross diff --git a/packages/web/components/Dashboard/PostCard/PostCard.tsx b/packages/web/components/Dashboard/PostCard/PostCard.tsx index 08c1d9940..37702e0f6 100644 --- a/packages/web/components/Dashboard/PostCard/PostCard.tsx +++ b/packages/web/components/Dashboard/PostCard/PostCard.tsx @@ -1,7 +1,7 @@ import React from 'react' import Link from 'next/link' import classNames from 'classnames' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { formatShortDate } from '@/utils/date' import { PostStatus as PostStatusType, @@ -119,6 +119,7 @@ const PostCard: React.FC = ({ post, avatar = false, stacked = false }) => box-shadow: 0px 8px 10px #00000029; transition: all 150ms ease-in; } + @media (min-width: ${theme.breakpoints.MD}) { .post-card-container:not(.stacked) { flex-direction: row; @@ -168,8 +169,8 @@ const PostCard: React.FC = ({ post, avatar = false, stacked = false }) => } .post-title { - margin: 5px 0; ${theme.typography.headingLG}; + margin: 5px 0; } .post-avatar-and-data { diff --git a/packages/web/components/Dashboard/Profile/PostList.tsx b/packages/web/components/Dashboard/Profile/PostList.tsx index 556da74a0..522d91945 100644 --- a/packages/web/components/Dashboard/Profile/PostList.tsx +++ b/packages/web/components/Dashboard/Profile/PostList.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { useTranslation, Trans } from '@/config/i18n' +import { useTranslation, Trans } from 'next-i18next' import { PostCardFragmentFragment as PostType, UserWithLanguagesFragmentFragment as UserType, diff --git a/packages/web/components/Dashboard/Profile/Profile.tsx b/packages/web/components/Dashboard/Profile/Profile.tsx index 9dd3c6ddd..3dc624a9e 100644 --- a/packages/web/components/Dashboard/Profile/Profile.tsx +++ b/packages/web/components/Dashboard/Profile/Profile.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import theme from '@/theme' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { ProfileUserFragmentFragment as UserType, PostCardFragmentFragment as PostCardType, diff --git a/packages/web/components/Dashboard/Profile/ProfileCard.tsx b/packages/web/components/Dashboard/Profile/ProfileCard.tsx index 29a660828..d77c94fca 100644 --- a/packages/web/components/Dashboard/Profile/ProfileCard.tsx +++ b/packages/web/components/Dashboard/Profile/ProfileCard.tsx @@ -1,5 +1,5 @@ import React, { useMemo, useState } from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import FacebookIcon from '@/components/Icons/FacebookIcon' import InstagramIcon from '@/components/Icons/InstagramIcon' import YoutubeIcon from '@/components/Icons/YoutubeIcon' @@ -177,12 +177,12 @@ const ProfileCard: React.FC = ({ user }) => { )}
- +
    - {badges.map((badge) => ( + {badges.map((badge) => (
  • - -
    • + + ))}
@@ -276,7 +276,10 @@ const ProfileCard: React.FC = ({ user }) => { } .profile-name { + // TODO: Remove this bg unset once we can hopefully + // get Next to fix this. ${theme.typography.headingLG}; + background: unset; } @media (min-width: ${theme.breakpoints.MD}) { .profile-name { diff --git a/packages/web/components/Dashboard/Profile/ProfileStats.tsx b/packages/web/components/Dashboard/Profile/ProfileStats.tsx index cac6327ac..9ca981c7f 100644 --- a/packages/web/components/Dashboard/Profile/ProfileStats.tsx +++ b/packages/web/components/Dashboard/Profile/ProfileStats.tsx @@ -1,5 +1,5 @@ import React, { useState, useMemo, useCallback } from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import chroma from 'chroma-js' import differenceInCalendarWeeks from 'date-fns/differenceInCalendarWeeks' diff --git a/packages/web/components/Dashboard/Settings/BioForm.tsx b/packages/web/components/Dashboard/Settings/BioForm.tsx index ce915fe3b..72d9728cb 100644 --- a/packages/web/components/Dashboard/Settings/BioForm.tsx +++ b/packages/web/components/Dashboard/Settings/BioForm.tsx @@ -2,7 +2,7 @@ import React from 'react' import { useForm } from 'react-hook-form' import { toast } from 'react-toastify' import { sanitize } from '@/utils' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import FormError from '@/components/FormError' import SettingsForm from '@/components/Dashboard/Settings/SettingsForm' import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset' diff --git a/packages/web/components/Dashboard/Settings/Breadcrumbs.tsx b/packages/web/components/Dashboard/Settings/Breadcrumbs.tsx index f7c4156f0..f87d105c5 100644 --- a/packages/web/components/Dashboard/Settings/Breadcrumbs.tsx +++ b/packages/web/components/Dashboard/Settings/Breadcrumbs.tsx @@ -1,6 +1,6 @@ import React from 'react' import { useRouter } from 'next/router' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import theme from '@/theme' const Breadcrumbs: React.FC = () => { diff --git a/packages/web/components/Dashboard/Settings/DetailsForm.tsx b/packages/web/components/Dashboard/Settings/DetailsForm.tsx index 3026c23d3..6cdfed298 100644 --- a/packages/web/components/Dashboard/Settings/DetailsForm.tsx +++ b/packages/web/components/Dashboard/Settings/DetailsForm.tsx @@ -1,6 +1,6 @@ import React, { useState, useRef, useCallback } from 'react' import { useForm } from 'react-hook-form' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import FormError from '@/components/FormError' import SettingsForm from '@/components/Dashboard/Settings/SettingsForm' import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset' diff --git a/packages/web/components/Dashboard/Settings/InterestsForm.tsx b/packages/web/components/Dashboard/Settings/InterestsForm.tsx index de12562ff..d74bf88bb 100644 --- a/packages/web/components/Dashboard/Settings/InterestsForm.tsx +++ b/packages/web/components/Dashboard/Settings/InterestsForm.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { TopicFragmentFragment as TopicType, UserInterestFragmentFragment as UserInterestType, diff --git a/packages/web/components/Dashboard/Settings/LanguagesForm.tsx b/packages/web/components/Dashboard/Settings/LanguagesForm.tsx index bcb187de9..a7cf4caee 100644 --- a/packages/web/components/Dashboard/Settings/LanguagesForm.tsx +++ b/packages/web/components/Dashboard/Settings/LanguagesForm.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { LanguageFragmentFragment as LanguageType, LanguageRelation as LanguageRelationType, diff --git a/packages/web/components/Dashboard/Settings/NotificationSettingsForm.tsx b/packages/web/components/Dashboard/Settings/NotificationSettingsForm.tsx index bd0e6ed7b..466e85ddf 100644 --- a/packages/web/components/Dashboard/Settings/NotificationSettingsForm.tsx +++ b/packages/web/components/Dashboard/Settings/NotificationSettingsForm.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { DigestEmailConfiguration as DigestEmailConfigurationType, useUpdateUserConfigurationMutation, diff --git a/packages/web/components/Dashboard/Settings/SettingsFieldset.tsx b/packages/web/components/Dashboard/Settings/SettingsFieldset.tsx index 4033688f2..61d292484 100644 --- a/packages/web/components/Dashboard/Settings/SettingsFieldset.tsx +++ b/packages/web/components/Dashboard/Settings/SettingsFieldset.tsx @@ -20,7 +20,10 @@ const SettingsFieldset: React.FC = ({ children, legend }) => { text-align: center; } .settings-fieldset-legend h2 { + // TODO: Remove this bg unset once we can hopefully + // get Next to fix this. ${theme.typography.headingLG} + background: unset; } @media (min-width: ${theme.breakpoints.SM}) { .settings-fieldset-legend { diff --git a/packages/web/components/Dashboard/Settings/SettingsNav.tsx b/packages/web/components/Dashboard/Settings/SettingsNav.tsx index 41efcfb27..1b8090a71 100644 --- a/packages/web/components/Dashboard/Settings/SettingsNav.tsx +++ b/packages/web/components/Dashboard/Settings/SettingsNav.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import NavLink from '@/components/NavLink' import theme from '@/theme' @@ -18,9 +18,7 @@ const SettingsNav: React.FC = () => { {Object.entries(links).map(([page, navText]) => { return ( -
  • - {navText} -
    • +
  • {navText}
    •  ) })} diff --git a/packages/web/components/Dashboard/Settings/SocialForm.tsx b/packages/web/components/Dashboard/Settings/SocialForm.tsx index 6e8acd2ca..5e746aa77 100644 --- a/packages/web/components/Dashboard/Settings/SocialForm.tsx +++ b/packages/web/components/Dashboard/Settings/SocialForm.tsx @@ -2,7 +2,7 @@ import React from 'react' import { useForm } from 'react-hook-form' import { toast } from 'react-toastify' import { ApolloError } from '@apollo/client' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import SettingsForm from '@/components/Dashboard/Settings/SettingsForm' import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset' import Button, { ButtonVariant } from '@/components/Button' diff --git a/packages/web/components/Dashboard/Settings/SocialFormField.tsx b/packages/web/components/Dashboard/Settings/SocialFormField.tsx index a99475528..d8f09ec80 100644 --- a/packages/web/components/Dashboard/Settings/SocialFormField.tsx +++ b/packages/web/components/Dashboard/Settings/SocialFormField.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FieldError, ValidationOptions } from 'react-hook-form' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import FacebookIcon from '@/components/Icons/FacebookIcon' import GlobeIcon from '@/components/Icons/GlobeIcon' import InstagramIcon from '@/components/Icons/InstagramIcon' diff --git a/packages/web/components/Dashboard/Settings/Subscription/CardOnFile.tsx b/packages/web/components/Dashboard/Settings/Subscription/CardOnFile.tsx index 5e1c903d5..9461ad300 100644 --- a/packages/web/components/Dashboard/Settings/Subscription/CardOnFile.tsx +++ b/packages/web/components/Dashboard/Settings/Subscription/CardOnFile.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react' import theme from '@/theme' import Button, { ButtonSize, ButtonVariant } from '@/components/Button' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import UpdateCardFormModal from './UpdateCardFormModal' type CardOnFileProps = { diff --git a/packages/web/components/Dashboard/Settings/Subscription/PaymentForm.tsx b/packages/web/components/Dashboard/Settings/Subscription/PaymentForm.tsx index 040b0f9f0..ff678ddc7 100644 --- a/packages/web/components/Dashboard/Settings/Subscription/PaymentForm.tsx +++ b/packages/web/components/Dashboard/Settings/Subscription/PaymentForm.tsx @@ -9,7 +9,7 @@ import { } from '@/generated/graphql' import Button from '@/components/Button' import SubscriptionPlanSelect from './SubscriptionPlanSelect' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import theme from '@/theme' type PaymentFormProps = { diff --git a/packages/web/components/Dashboard/Settings/Subscription/PaymentFormModal.tsx b/packages/web/components/Dashboard/Settings/Subscription/PaymentFormModal.tsx index b0a561b5a..14d55b531 100644 --- a/packages/web/components/Dashboard/Settings/Subscription/PaymentFormModal.tsx +++ b/packages/web/components/Dashboard/Settings/Subscription/PaymentFormModal.tsx @@ -1,7 +1,7 @@ import React from 'react' import Modal from '@/components/Modal' import PaymentForm from './PaymentForm' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' type PaymentFormModalProps = { onClose: () => void diff --git a/packages/web/components/Dashboard/Settings/Subscription/SubscriptionForm.tsx b/packages/web/components/Dashboard/Settings/Subscription/SubscriptionForm.tsx index a4288bab7..9ad958376 100644 --- a/packages/web/components/Dashboard/Settings/Subscription/SubscriptionForm.tsx +++ b/packages/web/components/Dashboard/Settings/Subscription/SubscriptionForm.tsx @@ -3,7 +3,7 @@ import { toast } from 'react-toastify' import Button, { ButtonVariant } from '@/components/Button' import { useConfirmationModal } from '@/components/Modals/ConfirmationModal' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { MembershipSubscriptionPeriod, UserWithSubscriptionFragmentFragment as UserType, diff --git a/packages/web/components/Dashboard/Settings/Subscription/SubscriptionPlanSelect.tsx b/packages/web/components/Dashboard/Settings/Subscription/SubscriptionPlanSelect.tsx index d0b23c0c1..08b1d7523 100644 --- a/packages/web/components/Dashboard/Settings/Subscription/SubscriptionPlanSelect.tsx +++ b/packages/web/components/Dashboard/Settings/Subscription/SubscriptionPlanSelect.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from 'react' import { MembershipSubscriptionPeriod } from '@/generated/graphql' import Select from '@/components/Select' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' type SubscriptionPlanSelectProps = { selectedOption: MembershipSubscriptionPeriod diff --git a/packages/web/components/Dashboard/Settings/Subscription/UpdateCardForm.tsx b/packages/web/components/Dashboard/Settings/Subscription/UpdateCardForm.tsx index 28605b4a3..b6880a192 100644 --- a/packages/web/components/Dashboard/Settings/Subscription/UpdateCardForm.tsx +++ b/packages/web/components/Dashboard/Settings/Subscription/UpdateCardForm.tsx @@ -7,7 +7,7 @@ import { useUpdateSubscriptionPaymentMethodMutation, } from '@/generated/graphql' import Button from '@/components/Button' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import theme from '@/theme' type UpdateCardFormProps = { diff --git a/packages/web/components/Dashboard/Settings/Subscription/UpdateCardFormModal.tsx b/packages/web/components/Dashboard/Settings/Subscription/UpdateCardFormModal.tsx index bb8f38601..2046feee8 100644 --- a/packages/web/components/Dashboard/Settings/Subscription/UpdateCardFormModal.tsx +++ b/packages/web/components/Dashboard/Settings/Subscription/UpdateCardFormModal.tsx @@ -1,7 +1,7 @@ import React from 'react' import Modal from '@/components/Modal' import UpdateCardForm from './UpdateCardForm' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' type UpdateCardFormModalProps = { onClose: () => void diff --git a/packages/web/components/Dashboard/Settings/UILanguageForm.tsx b/packages/web/components/Dashboard/Settings/UILanguageForm.tsx index db1ac2f84..2b63e8637 100644 --- a/packages/web/components/Dashboard/Settings/UILanguageForm.tsx +++ b/packages/web/components/Dashboard/Settings/UILanguageForm.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import SettingsForm from '@/components/Dashboard/Settings/SettingsForm' import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset' diff --git a/packages/web/components/Dashboard/Settings/UpdatePasswordForm.tsx b/packages/web/components/Dashboard/Settings/UpdatePasswordForm.tsx index da3d67de2..3afa1179a 100644 --- a/packages/web/components/Dashboard/Settings/UpdatePasswordForm.tsx +++ b/packages/web/components/Dashboard/Settings/UpdatePasswordForm.tsx @@ -1,7 +1,7 @@ import React from 'react' import { useForm } from 'react-hook-form' import { toast } from 'react-toastify' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import FormError from '@/components/FormError' import SettingsForm from '@/components/Dashboard/Settings/SettingsForm' import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset' diff --git a/packages/web/components/FeatureComparisonTable/FeatureComparisonTable.tsx b/packages/web/components/FeatureComparisonTable/FeatureComparisonTable.tsx index 2eb3d8db7..fedfea5fe 100644 --- a/packages/web/components/FeatureComparisonTable/FeatureComparisonTable.tsx +++ b/packages/web/components/FeatureComparisonTable/FeatureComparisonTable.tsx @@ -1,6 +1,6 @@ import theme from '@/theme' import React from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import CheckmarkCircleIcon from '../Icons/CheckmarkCircleIcon' type FeatureProps = { diff --git a/packages/web/components/InlineFeedbackPopover/Comment.tsx b/packages/web/components/InlineFeedbackPopover/Comment.tsx index e22050b1b..cd4a2b6dd 100644 --- a/packages/web/components/InlineFeedbackPopover/Comment.tsx +++ b/packages/web/components/InlineFeedbackPopover/Comment.tsx @@ -15,7 +15,7 @@ import { useApplySuggestionMutation, } from '@/generated/graphql' import theme from '@/theme' -import { Router, useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import EditableMarkdown from '@/components/EditableMarkdown' import Button, { ButtonSize, ButtonVariant } from '@/components/Button' import { useConfirmationModal } from '@/components/Modals/ConfirmationModal' @@ -28,6 +28,7 @@ import LevelGauge from '../LevelGauge' import UserAvatar from '../UserAvatar' import PremiumFeatureModal from '../Modals/PremiumFeatureModal' import { JOURNALY_PREMIUM_URL } from '@/constants' +import { useRouter } from 'next/router' type CommentProps = { comment: CommentType @@ -52,6 +53,7 @@ const Comment = ({ currentContentInPost, postAuthorId, }: CommentProps) => { + const router = useRouter() const { t } = useTranslation('comment') const [isEditMode, setIsEditMode] = useState(false) const [updatingCommentBody, setUpdatingCommentBody] = useState(comment.body) @@ -310,7 +312,7 @@ const Comment = ({ featureExplanation={t('acceptSuggestionPremiumFeatureExplanation')} onAcknowledge={() => setDisplayPremiumFeatureModal(false)} onGoToPremium={() => { - Router.push(JOURNALY_PREMIUM_URL) + router.push(JOURNALY_PREMIUM_URL) setDisplayPremiumFeatureModal(false) }} /> diff --git a/packages/web/components/InlineFeedbackPopover/Thread.tsx b/packages/web/components/InlineFeedbackPopover/Thread.tsx index 56245c1a2..c664c38d9 100644 --- a/packages/web/components/InlineFeedbackPopover/Thread.tsx +++ b/packages/web/components/InlineFeedbackPopover/Thread.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { useCreateCommentMutation, useCreateThreadMutation, diff --git a/packages/web/components/InterestFormField/InterestFormField.tsx b/packages/web/components/InterestFormField/InterestFormField.tsx index 05ba80b41..c0b20d595 100644 --- a/packages/web/components/InterestFormField/InterestFormField.tsx +++ b/packages/web/components/InterestFormField/InterestFormField.tsx @@ -7,7 +7,7 @@ import { } from '@/generated/graphql' import Button, { ButtonVariant } from '@/components/Button' import { OptionPills } from '@/components/MultiSelect' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import Select from '../Select' type Props = { diff --git a/packages/web/components/JournalyEditor/Toolbar/InsertImageButton.tsx b/packages/web/components/JournalyEditor/Toolbar/InsertImageButton.tsx index 12581bed0..cc2907686 100644 --- a/packages/web/components/JournalyEditor/Toolbar/InsertImageButton.tsx +++ b/packages/web/components/JournalyEditor/Toolbar/InsertImageButton.tsx @@ -1,7 +1,8 @@ import React, { useCallback } from 'react' import { useSlate } from 'slate-react' -import { useTranslation, Router } from '@/config/i18n' +import { useTranslation } from 'next-i18next' +import { useRouter } from 'next/router' import BaseToolbarButton from './BaseToolbarButton' import { insertImage } from '../helpers' import PremiumFeatureModal from '@/components/Modals/PremiumFeatureModal' @@ -17,6 +18,8 @@ type InsertImageButtonProps = { const InsertImageButton = ({ children, allowInlineImages }: InsertImageButtonProps) => { const { t } = useTranslation('post') + const router = useRouter() + const editor = useSlate() const fileInput = React.useRef(null) const [displayPremiumFeatureModal, setDisplayPremiumFeatureModal] = React.useState(false) @@ -58,7 +61,7 @@ const InsertImageButton = ({ children, allowInlineImages }: InsertImageButtonPro setDisplayPremiumFeatureModal(false) }} onGoToPremium={(): void => { - Router.push('/settings/subscription') + router.push('/settings/subscription') setDisplayPremiumFeatureModal(false) }} /> diff --git a/packages/web/components/JournalyEditor/Toolbar/Toolbar.tsx b/packages/web/components/JournalyEditor/Toolbar/Toolbar.tsx index 988c07874..c1998195d 100644 --- a/packages/web/components/JournalyEditor/Toolbar/Toolbar.tsx +++ b/packages/web/components/JournalyEditor/Toolbar/Toolbar.tsx @@ -30,7 +30,7 @@ import ToolbarButton from './ToolbarButton' import InsertImageButton from './InsertImageButton' import { isTableActive } from '../helpers' import SwitchToggle from '@/components/SwitchToggle' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import useIntersectionObserver from '@/hooks/userIntersectionObserver' type ToolbarProps = { diff --git a/packages/web/components/JournalyEditor/Toolbar/ToolbarButton.tsx b/packages/web/components/JournalyEditor/Toolbar/ToolbarButton.tsx index a6ce18bc5..0a1ad4850 100644 --- a/packages/web/components/JournalyEditor/Toolbar/ToolbarButton.tsx +++ b/packages/web/components/JournalyEditor/Toolbar/ToolbarButton.tsx @@ -1,7 +1,7 @@ import React, { useCallback } from 'react' import { useSlate } from 'slate-react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import BaseToolbarButton from './BaseToolbarButton' import { ButtonType, toogleByType, isTypeActive } from '../helpers' diff --git a/packages/web/components/JournalyEditor/helpers.ts b/packages/web/components/JournalyEditor/helpers.ts index 395741217..dcf1dd998 100644 --- a/packages/web/components/JournalyEditor/helpers.ts +++ b/packages/web/components/JournalyEditor/helpers.ts @@ -179,7 +179,7 @@ const toggleLink = ({ editor, t }: ToggleArgs) => { url = validateProtocol(url) if (!isUrl(url)) { - t && toast.error(t('websitePatternError')) + t && toast.error(t('websitePatternError')) return } diff --git a/packages/web/components/LanguageFormField/LanguageFormField.tsx b/packages/web/components/LanguageFormField/LanguageFormField.tsx index ca6253296..08407246b 100644 --- a/packages/web/components/LanguageFormField/LanguageFormField.tsx +++ b/packages/web/components/LanguageFormField/LanguageFormField.tsx @@ -11,7 +11,7 @@ import Button, { ButtonVariant } from '@/components/Button' import { OptionPills } from '@/components/MultiSelect' import { languageNameWithDialect } from '@/utils/languages' import theme from '@/theme' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' type Props = { languages: LanguageType[] diff --git a/packages/web/components/Layouts/DashboardLayout.tsx b/packages/web/components/Layouts/DashboardLayout.tsx index fea10402c..09680f171 100644 --- a/packages/web/components/Layouts/DashboardLayout.tsx +++ b/packages/web/components/Layouts/DashboardLayout.tsx @@ -26,9 +26,7 @@ const DashboardLayout: React.FC = ({ children, pad = 'always' }) => { return ( - - Skip to content - + Skip to content
    @@ -56,7 +54,10 @@ const DashboardLayout: React.FC = ({ children, pad = 'always' }) => { @media (${navConstants.mobileNavOnly}) { .dashboard-container { - ${pad === 'aboveMobile' ? 'padding: 0;' : ''} + // TODO: Remove this bg unset once we can hopefully + // get Next to fix this. + ${pad === 'aboveMobile' ? 'padding: 0;' : ''}; + background: unset; } } diff --git a/packages/web/components/LoadingWrapper/LoadingWrapper.tsx b/packages/web/components/LoadingWrapper/LoadingWrapper.tsx index cee56a034..06479eab4 100644 --- a/packages/web/components/LoadingWrapper/LoadingWrapper.tsx +++ b/packages/web/components/LoadingWrapper/LoadingWrapper.tsx @@ -1,7 +1,7 @@ import React from 'react' import { ApolloError } from '@apollo/client' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import LoadingSpinner from '@/components/Icons/LoadingSpinner' import theme from '@/theme' diff --git a/packages/web/components/LoginForm/LoginForm.tsx b/packages/web/components/LoginForm/LoginForm.tsx index 52505fd53..eb5284857 100644 --- a/packages/web/components/LoginForm/LoginForm.tsx +++ b/packages/web/components/LoginForm/LoginForm.tsx @@ -3,7 +3,7 @@ import Link from 'next/link' import { useRouter } from 'next/router' import { useForm, ErrorMessage } from 'react-hook-form' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { useLoginUserMutation, CurrentUserDocument, useCurrentUserQuery } from '@/generated/graphql' import FormError from '@/components/FormError' import Button from '@/components/Button' diff --git a/packages/web/components/Modals/ConfirmationModal/ConfirmationModal.tsx b/packages/web/components/Modals/ConfirmationModal/ConfirmationModal.tsx index 5a0ed89be..ff1a33981 100644 --- a/packages/web/components/Modals/ConfirmationModal/ConfirmationModal.tsx +++ b/packages/web/components/Modals/ConfirmationModal/ConfirmationModal.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import Button, { ButtonVariant } from '@/components/Button' import Modal from '@/components/Modal' diff --git a/packages/web/components/Modals/ImageUploadModal/ImageUploadModal.tsx b/packages/web/components/Modals/ImageUploadModal/ImageUploadModal.tsx index a1a7950b6..b1d7bb669 100644 --- a/packages/web/components/Modals/ImageUploadModal/ImageUploadModal.tsx +++ b/packages/web/components/Modals/ImageUploadModal/ImageUploadModal.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import Button, { ButtonVariant } from '@/components/Button' import Modal from '@/components/Modal' import theme from '@/theme' diff --git a/packages/web/components/Modals/ImageUploadModal/SearchUnsplash.tsx b/packages/web/components/Modals/ImageUploadModal/SearchUnsplash.tsx index fda65333f..890989199 100644 --- a/packages/web/components/Modals/ImageUploadModal/SearchUnsplash.tsx +++ b/packages/web/components/Modals/ImageUploadModal/SearchUnsplash.tsx @@ -4,7 +4,7 @@ import { toast } from 'react-toastify' import { InitiatePostImageUploadResponse } from '@/generated/graphql' import theme from '@/theme' import SearchInput from '@/components/Dashboard/Filters/SearchInput' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' /** * PostEditor diff --git a/packages/web/components/Modals/ImageUploadModal/UploadImage.tsx b/packages/web/components/Modals/ImageUploadModal/UploadImage.tsx index b20bdf684..c8da22c32 100644 --- a/packages/web/components/Modals/ImageUploadModal/UploadImage.tsx +++ b/packages/web/components/Modals/ImageUploadModal/UploadImage.tsx @@ -5,7 +5,7 @@ import { ButtonVariant } from '@/components/Button' import usePostImageUpload from '@/hooks/usePostImageUpload' import { InitiatePostImageUploadResponse } from '@/generated/graphql' import { HTMLInputEvent } from '@/hooks/useImageUpload' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' type UploadImageProps = { onImageSelect: (image: InitiatePostImageUploadResponse | null) => void diff --git a/packages/web/components/Modals/PremiumFeatureModal/PremiumFeatureModal.tsx b/packages/web/components/Modals/PremiumFeatureModal/PremiumFeatureModal.tsx index af70dcdc5..0015eb8bd 100644 --- a/packages/web/components/Modals/PremiumFeatureModal/PremiumFeatureModal.tsx +++ b/packages/web/components/Modals/PremiumFeatureModal/PremiumFeatureModal.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import Button, { ButtonVariant } from '@/components/Button' import Modal from '@/components/Modal' diff --git a/packages/web/components/Modals/WelcomeModal/WelcomeModalBody.tsx b/packages/web/components/Modals/WelcomeModal/WelcomeModalBody.tsx index fa892514d..d1c091f21 100644 --- a/packages/web/components/Modals/WelcomeModal/WelcomeModalBody.tsx +++ b/packages/web/components/Modals/WelcomeModal/WelcomeModalBody.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { ApolloQueryResult } from '@apollo/client' import { LanguagesFormDataQuery, diff --git a/packages/web/components/NotificationFeed/NotificationFeed.tsx b/packages/web/components/NotificationFeed/NotificationFeed.tsx index 980403995..3b6ada40a 100644 --- a/packages/web/components/NotificationFeed/NotificationFeed.tsx +++ b/packages/web/components/NotificationFeed/NotificationFeed.tsx @@ -17,7 +17,7 @@ import GenericErrorBoundary from '@/components/GenericErrorBoundary' import XIcon from '../Icons/XIcon' import { useNotificationContext } from './NotificationContext' import NotificationLevelTwo from './NotificationLevelTwo' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import useOnClickOut from '@/hooks/useOnClickOut' import { findEventTargetParent } from '@/utils' diff --git a/packages/web/components/NotificationFeed/Notifications.tsx b/packages/web/components/NotificationFeed/Notifications.tsx index 35019d85f..230ed0453 100644 --- a/packages/web/components/NotificationFeed/Notifications.tsx +++ b/packages/web/components/NotificationFeed/Notifications.tsx @@ -10,7 +10,7 @@ import { import theme from '@/theme' import ClapIcon from '../Icons/ClapIcon' import UserList from '../UserList' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import LikeIcon from '../Icons/LikeIcon' import UserAvatar from '../UserAvatar' import MultiuserAvatar from '../MultiuserAvatar' diff --git a/packages/web/components/Pagination/Pagination.tsx b/packages/web/components/Pagination/Pagination.tsx index 4fe555fea..96b72c6cc 100644 --- a/packages/web/components/Pagination/Pagination.tsx +++ b/packages/web/components/Pagination/Pagination.tsx @@ -2,7 +2,7 @@ import React from 'react' import Head from 'next/head' import { useRouter } from 'next/router' import Link from 'next/link' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' type Props = { currentPage: number @@ -12,7 +12,7 @@ type Props = { } const Pagination: React.FC = ({ currentPage, total, numPerPage, title }) => { - const { t } = useTranslation('my-feed') + const { t } = useTranslation('common') const { pathname } = useRouter() const pages = Math.ceil(total / numPerPage) diff --git a/packages/web/components/PostBodyStyles/PostBodyStyles.tsx b/packages/web/components/PostBodyStyles/PostBodyStyles.tsx index e5df42d66..8e64a9ecc 100644 --- a/packages/web/components/PostBodyStyles/PostBodyStyles.tsx +++ b/packages/web/components/PostBodyStyles/PostBodyStyles.tsx @@ -75,7 +75,10 @@ const PostBodyStyles: React.FC = ({ parentClassName }: Props) => { @media (min-width: ${theme.breakpoints.SM}) { .${parentClassName} h2 { + // TODO: Remove this bg unset once we can hopefully + // get Next to fix this. ${theme.typography.headingXL}; + background: unset; } } `} diff --git a/packages/web/components/PostEditor/PostEditor.tsx b/packages/web/components/PostEditor/PostEditor.tsx index 9e11c2b05..1b61e6b9e 100644 --- a/packages/web/components/PostEditor/PostEditor.tsx +++ b/packages/web/components/PostEditor/PostEditor.tsx @@ -18,7 +18,7 @@ import { InitiatePostImageUploadResponse, } from '@/generated/graphql' import { languageNameWithDialect } from '@/utils/languages' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import ImageUploadModal from '../Modals/ImageUploadModal' type BasePostData = { diff --git a/packages/web/components/PostHeader/PostHeader.tsx b/packages/web/components/PostHeader/PostHeader.tsx index 58fe84218..5e5acc5cb 100644 --- a/packages/web/components/PostHeader/PostHeader.tsx +++ b/packages/web/components/PostHeader/PostHeader.tsx @@ -7,7 +7,7 @@ import { LanguageFragmentFragment as LanguageType, LanguageLevel, } from '@/generated/graphql' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { formatLongDate } from '@/utils' import theme from '@/theme' diff --git a/packages/web/components/PrivateShareLink/PrivateShareLink.tsx b/packages/web/components/PrivateShareLink/PrivateShareLink.tsx index c867a23e0..6ab9df04e 100644 --- a/packages/web/components/PrivateShareLink/PrivateShareLink.tsx +++ b/packages/web/components/PrivateShareLink/PrivateShareLink.tsx @@ -3,7 +3,7 @@ import { toast } from 'react-toastify' import Button, { ButtonVariant } from '@/components/Button' import ContentCopyIcon from '../Icons/ContentCopyIcon' import theme from '@/theme' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' type PrivateShareLinkProps = { privateShareId: string diff --git a/packages/web/components/RequestResetPasswordForm/RequestResetPasswordForm.tsx b/packages/web/components/RequestResetPasswordForm/RequestResetPasswordForm.tsx index f7dc2b348..5162522cc 100644 --- a/packages/web/components/RequestResetPasswordForm/RequestResetPasswordForm.tsx +++ b/packages/web/components/RequestResetPasswordForm/RequestResetPasswordForm.tsx @@ -4,7 +4,7 @@ import { useRouter } from 'next/router' import { useForm, ErrorMessage } from 'react-hook-form' import { toast } from 'react-toastify' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { useRequestResetPasswordMutation } from '@/generated/graphql' import FormError from '@/components/FormError' import Button from '@/components/Button' diff --git a/packages/web/components/ResetPasswordForm/ResetPasswordForm.tsx b/packages/web/components/ResetPasswordForm/ResetPasswordForm.tsx index 0ebd6668f..dd1827baa 100644 --- a/packages/web/components/ResetPasswordForm/ResetPasswordForm.tsx +++ b/packages/web/components/ResetPasswordForm/ResetPasswordForm.tsx @@ -3,7 +3,7 @@ import { useRouter } from 'next/router' import { useForm, ErrorMessage } from 'react-hook-form' import { toast } from 'react-toastify' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { useResetPasswordMutation } from '@/generated/graphql' import FormError from '@/components/FormError' import Button from '@/components/Button' diff --git a/packages/web/components/SignupForm/SignupForm.tsx b/packages/web/components/SignupForm/SignupForm.tsx index bbf118197..4f2cf70a6 100644 --- a/packages/web/components/SignupForm/SignupForm.tsx +++ b/packages/web/components/SignupForm/SignupForm.tsx @@ -3,7 +3,7 @@ import Link from 'next/link' import { useRouter } from 'next/router' import { useForm, ErrorMessage } from 'react-hook-form' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import { useCreateUserMutation, useCurrentUserQuery } from '@/generated/graphql' import FormError from '@/components/FormError' import Button from '@/components/Button' diff --git a/packages/web/components/Site/Home/FeatureSection.tsx b/packages/web/components/Site/Home/FeatureSection.tsx index 60b30cba3..380231873 100644 --- a/packages/web/components/Site/Home/FeatureSection.tsx +++ b/packages/web/components/Site/Home/FeatureSection.tsx @@ -1,4 +1,4 @@ -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import FeatureComparisonTable from '@/components/FeatureComparisonTable' import HomeSection from './HomeSection' diff --git a/packages/web/components/Site/Home/HomeSection.tsx b/packages/web/components/Site/Home/HomeSection.tsx index c9d4b59ae..29f51dadd 100644 --- a/packages/web/components/Site/Home/HomeSection.tsx +++ b/packages/web/components/Site/Home/HomeSection.tsx @@ -28,9 +28,12 @@ const HomeSection: React.FC = ({ sectionHeading, grey = false, children } } h1 { + // TODO: Remove this bg unset once we can hopefully + // get Next to fix this. margin-bottom: 50px; text-align: center; ${theme.typography.headingLG} + background: unset; } .j-video { diff --git a/packages/web/components/Site/Home/ReasonsSection.tsx b/packages/web/components/Site/Home/ReasonsSection.tsx index 136bcbfa6..4d8a4f4e7 100644 --- a/packages/web/components/Site/Home/ReasonsSection.tsx +++ b/packages/web/components/Site/Home/ReasonsSection.tsx @@ -1,5 +1,5 @@ import HomeSection from './HomeSection' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' type ReasonCardProps = { image: string diff --git a/packages/web/components/Site/Home/TestimonialsSection.tsx b/packages/web/components/Site/Home/TestimonialsSection.tsx index 41bdd22a9..a0815c7b2 100644 --- a/packages/web/components/Site/Home/TestimonialsSection.tsx +++ b/packages/web/components/Site/Home/TestimonialsSection.tsx @@ -1,4 +1,4 @@ -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import React from 'react' import HomeSection from './HomeSection' import Testimonial from './Testimonial' diff --git a/packages/web/components/Site/Home/TopSection.tsx b/packages/web/components/Site/Home/TopSection.tsx index acc40b64c..cad85357c 100644 --- a/packages/web/components/Site/Home/TopSection.tsx +++ b/packages/web/components/Site/Home/TopSection.tsx @@ -1,7 +1,7 @@ import Link from 'next/link' import theme from '@/theme' import Button, { ButtonSize } from '@/components/Button' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' const TopSection = () => { const { t } = useTranslation('common') diff --git a/packages/web/components/Site/Home/VideoSection.tsx b/packages/web/components/Site/Home/VideoSection.tsx index f330a48ab..2491abbb3 100644 --- a/packages/web/components/Site/Home/VideoSection.tsx +++ b/packages/web/components/Site/Home/VideoSection.tsx @@ -1,4 +1,4 @@ -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import HomeSection from './HomeSection' const VideoSection = () => { diff --git a/packages/web/components/Site/Nav/Nav.tsx b/packages/web/components/Site/Nav/Nav.tsx index 9521ca03f..5af650eab 100644 --- a/packages/web/components/Site/Nav/Nav.tsx +++ b/packages/web/components/Site/Nav/Nav.tsx @@ -1,5 +1,5 @@ import { useCurrentUserQuery, User as UserType } from '@/generated/graphql' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' import NavLink from '@/components/NavLink' import Logo from '@/components/Logo' import theme from '@/theme' diff --git a/packages/web/components/Site/Pricing/Pricing.tsx b/packages/web/components/Site/Pricing/Pricing.tsx index 488b7e4f0..5ae3b3ab9 100644 --- a/packages/web/components/Site/Pricing/Pricing.tsx +++ b/packages/web/components/Site/Pricing/Pricing.tsx @@ -1,6 +1,6 @@ import FeatureComparisonTable from '@/components/FeatureComparisonTable' import theme from '@/theme' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' const Pricing = () => { const { t } = useTranslation('settings') diff --git a/packages/web/components/Site/TermsOfService/TermsOfService.tsx b/packages/web/components/Site/TermsOfService/TermsOfService.tsx index 3aafbf562..9bb0619ff 100644 --- a/packages/web/components/Site/TermsOfService/TermsOfService.tsx +++ b/packages/web/components/Site/TermsOfService/TermsOfService.tsx @@ -93,14 +93,14 @@ const TermsOfService = () => { } h1 { + ${theme.typography.headingXL} margin-bottom: 20px; text-align: center; - ${theme.typography.headingXL} } h2 { - margin-bottom: 12px; ${theme.typography.headingMD} + margin-bottom: 12px; } p { diff --git a/packages/web/components/SwipeableElement/SwipeableElement.tsx b/packages/web/components/SwipeableElement/SwipeableElement.tsx index 7084739b8..8d680ff05 100644 --- a/packages/web/components/SwipeableElement/SwipeableElement.tsx +++ b/packages/web/components/SwipeableElement/SwipeableElement.tsx @@ -3,7 +3,7 @@ import React, { useRef } from 'react' import Button, { ButtonVariant } from '@/components/Button' import CheckmarkIcon from '../Icons/CheckmarkIcon' import DeleteIcon from '../Icons/DeleteIcon' -import { useTranslation } from '@/config/i18n' +import { useTranslation } from 'next-i18next' type SwipeableElementProps = { nonDestructiveAction: () => void diff --git a/packages/web/components/UILanguageSelect/UILanguageSelect.tsx b/packages/web/components/UILanguageSelect/UILanguageSelect.tsx index e46c3d88d..e507f5330 100644 --- a/packages/web/components/UILanguageSelect/UILanguageSelect.tsx +++ b/packages/web/components/UILanguageSelect/UILanguageSelect.tsx @@ -1,6 +1,5 @@ -import React from 'react' -import { I18nContext } from 'react-i18next' -import { useTranslation, i18n } from '@/config/i18n' +import React, { useCallback } from 'react' +import { I18nContext, useTranslation } from 'next-i18next' import Select from '@/components/Select' @@ -19,12 +18,19 @@ const UILanguageSelect = () => { const { i18n: { language }, } = React.useContext(I18nContext) + + const handleChangeLanguage = useCallback((lang: string) => { + const standardizedLang = lang.replaceAll('_', '-') + document.cookie = `j-lang=${standardizedLang};path=/` + document.location.reload() + }, []) + return (