Revert-to-upstream (#3)

* Update Turbo (t3-oss#1172) * update-turbo * update-turbo * fmt --------- Co-authored-by: juliusmarminge <[email protected]> * fix: slice token bearer prefix in invalidate function (t3-oss#1168) * chore(deps): update dependency drizzle-kit to ^0.24.2 (t3-oss#1164) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * revert changes to upstream * revert expo router API routes * use fixed payload version * minor error fixes * add payload oauth collections * fix trpc type * use correct payload layout * Update route.ts * Update route.ts * Update route.ts * Update middleware.ts * Update Accounts.ts * Update Customers.ts * Update Sessions.ts * Update config.ts --------- Co-authored-by: Lacy Morrow <[email protected]> Co-authored-by: juliusmarminge <[email protected]> Co-authored-by: soulful-ramble <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
jancbeck · Sep 10, 2024 · 7e35b5b · 7e35b5b
1 parent 439667a
commit 7e35b5b
Show file tree

Hide file tree

Showing 64 changed files with 2,243 additions and 1,963 deletions.
diff --git a/.gitignore b/.gitignore
@@ -50,3 +50,5 @@ dist/
 
 # turbo
 .turbo
+
+supabase
diff --git a/apps/expo/api/index.ts b/apps/expo/api/index.ts
diff --git a/apps/expo/app.config.ts b/apps/expo/app.config.ts
@@ -29,10 +29,6 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       backgroundColor: "#1F104A",
     },
   },
-  web: {
-    bundler: "metro",
-    output: "server",
-  },
   // extra: {
   //   eas: {
   //     projectId: "your-eas-project-id",
@@ -42,14 +38,5 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     tsconfigPaths: true,
     typedRoutes: true,
   },
-  plugins: [
-    [
-      "expo-router",
-
-      {
-        origin: "https://evanbacon.dev/",
-      },
-    ],
-    "expo-secure-store",
-  ],
+  plugins: ["expo-router"],
 });
diff --git a/apps/expo/babel.config.js b/apps/expo/babel.config.js
@@ -7,17 +7,5 @@ module.exports = (api) => {
       "nativewind/babel",
     ],
     plugins: ["react-native-reanimated/plugin"],
-
-    // Necessary to use payload dependencies in API routes.
-    // Remove when Expo Router supports dynamic imports + ESM in API routes.
-    overrides: [
-      {
-        test: [/@payloadcms/, /payload/, /prettier/],
-        plugins: [
-          "babel-plugin-transform-import-meta",
-          "module:@reactioncommerce/babel-remove-es-create-require",
-        ],
-      },
-    ],
   };
 };
