[WIP] The Big Apollo Refactor

.nvmrc

@@ -1 +1 @@
-lts/gallium
+lts/iron

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 = () => {
   /* ... */

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()

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": {

packages/j-db-client/prisma/migrations/20240523150228_add_missing_uilangs_to_enum/migration.sql

@@ -0,0 +1,12 @@
+-- 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';

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 {

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",

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 = {

packages/web/components/Dashboard/Filters/Filters.tsx

@@ -7,7 +7,7 @@ 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 { Router, useTranslation } from 'next-i18next'
 import PremiumFeatureModal from '@/components/Modals/PremiumFeatureModal'
 
 export type PostQueryVarsType = {
@@ -143,7 +143,7 @@ const Filters: React.FC<Props> = ({
     }))
     resetPagination()
   }, [resetPagination])
-  
+
   const toggleMyLanguagesFilter = useCallback(() => {
     setPostQueryVars((prevState) => ({
       ...prevState,

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

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

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

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<Props> = ({ currentUser, initialSearchFilters }) => {
@@ -79,12 +88,7 @@ const MyFeed: React.FC<Props> = ({ 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

packages/web/components/Dashboard/MyFeed/index.ts

@@ -1,2 +1 @@
 export { default } from './MyFeed'
-export type { InitialSearchFilters } from './MyFeed'

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<Props> = ({ 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<Props> = ({ 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<Props> = ({ currentUser, status }) => {
             <Pagination
               currentPage={currentPage}
               total={count}
-              numPerPage={NUM_POSTS_PER_PAGE}
+              numPerPage={NUM_POSTS_PER_MY_POSTS_PAGE}
               title={pageTitle}
             />
           )}

packages/web/components/Dashboard/Nav/Nav.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState, useEffect, useRef } from 'react'
 import Link from 'next/link'
 import classNames from 'classnames'
 
-import { Router, useTranslation } from '@/config/i18n'
+import { Router, useTranslation } from 'next-i18next'
 import { navConstants } from './nav-constants'
 import theme from '@/theme'
 import {

packages/web/components/Dashboard/Post/Post.tsx

@@ -23,7 +23,7 @@ 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 { Router, useTranslation } from 'next-i18next'
 import PostHeader from '@/components/PostHeader'
 import ConfirmationModal from '@/components/Modals/ConfirmationModal'
 import PremiumFeatureModal from '@/components/Modals/PremiumFeatureModal'
@@ -543,9 +543,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: {

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'

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'

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'

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

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,

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,

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,

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'

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'

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'

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 = () => {