Son Posts - Answer Overflow

Son

Explore posts from servers

RReactiflux TtRPC TTCTheo's Typesafe Cult

•Created by Son on 9/23/2024 in #questions

React Native: ScrollView of Text Components not scrolling on Android But it is working on iOS

i have this exact issue: https://stackoverflow.com/questions/75830711/react-native-scrollview-of-text-components-not-scrolling-on-android-but-it-is-w my text content is scrollable in IOS but not in android. my code:

IS_ANDROID && (<View style = {{
                        maxHeight : 200,
                        minHeight : 100,
                      }}><ScrollView contentContainerStyle = {{
                            flexGrow : 1,
                            backgroundColor : "red",
                          }}><Text style = {{
                                fontSize : 18,
                                fontFamily : "ggRegular",
                                color : theme.raw.colors.lead,
                              }}>{value} < / Text >
                     </ ScrollView>
                 </ View>)
}

IS_ANDROID && (<View style = {{
                        maxHeight : 200,
                        minHeight : 100,
                      }}><ScrollView contentContainerStyle = {{
                            flexGrow : 1,
                            backgroundColor : "red",
                          }}><Text style = {{
                                fontSize : 18,
                                fontFamily : "ggRegular",
                                color : theme.raw.colors.lead,
                              }}>{value} < / Text >
                     </ ScrollView>
                 </ View>)
}

1 replies

TTCTheo's Typesafe Cult

•Created by Son on 5/24/2024 in #questions

expo app production logging solutions

Hey, What are the axiom (logging) sentry.io (error logging) equivalents for expo apps?

8 replies

TTCTheo's Typesafe Cult

•Created by Son on 4/4/2024 in #questions

User Privacy Question

Say i have an app which the premise that it offers a safe place for users to “log” sensitive personal data they might not want the world to know about their commitments to various things. Over the long run I would want to organise manage and use this data for many purposes, one being to approach individuals who meet whatever criteria i have set up according to the data. Maybe to sell them services or learn from them. How would one go about user anonymity but still be able to link “logs” to users. Is this feasible? I would like to say “your logs are encrypted and cannot be read by just anyone” but at the end of the day an engineer would be able to link the user to their data by decryption. Is this acceptablet?

18 replies

TTCTheo's Typesafe Cult

•Created by Son on 10/18/2023 in #questions

Can you programmatically reload an expo app?

I have to re-initialize a data structure in my expo managed app (SDK 49) so i need to reload the app. Everything works in development (IOS dev build) , i hit a button and the app reloads. But in production, nothing happens. Is there anything i need to do differently in production I’m only using this function to manually reload the app not to deliver any updates just yet. Updates.reloadAsync() from expo-updates i keep getting code ERR_FUNCTION_CALL in production, my code:

setTimeout(() => {

          (async () => {
            if (__DEV__) {
              DevSettings.reload()
              return
            }
            try {
              const res = await Updates.reloadAsync()
              console.log('res',res)
              Alert.alert('res',JSON.stringify(res))
            } catch (error) {
              Alert.alert('error',JSON.stringify(error))
            }
          })();

        },100);

setTimeout(() => {

          (async () => {
            if (__DEV__) {
              DevSettings.reload()
              return
            }
            try {
              const res = await Updates.reloadAsync()
              console.log('res',res)
              Alert.alert('res',JSON.stringify(res))
            } catch (error) {
              Alert.alert('error',JSON.stringify(error))
            }
          })();

        },100);

2 replies

TTCTheo's Typesafe Cult

•Created by Son on 5/19/2023 in #questions

Are sever components running on an actual sever? Can someone explain?

Next js question. Why can’t we import sever components into client components directly? I know we can pass sever components as props, but why only this way? And are the actual sever components running on an actual sever? Can someone explain?

8 replies

TtRPC

•Created by Son on 5/14/2023 in #❓-help

Is this blog correct? Trpc and next.js 13.4, App directory