diff --git a/apps/expo/eslint.config.mjs b/apps/expo/eslint.config.mjs
@@ -4,7 +4,7 @@ import reactConfig from "@acme/eslint-config/react";
 /** @type {import('typescript-eslint').Config} */
 export default [
   {
-    ignores: [".expo/**", "expo-plugins/**", "api/**"],
+    ignores: [".expo/**", "expo-plugins/**"],
   },
   ...baseConfig,
   ...reactConfig,

diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -12,17 +12,18 @@
     "ios": "expo run:ios",
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "lint": "eslint",
-    "typecheck": "tsc --noEmit",
-    "postinstall": "npx tailwindcss -i ./src/styles.css -o ./node_modules/.cache/nativewind/styles.css.web.css"
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@acme/api": "workspace:*",
+    "@acme/auth": "workspace:*",
     "@acme/payload": "workspace:*",
     "@bacons/text-decoder": "^0.0.0",
     "@expo/metro-config": "^0.18.11",
-    "@expo/metro-runtime": "~3.2.3",
-    "@expo/server": "^0.4.4",
     "@t3-oss/env-core": "catalog:",
+    "@tanstack/react-query": "catalog:",
+    "@trpc/client": "catalog:",
+    "@trpc/react-query": "catalog:",
+    "@trpc/server": "catalog:",
     "expo": "~51.0.31",
     "expo-constants": "~16.0.2",
     "expo-dev-client": "~4.0.25",
@@ -41,22 +42,21 @@
     "react-native-reanimated": "~3.15.1",
     "react-native-safe-area-context": "~4.10.5",
     "react-native-screens": "~3.31.1",
-    "react-native-web": "~0.19.12",
+    "superjson": "2.2.1",
     "zod": "catalog:"
   },
   "devDependencies": {
+    "@acme/api": "workspace:*",
     "@acme/eslint-config": "workspace:*",
     "@acme/prettier-config": "workspace:*",
     "@acme/tailwind-config": "workspace:*",
     "@acme/tsconfig": "workspace:*",
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
-    "@reactioncommerce/babel-remove-es-create-require": "^1.0.0",
     "@types/babel__core": "^7.20.5",
     "@types/node": "catalog:",
     "@types/react": "catalog:react18",
-    "babel-plugin-transform-import-meta": "^2.2.1",
     "eslint": "catalog:",
     "jiti": "catalog:",
     "prettier": "catalog:",

diff --git a/apps/expo/src/app/_layout.tsx b/apps/expo/src/app/_layout.tsx
@@ -4,9 +4,7 @@ import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { useColorScheme } from "nativewind";
 
-import { TRPCReactProvider } from "@acme/api/provider";
-
-import { getToken } from "~/utils/token";
+import { TRPCProvider } from "~/utils/api";
 
 import "../styles.css";
 
@@ -15,7 +13,7 @@ import "../styles.css";
 export default function RootLayout() {
   const { colorScheme } = useColorScheme();
   return (
-    <TRPCReactProvider source="expo" token={getToken()}>
+    <TRPCProvider>
       {/*
           The Stack component displays the current page.
           It also allows you to configure your screens 
@@ -31,6 +29,6 @@ export default function RootLayout() {
         }}
       />
       <StatusBar />
-    </TRPCReactProvider>
+    </TRPCProvider>
   );
 }
diff --git a/apps/expo/src/app/api/trpc/[trpc]+api.ts → apps/expo/src/app/api/auth/[trpc]+api.ts b/apps/expo/src/app/api/trpc/[trpc]+api.ts → apps/expo/src/app/api/auth/[trpc]+api.ts
diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/index.tsx
@@ -8,13 +8,11 @@ import {
   View,
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { Link, Stack, useRouter } from "expo-router";
+import { Link, Stack } from "expo-router";
 
-import type { RouterOutputs } from "@acme/api";
-import { api } from "@acme/api/provider";
-
-import { useSignOut, useUser } from "~/utils/auth";
-import { setToken } from "~/utils/token";
+import type { RouterOutputs } from "~/utils/api";
+import { api } from "~/utils/api";
+import { useSignIn, useSignOut, useUser } from "~/utils/auth";
 
 function PostCard(props: {
   post: RouterOutputs["post"]["all"]["docs"][number];
@@ -103,83 +101,21 @@ function CreatePost() {
   );
 }
 
-function LoginForm() {
-  const utils = api.useUtils();
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-
-  const { mutate: signIn, error } = api.auth.signIn.useMutation({
-    async onSuccess({ token }) {
-      setToken(token);
-      setEmail("");
-      setPassword("");
-
-      await utils.invalidate();
-      router.replace("/");
-    },
-  });
-
-  return (
-    <View className="mt-4 flex gap-2">
-      <TextInput
-        className="items-center rounded-md border border-input bg-background px-3 text-lg leading-[1.25] text-foreground"
-        value={email}
-        onChangeText={setEmail}
-        placeholder="Email"
-      />
-      {error?.data?.zodError?.fieldErrors.email && (
-        <Text className="mb-2 text-destructive">
-          {error.data.zodError.fieldErrors.email}
-        </Text>
-      )}
-      <TextInput
-        className="items-center rounded-md border border-input bg-background px-3 text-lg leading-[1.25] text-foreground"
-        value={password}
-        onChangeText={setPassword}
-        placeholder="password"
-      />
-      {error?.data?.zodError?.fieldErrors.password && (
-        <Text className="mb-2 text-destructive">
-          {error.data.zodError.fieldErrors.password}
-        </Text>
-      )}
-      <Pressable
-        className="flex items-center rounded bg-primary p-2"
-        onPress={() => {
-          signIn({
-            email,
-            password,
-          });
-        }}
-      >
-        <Text className="text-foreground">Login</Text>
-      </Pressable>
-      {error?.data?.code === "UNAUTHORIZED" && (
-        <Text className="mt-2 text-destructive">
-          Incorrect login credentials
-        </Text>
-      )}
-    </View>
-  );
-}
-
-function AuthShowcase() {
+function MobileAuth() {
   const user = useUser();
+  const signIn = useSignIn();
   const signOut = useSignOut();
 
   return (
     <>
-      <Text className="pb-2 text-center text-2xl">
-        {user?.email ? "Logged in as " + user.email : "Not logged in"}
+      <Text className="pb-2 text-center text-xl font-semibold text-white">
+        {user?.name ?? "Not logged in"}
       </Text>
-      {!user?.id ? (
-        <LoginForm />
-      ) : (
-        <View>
-          <Button onPress={signOut} title="SignOut" color={"#5B65E9"} />
-        </View>
-      )}
+      <Button
+        onPress={() => (user ? signOut() : signIn())}
+        title={user ? "Sign Out" : "Sign In With Discord"}
+        color={"#5B65E9"}
+      />
     </>
   );
 }
@@ -188,7 +124,6 @@ export default function Index() {
   const utils = api.useUtils();
 
   const postQuery = api.post.all.useQuery();
-  const { data: permissions } = api.auth.getUserPermissions.useQuery();
 
   const deletePostMutation = api.post.delete.useMutation({
     onSettled: () => utils.post.all.invalidate(),
@@ -203,27 +138,27 @@ export default function Index() {
           Create <Text className="text-primary">T3</Text> Turbo
         </Text>
 
-        <AuthShowcase />
+        <MobileAuth />
 
-        {!!postQuery.data?.docs.length && (
-          <View className="py-2">
-            <Text className="mb-2 font-semibold italic text-primary">
-              Press on a post
-            </Text>
-            <FlatList
-              data={postQuery.data.docs}
-              ItemSeparatorComponent={() => <View className="h-2" />}
-              renderItem={({ item }) => (
-                <PostCard
-                  key={item.id}
-                  post={item}
-                  onDelete={() => deletePostMutation.mutate(item.id)}
-                />
-              )}
+        <View className="py-2">
+          <Text className="font-semibold italic text-primary">
+            Press on a post
+          </Text>
+        </View>
+
+        <FlatList
+          data={postQuery.data?.docs}
+          ItemSeparatorComponent={() => <View className="h-2" />}
+          renderItem={({ item }) => (
+            <PostCard
+              key={item.id}
+              post={item}
+              onDelete={() => deletePostMutation.mutate(item.id)}
             />
-          </View>
-        )}
-        {permissions?.collections.posts?.create.permission && <CreatePost />}
+          )}
+        />
+
+        <CreatePost />
       </View>
     </SafeAreaView>
   );

diff --git a/apps/expo/src/app/post/[id].tsx b/apps/expo/src/app/post/[id].tsx
@@ -1,12 +1,12 @@
 import { SafeAreaView, Text, View } from "react-native";
 import { Stack, useGlobalSearchParams } from "expo-router";
 
-import { api } from "@acme/api/provider";
+import { api } from "~/utils/api";
 
 export default function Post() {
   const { id } = useGlobalSearchParams();
   if (!id || typeof id !== "string") throw new Error("unreachable");
-  const { data } = api.post.byId.useQuery({ id: Number(id) });
+  const { data } = api.post.byId.useQuery({ id });
 
   if (!data) return null;
 

diff --git a/apps/expo/src/env.ts b/apps/expo/src/env.ts
@@ -16,7 +16,6 @@ export const env = createEnv({
    * This way you can ensure the app isn't built with invalid env vars.
    */
   server: {},
-
   /**
    * Specify your client-side environment variables schema here.
    * For them to be exposed to the client, prefix them with `NEXT_PUBLIC_`.

diff --git a/apps/expo/src/utils/api.tsx b/apps/expo/src/utils/api.tsx
@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchLink, loggerLink } from "@trpc/client";
+import { createTRPCReact } from "@trpc/react-query";
+import superjson from "superjson";
+
+import type { AppRouter } from "@acme/api";
+
+import { getBaseUrl } from "./base-url";
+import { getToken } from "./session-store";
+
+/**
+ * A set of typesafe hooks for consuming your API.
+ */
+export const api = createTRPCReact<AppRouter>();
+export { type RouterInputs, type RouterOutputs } from "@acme/api";
+
+/**
+ * A wrapper for your app that provides the TRPC context.
+ * Use only in _app.tsx
+ */
+export function TRPCProvider(props: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient());
+  const [trpcClient] = useState(() =>
+    api.createClient({
+      links: [
+        loggerLink({
+          enabled: (opts) =>
+            process.env.NODE_ENV === "development" ||
+            (opts.direction === "down" && opts.result instanceof Error),
+          colorMode: "ansi",
+        }),
+        httpBatchLink({
+          transformer: superjson,
+          url: `${getBaseUrl()}/api/trpc`,
+          headers() {
+            const headers = new Map<string, string>();
+            headers.set("x-trpc-source", "expo-react");
+
+            const token = getToken();
+            if (token) headers.set("Authorization", `Bearer ${token}`);
+
+            return Object.fromEntries(headers);
+          },
+        }),
+      ],
+    }),
+  );
+
+  return (
+    <api.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        {props.children}
+      </QueryClientProvider>
+    </api.Provider>
+  );
+}