Merge pull request #136 from OxfordRSE/urls-for-multi-repo

Url fixes for multi repo switch

components/EventCommentThreads.tsx

@@ -1,23 +1,8 @@
-import React, { useEffect } from "react"
-import { HiArrowNarrowRight } from "react-icons/hi"
-import { Course, Material, Section, Theme, eventItemSplit, sectionSplit } from "lib/material"
-import { EventFull, Event, Problem } from "lib/types"
-import useSWR, { Fetcher } from "swr"
-import Title from "components/ui/Title"
-import { Avatar, Button, Card, Table, Timeline, Tooltip } from "flowbite-react"
-import { ListGroup } from "flowbite-react"
-import { basePath } from "lib/basePath"
-import { MdClose } from "react-icons/md"
+import React from "react"
+import { Material, sectionSplit } from "lib/material"
+import { EventFull } from "lib/types"
 import Link from "next/link"
-import EventItemView from "./EventItemView"
-import { useFieldArray, useForm } from "react-hook-form"
-import SelectField from "./forms/SelectField"
-import { EventItem } from "@prisma/client"
-import useUsers from "lib/hooks/useUsers"
-import { useProblems } from "lib/hooks/useProblems"
-import useUsersOnEvent from "lib/hooks/useUsersOnEvent"
 import useCommentThreads from "lib/hooks/useCommentThreads"
