Merge branch 'main' of https://github.com/Teamable-Analytics/teamable…

…-frontend into homepage

src/app/(app)/course/[courseId]/setup/(hooks)/useSetupSteps.tsx

@@ -1,13 +1,13 @@
-import React, { ReactNode, useState } from "react"
 import { OnboardingProgress } from "@/_temp_types/onboarding"
-import { Action, NonEmptyArray } from "@/types"
+import { GenerateTeamsAttributeSelector } from "@/app/(app)/course/[courseId]/components/GenerateTeamsAttributeSelector"
+import { GenerateOptInQuiz } from "@/app/(app)/course/[courseId]/setup/(components)/GenerateOptInQuiz"
 import { StepDefinition } from "@/app/(app)/course/[courseId]/setup/(components)/SetupStepDetailCard"
-import { useImportStudentsFromLms } from "@/hooks/use-import-students-from-lms"
+import { useGenerateTeams } from "@/hooks/use-generate-teams"
 import { useImportStudentGradebookData } from "@/hooks/use-import-student-gradebook-data"
-import { GenerateOptInQuiz } from "@/app/(app)/course/[courseId]/setup/(components)/GenerateOptInQuiz"
+import { useImportStudentsFromLms } from "@/hooks/use-import-students-from-lms"
 import { useOnboardingProgress } from "@/hooks/use-onboarding-progress"