I working on integrating with TRPC with the App directory and was given a solution but i'm not sure if the author or myself have the right understanding of how server components work with client components. The scenario: By adding the ‘use client’ directive in the route app layout file which the author suggests, wouldn't that mean all children components would become client-side components, so we would loose the benefits of server components? I was referring to this line in the blog specifically “This can be achieved by wrapping the provider around the {children} node in the src/app/layout.tsx file, which is the main entry point of the application.“ So this would mean next would render all children components as client components, as the provider would have to be at the root of the tree. Meaning are whole app would basically be a client side rendered app? https://codevoweb.com/setup-trpc-server-and-client-in-nextjs-13-app-directory/#comment-1755 I got a response from the blog author “I understand your point now. It's important to note that Client Components can be rendered within Server Components as long as the "use client"; pragma is included in the files that have the Client Components. Wrapping the tRPC provider around the prop of the root layout component allows Next.js to make the hooks and components from the tRPC library available to all Client Components that are descendants of the root layout component. It's important to remember that even though you've wrapped a provider component that has the "use client"; pragma around the prop of the root layout component, Next.js will still render all components inside the app directory as Server Components. This means that the only way all your components will be Client Components is if you include the "use client"; directive at the beginning of the files that contain them. I hope this explanation clarifies things for you. If you have any further questions, please don't hesitate to ask.”

3 replies

TtRPC

•Created by Son on 3/21/2023 in #❓-help

How to call useQuery with params inside JSX

How can i achieve this? Thanks

export function MemberQueryList({ list }: Props) {
  
function checkIsOwner(housingAssociationId: string, memberId: string) {
    const isOwner = trpc.housingAssociation.checkIfOwner.useQuery({
      housingAssociationId,
      memberId,
    });

    return isOwner.data?.ok ?? false;
  }
  const navigate = useNavigate();
  const userId = getSubFromLocalStorage() ?? "";
  return (
    <div>
      {list.map((housingAssociation: listData) => {
        const isOwner = checkIsOwner(housingAssociation.id, housingAssociation.userId);
        return (
          <BoardCard
            key={housingAssociation.id}
            onClick={() => {
              navigate(
                `/housing_associations/association?name=${housingAssociation.name}&id=${housingAssociation.id}`
              );
            }}
            state={housingAssociation}
            isOwner={isOwner}
          />
        );
      })}
    </div>
  );
}

export function MemberQueryList({ list }: Props) {
  
function checkIsOwner(housingAssociationId: string, memberId: string) {
    const isOwner = trpc.housingAssociation.checkIfOwner.useQuery({
      housingAssociationId,
      memberId,
    });

    return isOwner.data?.ok ?? false;
  }
  const navigate = useNavigate();
  const userId = getSubFromLocalStorage() ?? "";
  return (
    <div>
      {list.map((housingAssociation: listData) => {
        const isOwner = checkIsOwner(housingAssociation.id, housingAssociation.userId);
        return (
          <BoardCard
            key={housingAssociation.id}
            onClick={() => {
              navigate(
                `/housing_associations/association?name=${housingAssociation.name}&id=${housingAssociation.id}`
              );
            }}
            state={housingAssociation}
            isOwner={isOwner}
          />
        );
      })}
    </div>
  );
}

6 replies

TTCTheo's Typesafe Cult

•Created by Son on 1/31/2023 in #questions

I have an infinite loop within my hook but app works as expected, i'm confused...

when i console log inside this hook, it repeats non-stop every few seconds, but my app is working as expected there is no infinite loop per say. i'm really confused with this one.

import zustand from ...

export function useGetTickets(tenantId?: any) {
  const setTickets = useTicketStore((state) => state.setTickets);
  const isApiError = useTicketStore((state) => state.isApiError);
  const setIsApiError = useTicketStore((state) => state.setIsApiError);

  const { isLoading, isError, data } =
    trpc.getTicketsWithPhotos.getAll.useQuery(undefined, {
      onSuccess: (data) => {
        console.log("data", data);
        setIsApiError(false);
        setTickets(data.tickets);
      },
      onError: (e) => {
        showToastCustomError(
          "Sever Error",
          "We cannot connect to our servers, please try again later or contact support",
          8000
        );
        setIsApiError(true);
        return console.error(e.message);
      },
    });

  return { data, isLoading, isApiError };
}