-import SubTitle from "./ui/SubTitle"
 
 type Props = {
   event: EventFull
@@ -30,7 +15,6 @@ const EventCommentThreads: React.FC<Props> = ({ material, event }) => {
   if (!commentThreads) return <div>failed to load</div>
 
   const unresolvedThreads = commentThreads.filter((thread) => !thread.resolved)
-
   return (
     <div>
       <ul className="list-disc text-gray-800 dark:text-gray-300">

components/Layout.tsx

@@ -6,14 +6,7 @@ import { useState } from "react"
 import React, { ReactNode } from "react"
 import Footer from "./Footer"
 import Header from "./Header"
-import { Dropdown } from "flowbite-react"
-import { EventFull, Event } from "lib/types"
-import { AiOutlineUser } from "react-icons/ai"
-import { FaUser } from "react-icons/fa"
-import { Avatar } from "flowbite-react"
-import { basePath } from "lib/basePath"
 import { Material } from "lib/material"
-import EventView from "./EventView"
 import Overlay from "./Overlay"
 import Navbar from "./Navbar"
 import { useSidebarOpen } from "lib/hooks/useSidebarOpen"
@@ -28,9 +21,10 @@ type Props = {
   section?: Section
   children: ReactNode
   pageInfo?: PageTemplate
+  repoUrl?: string
 }
 
-const Layout: React.FC<Props> = ({ material, theme, course, section, children, pageInfo }) => {
+const Layout: React.FC<Props> = ({ material, theme, course, section, children, pageInfo, repoUrl }) => {
   const [activeEvent, setActiveEvent] = useActiveEvent()
   const router = useRouter()
   const { data: session } = useSession()
@@ -81,6 +75,7 @@ const Layout: React.FC<Props> = ({ material, theme, course, section, children, p
             setSidebarOpen={setSidebarOpen}
             showAttribution={showAttribution}
             setShowAttribution={setShowAttribution}
+            repoUrl={repoUrl}
           />
           <Overlay
             material={material}

components/Navbar.tsx

@@ -6,7 +6,6 @@ import Link from "next/link"
 import React from "react"
 import { RxGithubLogo } from "react-icons/rx"
 import { HiAtSymbol, HiCalendar, HiSearchCircle } from "react-icons/hi"
-import { baseMaterialUrl } from "lib/baseMaterialUrl"
 import { searchQueryState } from "components/SearchDialog"
 import { useRecoilState } from "recoil"
 import { enableSearch } from "lib/search/enableSearch"
@@ -21,6 +20,7 @@ interface Props {
   setSidebarOpen: (open: boolean) => void
   sidebarOpen: boolean
   showAttribution: boolean
+  repoUrl?: string
 }
 
 const Navbar: React.FC<Props> = ({
@@ -33,6 +33,7 @@ const Navbar: React.FC<Props> = ({
   setSidebarOpen,
   sidebarOpen,
   showAttribution,
+  repoUrl,
 }) => {
   const [showSearch, setShowSearch] = useRecoilState(searchQueryState)
   const { data: session } = useSession()
@@ -122,15 +123,15 @@ const Navbar: React.FC<Props> = ({
                 ></path>
               </svg>
               <Link
-                href={`/material/${theme.id}`}
+                href={`/material/${theme.repo}/${theme.id}`}
                 className="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white"
               >
                 {theme.name}
               </Link>
             </div>
           </li>
         )}{" "}
-        {course && (
+        {theme && course && (
           <li aria-current="page">
             <div className="flex items-center">
               <svg
@@ -146,7 +147,7 @@ const Navbar: React.FC<Props> = ({
                 ></path>
               </svg>
               <Link
-                href={`/material/${theme?.id}/${course.id}`}
+                href={`/material/${theme.repo}/${theme.id}/${course.id}`}
                 className="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white"
               >
                 {course.name}
@@ -178,7 +179,7 @@ const Navbar: React.FC<Props> = ({
         {theme && course && section && (
           <Link
             passHref={true}
-            href={`${baseMaterialUrl}/edit/main/${theme.id}/${course.id}/${section.id}.md`}
+            href={`${repoUrl}/edit/main/${theme.id}/${course.id}/${section.id}.md`}
             className="inline-flex text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
           >
             <Tooltip content="Edit Source">

components/content/Content.tsx

@@ -128,7 +128,9 @@ type Props = {
 }
 
 const Content: React.FC<Props> = ({ markdown, theme, course, section }) => {
-  const sectionStr = `${theme ? theme.id + "." : ""}${course ? course.id + "." : ""}${section ? section.id : ""}`
+  const sectionStr = `${theme ? theme.repo + "." : ""}${theme ? theme.id + "." : ""}${course ? course.id + "." : ""}${
+    section ? section.id : ""
+  }`
   return (
     <div className="mx-auto prose prose-base max-w-2xl prose-slate dark:prose-invert prose-pre:bg-[#263E52] prose-pre:p-0">
       <ReactMarkdown

lib/material.ts

@@ -149,6 +149,13 @@ export function getExcludes(repo: string): Excludes {
   return { sections: excludeSections, themes: excludeThemes, courses: excludeCourses }
 }
 
+export function getRepoUrl(repo: string): string {
+  const repos = getrepos()
+  const key = Object.keys(repos).find((key) => repos[key].path === repo)
+  const repoConfig = repos[key]
+  return repoConfig.url
+}
+
 export async function getMaterial(no_markdown = false): Promise<Material> {
   const repos = getrepos()
   let allThemes: Theme[] = []

pages/material/[repoId]/[themeId]/[courseId]/[sectionId].tsx

@@ -1,6 +1,6 @@
 import type { NextPage, GetStaticProps, GetStaticPaths } from "next"
 import prisma from "lib/prisma"
-import { getMaterial, Course, Theme, Material, Section, remove_markdown } from "lib/material"
+import { getMaterial, Course, Theme, Material, Section, remove_markdown, getRepoUrl } from "lib/material"
 import Layout from "components/Layout"
 import { makeSerializable } from "lib/utils"
 import Content from "components/content/Content"
@@ -15,6 +15,7 @@ type SectionComponentProps = {
   material: Material
   events: Event[]
   pageInfo?: PageTemplate
+  repoUrl?: string
 }
 
 const SectionComponent: NextPage<SectionComponentProps> = ({
@@ -24,9 +25,10 @@ const SectionComponent: NextPage<SectionComponentProps> = ({
   events,
   material,
   pageInfo,
+  repoUrl,
 }: SectionComponentProps) => {
   return (
-    <Layout theme={theme} course={course} section={section} material={material} pageInfo={pageInfo}>
+    <Layout theme={theme} course={course} section={section} material={material} pageInfo={pageInfo} repoUrl={repoUrl}>
       <Title text={section.name} />
       <Content markdown={section.markdown} theme={theme} course={course} section={section} />
     </Layout>
@@ -58,6 +60,8 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 export const getStaticProps: GetStaticProps = async (context) => {
   const pageInfo = pageTemplate
+  const repoId = context?.params?.repoId
+  const repoUrl = getRepoUrl(repoId as string)
   const events = await prisma.event
     .findMany({
       where: { hidden: false },
@@ -91,7 +95,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
     return { notFound: true }
   }
   remove_markdown(material, section)
-  return { props: makeSerializable({ theme, course, section, events, material, pageInfo }) }
+  return { props: makeSerializable({ theme, course, section, events, material, pageInfo, repoUrl }) }
 }
 
 export default SectionComponent