Solved cycle dependency

src/api/client.ts

@@ -1,6 +1,5 @@
 import axios from 'axios'
 import chalk from 'chalk'
-import { store, RootState } from '@root/store'
 
 const ctx = new chalk.Instance({ level: 3 })
 
@@ -36,7 +35,8 @@ const client = async ({
       (params ? ctx.green(' -> ') : ''),
     params ? params : ''
   )
-  const state: RootState['instances'] = store.getState().instances
+  const { store } = require('@root/store')
+  const state = store.getState().instances
   const domain =
     instance === 'remote' ? instanceDomain || state.remote.url : state.local.url
 

src/components/Parse/HTML.tsx

@@ -1,5 +1,5 @@
 import openLink from '@components/openLink'
-import { ParseEmojis } from '@components/Parse'
+import ParseEmojis from '@components/Parse/Emojis'
 import { Feather } from '@expo/vector-icons'
 import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'

src/screens/Me/Root/Login.tsx

@@ -340,4 +340,6 @@ const styles = StyleSheet.create({
   }
 })
 
+Login.whyDidYouRender = true
+
 export default Login

src/screens/Shared/Account/Information/Actions.tsx

@@ -46,9 +46,7 @@ const AccountInformationActions: React.FC<Props> = ({ account }) => {
   const navigation = useNavigation()
 
   const relationshipQueryKey = ['Relationship', { id: account?.id }]
-  const query = useQuery(relationshipQueryKey, relationshipFetch, {
+  const query = useQuery(relationshipQueryKey, relationshipFetch)
-    enabled: false
-  })
   useEffect(() => {
     if (account?.id) {
       query.refetch()

src/screens/Shared/Compose.tsx

@@ -7,14 +7,7 @@ import ComposeRoot from '@screens/Shared/Compose/Root'
 import { getLocalAccountPreferences } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, {
+import React, { useCallback, useEffect, useReducer, useState } from 'react'
-  createContext,
-  Dispatch,
-  useCallback,
-  useEffect,
-  useReducer,
-  useState
-} from 'react'
 import {
   Alert,
   Keyboard,
@@ -26,20 +19,15 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import { useQueryClient } from 'react-query'
 import ComposeEditAttachment from './Compose/EditAttachment'
+import ComposeContext from './Compose/utils/createContext'
 import composeInitialState from './Compose/utils/initialState'
 import composeParseState from './Compose/utils/parseState'
 import composeSend from './Compose/utils/post'
 import composeReducer from './Compose/utils/reducer'
-import { ComposeAction, ComposeState } from './Compose/utils/types'
+import { ComposeState } from './Compose/utils/types'
 
 const Stack = createNativeStackNavigator()
 
-type ContextType = {
-  composeState: ComposeState
-  composeDispatch: Dispatch<ComposeAction>
-}
-export const ComposeContext = createContext<ContextType>({} as ContextType)
-
 export interface Props {
   route: {
     params:

src/screens/Shared/Compose/Actions.tsx

@@ -1,11 +1,11 @@
 import { Feather } from '@expo/vector-icons'
 import { StyleConstants } from '@utils/styles/constants'
+import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { ComposeContext } from '@screens/Shared/Compose'
-import addAttachment from '@root/screens/Shared/Compose/addAttachment'
 import React, { useCallback, useContext, useMemo } from 'react'
 import { ActionSheetIOS, StyleSheet, View } from 'react-native'
-import layoutAnimation from '@root/utils/styles/layoutAnimation'
+import addAttachment from './/addAttachment'
+import ComposeContext from './utils/createContext'
 
 const ComposeActions: React.FC = () => {
   const { composeState, composeDispatch } = useContext(ComposeContext)

src/screens/Shared/Compose/Attachments.tsx

@@ -1,10 +1,9 @@
 import { Feather } from '@expo/vector-icons'
 import Button from '@components/Button'
+import haptics from '@components/haptics'
 import { useNavigation } from '@react-navigation/native'
-import { ComposeContext } from '@screens/Shared/Compose'
-import addAttachment from '@screens/Shared/Compose/addAttachment'
-import { ExtendedAttachment } from '@screens/Shared/Compose/utils/types'
 import { StyleConstants } from '@utils/styles/constants'
+import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, {
   useCallback,
@@ -22,8 +21,9 @@ import {
   View
 } from 'react-native'
 import { Chase } from 'react-native-animated-spinkit'
-import layoutAnimation from '@root/utils/styles/layoutAnimation'
+import addAttachment from './addAttachment'
-import haptics from '@root/components/haptics'
+import ComposeContext from './utils/createContext'
+import { ExtendedAttachment } from './utils/types'
 
 const DEFAULT_HEIGHT = 200
 

src/screens/Shared/Compose/EditAttachment.tsx

@@ -1,7 +1,6 @@
-import client from '@root/api/client'
+import client from '@api/client'
-import haptics from '@root/components/haptics'
+import haptics from '@components/haptics'
-import { HeaderLeft, HeaderRight } from '@root/components/Header'
+import { HeaderLeft, HeaderRight } from '@components/Header'
-import { ComposeContext } from '@screens/Shared/Compose'
 import React, {
   useCallback,
   useContext,
@@ -13,6 +12,7 @@ import { Alert, KeyboardAvoidingView } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import ComposeEditAttachmentRoot from './EditAttachment/Root'
+import ComposeContext from './utils/createContext'
 
 const Stack = createNativeStackNavigator()
 

src/screens/Shared/Compose/EditAttachment/Image.tsx

@@ -1,6 +1,5 @@
-import { StyleConstants } from '@root/utils/styles/constants'
+import { StyleConstants } from '@utils/styles/constants'
-import { useTheme } from '@root/utils/styles/ThemeManager'
+import { useTheme } from '@utils/styles/ThemeManager'
-import { ComposeContext } from '@screens/Shared/Compose'
 import React, { MutableRefObject, useCallback, useContext, useRef } from 'react'
 import {
   Animated,
@@ -12,6 +11,7 @@ import {
 } from 'react-native'
 import { PanGestureHandler } from 'react-native-gesture-handler'
 import Svg, { Circle, G, Path } from 'react-native-svg'
+import ComposeContext from '../utils/createContext'
 
 export interface Props {
   index: number

src/screens/Shared/Compose/EditAttachment/Root.tsx

@@ -1,5 +1,4 @@
 import AttachmentVideo from '@components/Timelines/Timeline/Shared/Attachment/Video'
-import { ComposeContext } from '@screens/Shared/Compose'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, {
@@ -10,6 +9,7 @@ import React, {
   useMemo
 } from 'react'
 import { ScrollView, StyleSheet, Text, TextInput, View } from 'react-native'
+import ComposeContext from '../utils/createContext'
 import ComposeEditAttachmentImage from './Image'
 
 export interface Props {

src/screens/Shared/Compose/Emojis.tsx

@@ -1,3 +1,6 @@
+import haptics from '@components/haptics'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useContext, useMemo } from 'react'
 import {
   Image,
@@ -7,12 +10,8 @@ import {
   Text,
   View
 } from 'react-native'
-import { StyleConstants } from '@utils/styles/constants'
+import ComposeContext from './utils/createContext'
-import { useTheme } from '@utils/styles/ThemeManager'
-
-import { ComposeContext } from '@screens/Shared/Compose'
 import updateText from './updateText'
-import haptics from '@root/components/haptics'
 
 const SingleEmoji = ({ emoji }: { emoji: Mastodon.Emoji }) => {
   const { composeState, composeDispatch } = useContext(ComposeContext)

src/screens/Shared/Compose/Poll.tsx

@@ -1,12 +1,11 @@
-import React, { useContext, useEffect, useState } from 'react'
-import { ActionSheetIOS, StyleSheet, TextInput, View } from 'react-native'
-import { Feather } from '@expo/vector-icons'
-
-import { ComposeContext } from '@screens/Shared/Compose'
-import { useTheme } from '@utils/styles/ThemeManager'
-import { StyleConstants } from '@utils/styles/constants'
 import Button from '@components/Button'
 import { MenuRow } from '@components/Menu'
+import { Feather } from '@expo/vector-icons'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React, { useContext, useEffect, useState } from 'react'
+import { ActionSheetIOS, StyleSheet, TextInput, View } from 'react-native'
+import ComposeContext from './utils/createContext'
 
 const ComposePoll: React.FC = () => {
   const {

src/screens/Shared/Compose/Reply.tsx

@@ -1,14 +1,13 @@
-import React, { useContext } from 'react'
-import { Dimensions, StyleSheet, View } from 'react-native'
-import { useTheme } from '@utils/styles/ThemeManager'
-
 import TimelineAttachment from '@components/Timelines/Timeline/Shared/Attachment'
 import TimelineAvatar from '@components/Timelines/Timeline/Shared/Avatar'
 import TimelineCard from '@components/Timelines/Timeline/Shared/Card'
 import TimelineContent from '@components/Timelines/Timeline/Shared/Content'
 import TimelineHeaderDefault from '@components/Timelines/Timeline/Shared/HeaderDefault'
-import { ComposeContext } from '@screens/Shared/Compose'
 import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import ComposeContext from './utils/createContext'
+import React, { useContext } from 'react'
+import { StyleSheet, View } from 'react-native'
 
 const ComposeReply: React.FC = () => {
   const {
@@ -16,12 +15,6 @@ const ComposeReply: React.FC = () => {
   } = useContext(ComposeContext)
   const { theme } = useTheme()
 
-  const contentWidth =
-    Dimensions.get('window').width -
-    StyleConstants.Spacing.Global.PagePadding * 2 - // Global page padding on both sides
-    StyleConstants.Avatar.M - // Avatar width
-    StyleConstants.Spacing.S // Avatar margin to the right
-
   return (
     <View style={[styles.status, { borderTopColor: theme.border }]}>
       <TimelineAvatar account={replyToStatus!.account} />
@@ -31,10 +24,7 @@ const ComposeReply: React.FC = () => {
           <TimelineContent status={replyToStatus!} />
         )}
         {replyToStatus!.media_attachments.length > 0 && (
-          <TimelineAttachment
+          <TimelineAttachment status={replyToStatus!} />
-            status={replyToStatus!}
-            contentWidth={contentWidth}
-          />
         )}
         {replyToStatus!.card && <TimelineCard card={replyToStatus!.card} />}
       </View>

src/screens/Shared/Compose/Root.tsx

@@ -1,10 +1,5 @@
 import haptics from '@components/haptics'
 import { ParseEmojis } from '@components/Parse'
-import { ComposeContext } from '@screens/Shared/Compose'
-import ComposeActions from '@screens/Shared/Compose/Actions'
-import ComposeRootFooter from '@screens/Shared/Compose/Root/Footer'
-import ComposeRootHeader from '@screens/Shared/Compose/Root/Header'
-import updateText from '@screens/Shared/Compose/updateText'
 import { emojisFetch } from '@utils/fetches/emojisFetch'
 import { searchFetch } from '@utils/fetches/searchFetch'
 import { StyleConstants } from '@utils/styles/constants'
@@ -27,6 +22,11 @@ import {
 } from 'react-native'
 import { Chase } from 'react-native-animated-spinkit'
 import { useQuery } from 'react-query'
+import ComposeActions from './Actions'
+import ComposeRootFooter from './Root/Footer'
+import ComposeRootHeader from './Root/Header'
+import updateText from './updateText'
+import ComposeContext from './utils/createContext'
 import { ComposeAction, ComposeState } from './utils/types'
 
 const ListItem = React.memo(

src/screens/Shared/Compose/Root/Footer.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
-import { ComposeContext } from '@screens/Shared/Compose'
 import ComposeAttachments from '@screens/Shared/Compose/Attachments'
 import ComposeEmojis from '@screens/Shared/Compose/Emojis'
 import ComposePoll from '@screens/Shared/Compose/Poll'
 import ComposeReply from '@screens/Shared/Compose/Reply'
+import ComposeContext from '@screens/Shared/Compose//utils/createContext'
 
 const ComposeRootFooter: React.FC = () => {
   const { composeState } = useContext(ComposeContext)

src/screens/Shared/Compose/Root/Header.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
-import { ComposeContext } from '@screens/Shared/Compose'
 import ComposeSpoilerInput from '@screens/Shared/Compose/SpoilerInput'
 import ComposeTextInput from '@screens/Shared/Compose/TextInput'
+import ComposeContext from '@screens/Shared/Compose//utils/createContext'
 
 const ComposeRootHeader: React.FC = () => {
   const { composeState } = useContext(ComposeContext)

src/screens/Shared/Compose/SpoilerInput.tsx

@@ -2,8 +2,8 @@ import React, { useContext } from 'react'
 import { StyleSheet, Text, TextInput } from 'react-native'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { ComposeContext } from '@screens/Shared/Compose'
 import formatText from './formatText'
+import ComposeContext from './utils/createContext'
 
 const ComposeSpoilerInput: React.FC = () => {
   const { composeState, composeDispatch } = useContext(ComposeContext)

src/screens/Shared/Compose/TextInput.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback, useContext } from 'react'
+import React, { useContext } from 'react'
 import { StyleSheet, Text, TextInput } from 'react-native'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { ComposeContext } from '@screens/Shared/Compose'
 import formatText from './formatText'
+import ComposeContext from './utils/createContext'
 
 const ComposeTextInput: React.FC = () => {
   const { composeState, composeDispatch } = useContext(ComposeContext)

src/screens/Shared/Compose/utils/createContext.ts

@@ -0,0 +1,10 @@
+import { createContext, Dispatch } from 'react'
+import { ComposeAction, ComposeState } from './types'
+
+type ContextType = {
+  composeState: ComposeState
+  composeDispatch: Dispatch<ComposeAction>
+}
+const ComposeContext = createContext<ContextType>({} as ContextType)
+
+export default ComposeContext