import zustand from ...

export function useGetTickets(tenantId?: any) {
  const setTickets = useTicketStore((state) => state.setTickets);
  const isApiError = useTicketStore((state) => state.isApiError);
  const setIsApiError = useTicketStore((state) => state.setIsApiError);

  const { isLoading, isError, data } =
    trpc.getTicketsWithPhotos.getAll.useQuery(undefined, {
      onSuccess: (data) => {
        console.log("data", data);
        setIsApiError(false);
        setTickets(data.tickets);
      },
      onError: (e) => {
        showToastCustomError(
          "Sever Error",
          "We cannot connect to our servers, please try again later or contact support",
          8000
        );
        setIsApiError(true);
        return console.error(e.message);
      },
    });

  return { data, isLoading, isApiError };
}

3 replies

TtRPC

•Created by Son on 1/31/2023 in #❓-help

i have an infinite loop within my hook but apps works as expected.

when i console log inside this hook, it repeats non-stop every few seconds, but my app is working as expected there is no infinite loop per say. i'm really confused with this one.

import zustand from ...

export function useGetTickets(tenantId?: any) {
  const setTickets = useTicketStore((state) => state.setTickets);
  const isApiError = useTicketStore((state) => state.isApiError);
  const setIsApiError = useTicketStore((state) => state.setIsApiError);

  const { isLoading, isError, data } =
    trpc.getTicketsWithPhotos.getAll.useQuery(undefined, {
      onSuccess: (data) => {
        console.log("data", data);
        setIsApiError(false);
        setTickets(data.tickets);
      },
      onError: (e) => {
        showToastCustomError(
          "Sever Error",
          "We cannot connect to our servers, please try again later or contact support",
          8000
        );
        setIsApiError(true);
        return console.error(e.message);
      },
    });

  return { data, isLoading, isApiError };
}

import zustand from ...

export function useGetTickets(tenantId?: any) {
  const setTickets = useTicketStore((state) => state.setTickets);
  const isApiError = useTicketStore((state) => state.isApiError);
  const setIsApiError = useTicketStore((state) => state.setIsApiError);

  const { isLoading, isError, data } =
    trpc.getTicketsWithPhotos.getAll.useQuery(undefined, {
      onSuccess: (data) => {
        console.log("data", data);
        setIsApiError(false);
        setTickets(data.tickets);
      },
      onError: (e) => {
        showToastCustomError(
          "Sever Error",
          "We cannot connect to our servers, please try again later or contact support",
          8000
        );
        setIsApiError(true);
        return console.error(e.message);
      },
    });

  return { data, isLoading, isApiError };
}

6 replies

TTCTheo's Typesafe Cult

•Created by Son on 1/27/2023 in #questions

Expo-Camera Bug Affecting Android only

1 replies

TtRPC

•Created by Son on 12/11/2022 in #❓-help

trpc hook pattern. This works, but I’m not convinced…

