moving to trpc

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