new review model (#100)

frontend/components/CommentCard.vue

@@ -1,30 +1,25 @@
 <template>
-  <ComponentCard :badge="idx">
+  <ComponentCard :badge="comment.number">
     <template #title>
-      <code>{{ comment.path }}</code>
+      <code>{{ comment.title.text }}</code>
     </template>
     <template #body>
       <div class="flex flex-col md:flex-row max-h-[95vh] bg-gray-50">
         <div class="p-3 flex-none md:w-2/5 text-md markdown">
-          <MarkdownHTML>{{ commentBody }}</MarkdownHTML>
+          <MarkdownHTML>{{ comment.description }}</MarkdownHTML>
         </div>
         <div
           class="flex-grow overflow-scroll text-sm md:border-l border-t md:border-t-0"
         >
-          <DiffBlock :comment="comment" />
+          <DiffBlock :code="comment.code" />
         </div>
       </div>
     </template>
   </ComponentCard>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
+defineProps({
   comment: { type: Object, required: true },
-  idx: { type: Number, required: true },
-});
-
-const commentBody = computed(() => {
-  return props.comment.body.replace(/^\s*\d+\.\s*/, "");
 });
 </script>

frontend/components/DiffBlock.vue

@@ -1,7 +1,7 @@
 <template>
   <pre
     class="bg-gray-100"
-  ><code ref="code" :class="language">{{ comment.diff_hunk }}</code></pre>
+  ><code ref="block" :class="language">{{ code.content }}</code></pre>
 </template>
 
 <script setup lang="ts">
@@ -29,46 +29,24 @@ import "prismjs/components/prism-yaml";
 import "prismjs/plugins/diff-highlight/prism-diff-highlight";
 import "prismjs/plugins/diff-highlight/prism-diff-highlight.css";
 
-const code = ref("code");
+const block = ref("block");
 onMounted(() => {
-  Prism.highlightElement(code.value);
+  Prism.highlightElement(block.value);
 });
 
 const props = defineProps({
-  comment: {
+  code: {
     type: Object,
     required: true,
   },
 });
 
-// we grab the file extension and map it to the diff-language
-const languageMap = {
-  rs: "rust",
-  vue: "html",
-  Dockerfile: "docker",
-};
-
-const basename = (str, sep) => str.substr(str.lastIndexOf(sep) + 1);
-const detectedLanguage = (path) => {
-  // basename and split on extension...
-  const base = basename(path, "/");
-  const pieces = base.split(".");
-  const ext = pieces[pieces.length - 1];
-
-  // if there's an extension go the standard path
-  if (pieces.length > 1) {
-    return languageMap[ext] || ext;
-  }
-
-  if (base === "Dockerfile") {
-    return "docker";
+const language = computed(() => {
+  if (!props.code.diff) {
+    return `language-${props.code.lang}`;
   }
 
-  return "bash";
-};
-
-const language = computed(() => {
-  return `diff-highlight language-diff-${detectedLanguage(props.comment.path)}`;
+  return `diff-highlight language-diff-${props.code.lang}`;
 });
 </script>
 

frontend/components/Review/MetadataList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      v-for="m in metadata"
+      v-for="m in model.links"
       :key="m.heading"
       class="grid grid-cols-2 gap-4 text-xs font-mono"
     >
@@ -11,36 +11,14 @@
         </NuxtLink>
       </div>
       <div class="p-1">
-        <strong>{{ m.heading }}</strong>
+        <strong>{{ m.label }}</strong>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
+defineProps({
   model: { type: Object, required: true },
 });
-
-const metadata = computed(() => {
-  const { model } = props;
-  const { pr, review, params } = model;
-  return [
-    {
-      heading: "Author",
-      text: pr.user.login,
-      href: pr.user.html_url,
-    },
-    {
-      heading: "Pull Request",
-      text: `${params.owner}/${params.repo}/pull/${params.number}`,
-      href: pr.html_url,
-    },
-    {
-      heading: "Review",
-      text: `#review-${review.id}`,
-      href: review.html_url,
-    },
-  ];
-});
 </script>

frontend/components/Review/PageChrome.vue

@@ -6,8 +6,8 @@
         v-if="data"
         class="inline-block bg-slate-50 shadow-inner text-black px-2 py-1 rounded-sm text-xs"
       >
-        <ReviewLink :params="data.params" to="cards" :current="name" /> |
-        <ReviewLink :params="data.params" to="slides" :current="name" />
+        <ReviewLink :params="data.meta.params" to="cards" :current="name" /> |
+        <ReviewLink :params="data.meta.params" to="slides" :current="name" />
       </div>
       <template v-if="name == 'slides'" #right>
         <button
@@ -40,7 +40,7 @@
 <script setup lang="ts">
 defineProps({
   height: { type: String, default: "" },
-  name: { type: String },
+  name: { type: String, required: true },
 });
 
 const route = useRoute();
@@ -49,7 +49,6 @@ const { pending, data, error } = await useFetch("/api/review", {
   params: route.params,
   server: false,
   initialCache: false,
-  transform: (v) => JSON.parse(v),
 });
 
 const content = ref("content");

frontend/components/Review/PageContent.vue

@@ -1,26 +1,28 @@
 <template>
   <div class="gap-3">
     <div class="pt-4">
-      <Review-MetadataList :model="model" />
+      <ReviewMetadataList :model="model" />
     </div>
     <ComponentCard>
       <template #title>
         <div class="text-xl font-extrabold">
-          <span>(#{{ model.pr.number }})</span>&nbsp;
-          <GradientText>{{ model.pr.title }}</GradientText>
+          <GradientText>{{ model.title.text }}</GradientText>
         </div>
       </template>
       <template #body>
         <div class="px-4 py-4">
-          <BodyMarkdown :model="model" />
+          <div v-if="model.body.length" class="markdown">
+            <MarkdownHTML>
+              {{ model.body }}
+            </MarkdownHTML>
+          </div>
         </div>
       </template>
     </ComponentCard>
     <CommentCard
       v-for="(comment, idx) in model.comments"
       :key="idx"
       :comment="comment"
-      :idx="idx + 1"
     />
   </div>
 </template>

frontend/components/ReviewLink.vue

@@ -13,7 +13,7 @@ const props = defineProps({
 
 const href = computed(() => {
   const { params, to } = props;
-  const permalink = `/${params.owner}/${params.repo}/pull/${params.number}/review-${params.review}`;
+  const permalink = `/${params.owner}/${params.repo}/pull/${params.pull}/review-${params.review}`;
   return to === 'cards' ? permalink : `${permalink}/slides`;
 });
 

frontend/components/SlideCard.vue

@@ -1,28 +1,23 @@
 <template>
   <div>
-    <ComponentCard :badge="idx" title-class="">
+    <ComponentCard :badge="comment.number" title-class="">
       <template #title>
-        <code>{{ comment.path }}</code>
+        <code>{{ comment.title.text }}</code>
       </template>
       <template #body>
         <div class="overflow-scroll text-lg max-h-[70vh]">
-          <DiffBlock :comment="comment" />
+          <DiffBlock :code="comment.code" />
         </div>
       </template>
     </ComponentCard>
     <div class="max-w-[80%] mx-auto markdown">
-      <MarkdownHTML>{{ commentBody }}</MarkdownHTML>
+      <MarkdownHTML>{{ comment.description }}</MarkdownHTML>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
+defineProps({
   comment: { type: Object, required: true },
-  idx: { type: Number, required: true },
-});
-
-const commentBody = computed(() => {
-  return props.comment.body.replace(/^\s*\d+\.\s*/, "");
 });
 </script>

frontend/components/SlideShow.vue

@@ -4,8 +4,7 @@
     <div class="flex-0 max-w-[2200px] mx-auto">
       <div v-if="current == 0">
         <div class="text-6xl font-extrabold text-center">
-          <span>(#{{ model.pr.number }})</span>&nbsp;
-          <GradientText>{{ model.pr.title }}</GradientText>
+          <GradientText>{{ model.title.text }}</GradientText>
         </div>
         <div class="mx-auto mt-8">
           <ReviewMetadataList :model="model" />
@@ -16,13 +15,16 @@
         <ComponentCard>
           <template #title>
             <div class="text-xl font-extrabold">
-              <span>(#{{ model.pr.number }})</span>&nbsp;
-              <GradientText>{{ model.pr.title }}</GradientText>
+              <GradientText>{{ model.title.text }}</GradientText>
             </div>
           </template>
           <template #body>
             <div class="px-4 py-4">
-              <BodyMarkdown :model="model" />
+              <div v-if="model.body.length" class="markdown">
+                <MarkdownHTML>
+                  {{ model.body }}
+                </MarkdownHTML>
+              </div>
             </div>
           </template>
         </ComponentCard>

frontend/pages/index.vue

@@ -71,15 +71,14 @@ const search = () => {
       params: { search: query.value },
       server: false,
       initialCache: false,
-      transform: (v) => JSON.parse(v),
     });
 
     if (error.value) {
       searchError(JSON.parse(error.value.data).msg);
     } else {
       const params = data.value;
       await navigateTo(
-        `${params.owner}/${params.repo}/pull/${params.number}/review-${params.review}`,
+        `${params.owner}/${params.repo}/pull/${params.pull}/review-${params.review}`,
       );
     }
   }, 1000);

server/cmd/server/api.go

@@ -11,12 +11,12 @@ var apiRoutes = http.Routes(
 
 	// GET /version returns the embeded version of the server/client
 	http.GET("/version", func(_ *http.Request) (*http.JSONResponse, error) {
-		return http.OKResponse(map[string]any{"version": version}), nil
+		return http.OKResponse(map[string]string{"version": version}), nil
 	}),
 
 	// GET /ping is just for basic API functionality.
 	http.GET("/ping", func(_ *http.Request) (*http.JSONResponse, error) {
-		return http.OKResponse(map[string]any{"ping": "pong"}), nil
+		return http.OKResponse(map[string]string{"ping": "pong"}), nil
 	}),
 
 	// GET /search finds a review based on input.
@@ -45,33 +45,17 @@ var apiRoutes = http.Routes(
 		return http.OKResponse(params), nil
 	}),
 
-	// GET /review hydrates the the full review.
+	// GET /review hydrates the the full review from github.
 	http.GET("/review", func(r *http.Request) (*http.JSONResponse, error) {
-		var (
-			ctx    = r.Context()
-			values = r.URL.Query()
-		)
-
-		gh, ok := github.Ctx(ctx)
-		if !ok || gh == nil {
-			return nil, errors.New("missing github context")
-		}
-
-		params, err := github.ReviewParamsFromMap(github.ReviewParamsMap{
-			Owner:  values.Get("org"),
-			Repo:   values.Get("repo"),
-			Number: values.Get("pull"),
-			Review: values.Get("review"),
-		})
-		if err != nil {
-			return nil, errors.Wrap(err, "invalid params")
+		source := github.ReviewAPISource{
+			ReviewParamsMap: github.NewReviewParamsMap(r.URL.Query()),
 		}
 
-		model, err := params.Model(ctx, gh)
+		review, err := source.GetReview(r.Context())
 		if err != nil {
-			return nil, errors.Wrap(err, "error fetching model")
+			return nil, errors.Wrap(err, "error fetching review")
 		}
 
-		return http.OKResponse(model), nil
+		return http.OKResponse(review), nil
 	}),
 )

server/cmd/server/main.go

@@ -16,7 +16,7 @@ import (
 )
 
 var (
-	version = "development"
+	version = "development" // dynamically linked
 )
 
 func main() {