moving to trpc

nextjs/README.md

@@ -1,36 +1,5 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-## Getting Started
 
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- [ ] check out trpc
+   - <https://brockherion.dev/blog/posts/how-to-use-trpc-with-nextjs-app-router/>
+   - <https://trpc.io/docs/client/react/server-components>

nextjs/docker-compose.yml

@@ -19,23 +19,23 @@ services:
 
   # https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/
   # https://github.com/jonas-merkle/container-cloudflare-tunnel
-  # cloudflare-tunnel:
-  #   image: cloudflare/cloudflared
-  #   container_name: cloudflare-tunnel
-  #   restart: unless-stopped
-  #   env_file:
-  #     - .env
-  #   command: tunnel run
-  #   volumes:
-  #     - /etc/localtime:/etc/localtime:ro
-  #   environment:
-  #     - "TUNNEL_TOKEN=${CLOUDFLARE_TUNNEL_TOKEN}"
-  #   healthcheck:
-  #     test: ["CMD", "cloudflared", "--version"]
-  #     interval: 30s
-  #     timeout: 10s
-  #     retries: 3
-  #     start_period: 10s
+  cloudflare-tunnel:
+    image: cloudflare/cloudflared
+    container_name: cloudflare-tunnel
+    restart: unless-stopped
+    env_file:
+      - .env
+    command: tunnel run
+    volumes:
+      - /etc/localtime:/etc/localtime:ro
+    environment:
+      - TUNNEL_TOKEN=${CLOUDFLARE_TUNNEL_TOKEN}
+    healthcheck:
+      test: ["CMD", "cloudflared", "--version"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
 
 
   # https://ngrok.com/docs/using-ngrok-with/docker/

nextjs/package.json

@@ -10,15 +10,21 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@next/env": "^15.0.3",
+    "@tanstack/react-query": "^5.59.20",
+    "@trpc/client": "11.0.0-rc.608",
+    "@trpc/react-query": "11.0.0-rc.608",
+    "@trpc/server": "11.0.0-rc.608",
     "jsdom": "^25.0.0",
     "next": "^14.2.7",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "superjson": "^2.2.1",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@monaco-editor/loader": "^1.4.0",
     "@monaco-editor/react": "^4.6.0",
-    "@tanstack/react-query": "^5.54.1",
-    "@tanstack/react-query-devtools": "^5.54.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
     "@types/node": "^22",
@@ -29,6 +35,7 @@
     "eslint-config-next": "^14.2.7",
     "isomorphic-dompurify": "^2.15.0",
     "marked": "^14.1.2",
+    "monaco-editor": "^0.52.0",
     "postcss": "^8",
     "react-error-boundary": "^4.0.13",
     "react-hot-toast": "^2.4.1",

nextjs/src/app/CourseList.tsx

@@ -1,10 +1,16 @@
 "use client";
 import { useLocalCoursesSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { trpc } from "@/services/trpc/utils";
 import { getCourseUrl } from "@/services/urlUtils";
 import Link from "next/link";
+import { useEffect } from "react";
 
 export default function CourseList() {
   const { data: allSettings } = useLocalCoursesSettingsQuery();
+
+  const {data} = trpc.sayHello.useQuery()
+
+console.log(data);
   return (
     <div>
       {allSettings.map((settings) => (

nextjs/src/app/api/trpc/[trpc]/route.ts

@@ -0,0 +1,14 @@
+import { createContext } from "@/services/trpc/context";
+import { appRouter } from "@/services/trpc/router/app";
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+
+const handler = (request: Request) => {
+  return fetchRequestHandler({
+    endpoint: "/api/trpc",
+    req: request,
+    router: appRouter,
+    createContext: createContext,
+  });
+};
+
+export { handler as GET, handler as POST };

nextjs/src/app/providers.tsx

@@ -1,9 +1,9 @@
 "use client";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactNode } from "react";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { getQueryClient } from "./providersQueryClientUtils";
 import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
+import TrpcProvider from "@/services/trpc/TrpcProvider";
 
 export default function Providers({ children }: { children: ReactNode }) {
   // NOTE: Avoid useState when initializing the query client if you don't
@@ -15,10 +15,12 @@ export default function Providers({ children }: { children: ReactNode }) {
 
   return (
     <SuspenseAndErrorHandling>
-      <QueryClientProvider client={queryClient}>
-        {/* <ReactQueryDevtools initialIsOpen={false} /> */}
-        {children}
-      </QueryClientProvider>
+      <TrpcProvider>
+        <QueryClientProvider client={queryClient}>
+          {/* <ReactQueryDevtools initialIsOpen={false} /> */}
+          {children}
+        </QueryClientProvider>
+      </TrpcProvider>
     </SuspenseAndErrorHandling>
   );
 }

nextjs/src/components/editor/InnerMonacoEditor.tsx

@@ -2,33 +2,7 @@
 import React, { useRef, useEffect } from "react";
 import loader from "@monaco-editor/loader";
 import { editor } from "monaco-editor/esm/vs/editor/editor.api";
-// import * as monaco from "monaco-editor";
 
-// import * as editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-// import * as jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-// import * as cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-// import * as htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-// import * as tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-
-// self.MonacoEnvironment = {
-//   getWorker(_, label) {
-//     if (label === 'json') {
-//       return new jsonWorker();
-//     }
-//     if (label === 'css' || label === 'scss' || label === 'less') {
-//       return new cssWorker();
-//     }
-//     if (label === 'html' || label === 'handlebars' || label === 'razor') {
-//       return new htmlWorker();
-//     }
-//     if (label === 'typescript' || label === 'javascript') {
-//       return new tsWorker();
-//     }
-//     return new editorWorker();
-//   },
-// };
-
-// loader.config({ monaco });
 
 export default function InnerMonacoEditor({
   value,

nextjs/src/models/local/assignment/utils/markdownUtils.ts

@@ -2,7 +2,7 @@ export const extractLabelValue = (input: string, label: string) => {
   const pattern = new RegExp(`${label}: (.*?)\n`);
   const match = pattern.exec(input);
 
-  if (match && match[1]) {
+  if (match && match.length > 1 && match[1]) {
     return match[1].trim();
   }
 

nextjs/src/services/trpc/TrpcProvider.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { useState } from "react";
+import superjson from "superjson";
+import { httpBatchLink, httpLink } from "@trpc/client";
+import { trpc } from "./utils";
+import { getQueryClient } from "@/app/providersQueryClientUtils";
+
+export default function TrpcProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // NOTE: Your production URL environment variable may be different
+  const url = "/api/trpc";
+  // process.env.NEXT_PUBLIC_APP_DOMAIN &&
+  // !process.env.NEXT_PUBLIC_APP_DOMAIN.includes("localhost")
+  //   ? `https://www.${process.env.NEXT_PUBLIC_APP_DOMAIN}/api/trpc/`
+  //   : "http://localhost:3000/api/trpc/";
+
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        httpLink({
+          url,
+          transformer: superjson,
+        }),
+      ],
+    })
+  );
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={getQueryClient()}>
+      {children}
+    </trpc.Provider>
+  );
+}

nextjs/src/services/trpc/context.ts

@@ -0,0 +1,9 @@
+import type { CreateNextContextOptions } from '@trpc/server/adapters/next';
+ 
+export const createContext = async () => {
+ 
+  return {
+  };
+};
+ 
+export type Context = typeof createContext;

nextjs/src/services/trpc/procedures/public.ts

@@ -0,0 +1,5 @@
+import { procedure } from "../trpc";
+
+const publicProcedure = procedure;
+
+export default publicProcedure;

nextjs/src/services/trpc/router/app.ts

@@ -0,0 +1,23 @@
+import { createContext } from "../context";
+import publicProcedure from "../procedures/public";
+import { createCallerFactory, mergeRouters, router } from "../trpc";
+
+export const helloRouter = router({
+  sayHello: publicProcedure.query(() => {
+    // runs on the server I think
+    console.log("hello world router on the server?");
+    return { greeting: `Hello World!` };
+  }),
+});
+
+
+export const appRouter = mergeRouters(helloRouter);
+
+export const createCaller = createCallerFactory(appRouter);
+
+export const createAsyncCaller = async () => {
+  const context = await createContext();
+  return createCaller(context);
+};
+
+export type AppRouter = typeof appRouter;

nextjs/src/services/trpc/router/courseItemRouter.ts

@@ -0,0 +1,35 @@
+import publicProcedure from "../procedures/public";
+import { z } from "zod";
+import { router } from "../trpc";
+import { fileStorageService } from "@/services/fileStorage/fileStorageService";
+
+export const courseItemRouter = router({
+  getAssignment: publicProcedure
+    .input(
+      z.object({
+        courseName: z.string(),
+        moduleName: z.string(),
+        assignmentName: z.string(),
+      })
+    )
+    .query(async ({ input: { courseName, moduleName, assignmentName } }) => {
+      return await fileStorageService.assignments.getAssignment(
+        courseName,
+        moduleName,
+        assignmentName
+      );
+    }),
+  getAllAssignments: publicProcedure
+    .input(
+      z.object({
+        courseName: z.string(),
+        moduleName: z.string(),
+      })
+    )
+    .query(async ({ input: { courseName, moduleName } }) => {
+      return await fileStorageService.assignments.getAssignments(
+        courseName,
+        moduleName
+      );
+    }),
+});

nextjs/src/services/trpc/trpc.ts

@@ -0,0 +1,13 @@
+import { initTRPC } from "@trpc/server";
+import superjson from 'superjson';
+
+const t = initTRPC.create({
+  transformer: superjson,
+});
+
+export const middleware = t.middleware;
+export const createCallerFactory = t.createCallerFactory;
+export const mergeRouters = t.mergeRouters;
+
+export const router = t.router;
+export const procedure = t.procedure;

nextjs/src/services/trpc/utils.ts

@@ -0,0 +1,4 @@
+import { createTRPCReact } from "@trpc/react-query";
+import { AppRouter } from "./router/app";
+
+export const trpc = createTRPCReact<AppRouter>();