I want to call my route when a button is clicked and have access to isLoading, onError etc… I have implemented a pattern using ‘’refetch()’’ but it doesn’t feel ‘correct’ is there a better way of doing this. I will also create a custom hook out of it. ‘’’js const { refetch } = trpc.authDomain.signIn.useQuery( { email: userEmail }, { enabled: false, onError: (e: any) => { console.log('there was an error with the endpoint'); }, } ); async function isEmailVerified() { const response = await refetch(); const verification = response.data; // i want to access isLoading directly without writing many lines of new code which i would have to with this current approach if (verification?.status === 'tryAgain') { console.log('email not verified'); setHasInitiatedSignIn(true); } if (verification?.status === 'ok') { console.log('user can now verify code sent to their email address'); setHasInitiatedSignIn(true); } } Return <button onClick={isEmailVerified}/> ‘’’

7 replies

TtRPC

•Created by Son on 12/7/2022 in #❓-help

correct way to call TRPC inside a function

13 replies

TtRPC

•Created by Son on 11/24/2022 in #❓-help

Delay IsLoading....

i'm trying to delay a loading spinner from appearing if the api takes less than 200ms to get the data. I've tried a number of implementations and failed, can anyone help?

  const { isLoading, isError, data } = trpc.ticketDomain.getByTicketId.useQuery(
    {
      ticketId: selectedTicket!.id,
    }
  );

  if (isLoading) {
    // details section should not render if isloading has been true for 200ms or                 less and if 'data' is not available

    // load data as soon as its available and render the details section

    // if fetching takes longer than 200ms, show loading spinner
    return (

        <LoadingSpinner />;
    
    );
  }

  const { isLoading, isError, data } = trpc.ticketDomain.getByTicketId.useQuery(
    {
      ticketId: selectedTicket!.id,
    }
  );

  if (isLoading) {
    // details section should not render if isloading has been true for 200ms or                 less and if 'data' is not available

    // load data as soon as its available and render the details section

    // if fetching takes longer than 200ms, show loading spinner
    return (

        <LoadingSpinner />;
    
    );
  }

6 replies

TTCTheo's Typesafe Cult

•Created by Son on 11/21/2022 in #questions

TRPC Testing Wrapper - Unit Testing components that contain a query (Not testing the query it self)

9 replies

TtRPC

•Created by Son on 11/21/2022 in #❓-help

TRPC Testing Wrapper - Unit Testing components that contain a query (Not testing the query it self)

14 replies

TTCTheo's Typesafe Cult

•Created by Son on 11/20/2022 in #questions

Next Auth Discord Callback error...

27 replies

TTCTheo's Typesafe Cult

•Created by Son on 11/19/2022 in #questions

T3 Docs - code explanation

import { DefaultSession } from "next-auth";

declare module "next-auth" {
  interface Session {
    user?: {
      id: string;
    } & DefaultSession["user"];
  }
}

import { DefaultSession } from "next-auth";

declare module "next-auth" {
  interface Session {
    user?: {
      id: string;
    } & DefaultSession["user"];
  }
}

can some one explain to me whst & DefaultSession["user"] is doing?

2 replies

TtRPC

•Created by Son on 11/18/2022 in #❓-help

testing a trpc hook

i'm brand new to testing and need some help with writing a test for a hook that is returning an object. im stuck with the error messages. i'm using trpc and react query

export function useGetTenantTickets() {
  const setTickets = useTenantStore((state) => state.setTickets);
  const { isLoading, isError } = trpc.ticketDomain.getByTenantId.useQuery(
    undefined,
    {
      onSuccess: (data) => {
        setTickets(data);
      },
    }
  );

  return { isLoading, isError };
}

export function useGetTenantTickets() {
  const setTickets = useTenantStore((state) => state.setTickets);
  const { isLoading, isError } = trpc.ticketDomain.getByTenantId.useQuery(
    undefined,
    {
      onSuccess: (data) => {
        setTickets(data);
      },
    }
  );

  return { isLoading, isError };
}

my test

 it('should return an object', async () => {
    const tickets = renderer.create(<TenantTicketsScreen />);
    const result = useGetTenantTickets();
    const expected = {
      isError: expect.any(Boolean),
      isLoading: expect.any(Boolean),
    };

    expect(result).toEqual(expected);
  });

 it('should return an object', async () => {
    const tickets = renderer.create(<TenantTicketsScreen />);
    const result = useGetTenantTickets();
    const expected = {
      isError: expect.any(Boolean),
      isLoading: expect.any(Boolean),
    };

    expect(result).toEqual(expected);
  });

4 replies

TTCTheo's Typesafe Cult

•Created by Son on 11/16/2022 in #questions

Noob Q - Prisma date property

7 replies

Gaming

Programming