-import { useGenerateTeams } from "@/hooks/use-generate-teams"
-import { GenerateTeamsAttributeSelector } from "@/app/(app)/course/[courseId]/components/GenerateTeamsAttributeSelector"
+import { Action, NonEmptyArray } from "@/types"
+import { ReactNode, useState } from "react"
 
 interface UseSetupStepsReturnType {
   steps: NonEmptyArray<StepDefinition>;
@@ -20,11 +20,11 @@ export const useSetupSteps = (): UseSetupStepsReturnType => {
   const { data, isLoading, refetch } = useOnboardingProgress()
 
   const {
-    importStudentsFromLmsAsync,
+    importStudentsAsync,
     isPending: importStudentsFromLmsPending,
   } = useImportStudentsFromLms()
   const {
-    importStudentGradebookDataAsync,
+    importGradebookDataAsync,
     isPending: importStudentGradebookDataPending,
   } = useImportStudentGradebookData()
   const { generateTeamsAsync, isPending: generateTeamsPending } =
@@ -48,15 +48,15 @@ export const useSetupSteps = (): UseSetupStepsReturnType => {
     IMPORT_STUDENTS: {
       content: "Import students",
       onClick: async () => {
-        await importStudentsFromLmsAsync(undefined)
+        await importStudentsAsync()
         await refetch()
       },
       loading: importStudentsFromLmsPending,
     },
     STUDENT_DATA: {
       content: "Import gradebook data",
       onClick: async () => {
-        await importStudentGradebookDataAsync(undefined)
+        await importGradebookDataAsync()
         await refetch()
       },
       loading: importStudentGradebookDataPending,

src/app/(app)/course/[courseId]/students/page.tsx

@@ -18,16 +18,18 @@ export default function StudentsPage() {
 const StudentsPageView = () => {
   const { courseId } = useCourse()
   const { refetch } = useStudents()
+
   const {
-    importStudentsFromLmsAsync,
+    importStudentsAsync,
     isPending: importStudentsFromLmsPending,
   } = useImportStudentsFromLms()
 
   const {
-    importStudentGradebookDataAsync,
+    importGradebookDataAsync,
     isPending: importStudentGradebookDataPending,
   } = useImportStudentGradebookData()
 
+
   return (
     <PageView
       title="Students"
@@ -39,15 +41,15 @@ const StudentsPageView = () => {
         {
           content: "Import students",
           onClick: async () => {
-            await importStudentsFromLmsAsync(undefined)
+            await importStudentsAsync()
             await refetch()
           },
           loading: importStudentsFromLmsPending,
         },
         {
           content: "Import gradebook data",
           onClick: async () => {
-            await importStudentGradebookDataAsync(undefined)
+            await importGradebookDataAsync()
             await refetch()
           },
           loading: importStudentGradebookDataPending,

src/components/Navbar.tsx

@@ -1,5 +1,17 @@
 "use client"
 
+import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
+import { useAuthUser } from "@/app/(providers)/auth-user-provider"
+import Logo from "@/components/Logo"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import {
   NavigationMenu,
   NavigationMenuItem,
@@ -8,20 +20,9 @@ import {
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu"
 import { Text } from "@/components/ui/text"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
-import { useAuthUser } from "@/app/(providers)/auth-user-provider"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
 import { useLogout } from "@/hooks/use-logout"
-import { useParams } from "next/navigation"
-import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
-import Logo from "@/components/Logo"
+import { HamburgerMenuIcon } from "@radix-ui/react-icons"
 import Link from "next/link"
-import { Badge } from "@/components/ui/badge"
 
 const Navbar = () => {
   const { authUser } = useAuthUser()
@@ -37,7 +38,43 @@ const Navbar = () => {
         <Text element="p">|</Text>
         <Badge variant="outline">{courseName}</Badge>
       </div>
-      <div className="flex gap-2">
+
+      <div className="flex md:hidden">
+        <DropdownMenu>
+          <DropdownMenuTrigger>
+            <HamburgerMenuIcon className="w-6 h-6"/>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="flex flex-col">
+            <NavigationMenuLink
+              href={`/course/${courseId}/setup`}
+              className={navigationMenuTriggerStyle()}
+            >
+                  Onboarding
+            </NavigationMenuLink>
+            <NavigationMenuLink
+              href={`/course/${courseId}/students`}
+              className={navigationMenuTriggerStyle()}
+            >
+                  Students
+            </NavigationMenuLink>
+            <NavigationMenuLink
+              href={`/course/${courseId}/team-sets`}
+              className={navigationMenuTriggerStyle()}
+            >
+                  Manage Teams
+            </NavigationMenuLink>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={logoutSync}
+              className={navigationMenuTriggerStyle()}
+            >
+              Logout
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="flex gap-2 hidden md:flex">
         <NavigationMenuList className="flex justify-between">
           <NavigationMenuItem>
             <NavigationMenuLink

src/components/views/Page.tsx

@@ -1,9 +1,18 @@
 import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import { Text } from "@/components/ui/text"
 import { Action } from "@/types"
+import { DotsVerticalIcon } from "@radix-ui/react-icons"
 import Link from "next/link"
 import React from "react"
 
+
+
 type PageViewProps = {
   children: React.ReactNode;
   title: string;
@@ -14,6 +23,8 @@ type PageViewProps = {
   actions?: Array<Action>;
 };
 
+
+
 const PageView = ({ children, title, breadcrumbs, actions }: PageViewProps) => {
   return (
     <main className="container flex-col min-h-screen pb-8">
@@ -59,16 +70,49 @@ const PageView = ({ children, title, breadcrumbs, actions }: PageViewProps) => {
           </Text>
           {actions && (
             <div className="flex gap-3">
-              {actions.map((action, index) => (
-                <Button
-                  key={`action-${index}`}
-                  onClick={action.onClick}
-                  loading={action.loading}
-                  size="sm"
-                >
-                  {action.content}
-                </Button>
-              ))}
+              <div className="md:hidden relative">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      className="inline-flex items-center justify-center whitespace-nowrap rounded-md focus-visible:outline-none border h-8 w-8 p-0"
+                      variant="ghost"
+                    >
+                      <DotsVerticalIcon/>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    side="bottom"
+                    align="end"
+                    className="absolute right-0 z-50 min-w-[200px] space-y-3"
+                  >
+                    {actions.map((action, index) => (
+                      <DropdownMenuItem key={`action-${index}`}>
+                        <Button
+                          onClick={action.onClick}
+                          loading={action.loading}
+                          variant="ghost"
+                          size="sm"
+                          className="gap-0"
+                        >
+                          {action.content}
+                        </Button>
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+              <div className="hidden md:flex gap-1 ">
+                {actions.map((action, index) => (
+                  <Button
+                    key={`action-${index}`}
+                    onClick={action.onClick}
+                    loading={action.loading}
+                    size="sm"
+                  >
+                    {action.content}
+                  </Button>
+                ))}
+              </div>
             </div>
           )}
         </div>

src/hooks/use-import-student-gradebook-data.ts

@@ -1,11 +1,20 @@
-import { useToast } from "@/hooks/use-toast"
-import { useMutation } from "@tanstack/react-query"
 import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
 import { defaultMutationFn } from "@/app/(providers)/query-client-provider"
+import { useToast } from "@/hooks/use-toast"
+import { useMutation } from "@tanstack/react-query"
 
 export const useImportStudentGradebookData = () => {
   const { toast } = useToast()
   const { courseId } = useCourse()
+
+  const importGradebookDataAsync = async() => {
+    toast({
+      title: "Importing student gradebook data",
+      description: "Please wait while we import student gradebook data from your LMS.",
+    })
+    await mutation.mutateAsync()
+  }
+
   const mutation = useMutation<void, unknown, void>({
     mutationFn: async () => {
       return defaultMutationFn(
@@ -32,7 +41,7 @@ export const useImportStudentGradebookData = () => {
   })
 
   return {
-    importStudentGradebookDataAsync: mutation.mutateAsync,
+    importGradebookDataAsync,
     ...mutation,
   }
 }

src/hooks/use-import-students-from-lms.ts

@@ -1,11 +1,20 @@
-import { useToast } from "@/hooks/use-toast"
-import { useMutation } from "@tanstack/react-query"
 import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
 import { defaultMutationFn } from "@/app/(providers)/query-client-provider"
+import { useToast } from "@/hooks/use-toast"
+import { useMutation } from "@tanstack/react-query"
 
 export const useImportStudentsFromLms = () => {
   const { toast } = useToast()
   const { courseId } = useCourse()
+
+  const importStudentsAsync = async () => {
+    toast({
+      title: "Importing students",
+      description: "Please wait while we import students from your LMS.",
+    })
+    await mutation.mutateAsync()
+  }
+
   const mutation = useMutation<void, unknown, void>({
     mutationFn: async () => {
       return defaultMutationFn(`courses/${courseId}/import_students_from_lms/`, undefined, {allowEmptyResponse: true})
@@ -28,7 +37,7 @@ export const useImportStudentsFromLms = () => {
   })
 
   return {
-    importStudentsFromLmsAsync: mutation.mutateAsync,
+    importStudentsAsync,
     ...mutation,
   }
 }