Merge pull request #81 from stamford-syntax-club/guidelinePage

.vscode/settings.json

@@ -1,7 +1,8 @@
 {
-  "eslint.workingDirectories": [
-    {
-      "mode": "auto"
-    }
-  ]
+	"eslint.workingDirectories": [
+		{
+			"mode": "auto"
+		}
+	],
+	"git.rebaseWhenSync": true
 }

apps/web/app/courses/[courseCode]/page.tsx

@@ -1,18 +1,6 @@
 "use client";
 
-import {
-	Center,
-	Container,
-	Divider,
-	Flex,
-	Pagination,
-	Stack,
-	Title,
-	Text,
-	Loader,
-	Alert,
-	Blockquote
-} from "@mantine/core";
+import { Center, Container, Divider, Flex, Pagination, Stack, Title, Text, Loader, Alert } from "@mantine/core";
 import { MyReviewCard, ReviewCard } from "@components/ui/review-card";
 import { useEffect, useMemo, useState } from "react";
 import type { PaginatedResponse } from "types/pagination";

apps/web/app/guidelines/data.tsx

@@ -0,0 +1,65 @@
+interface Guideline {
+	title: string;
+	rules?: string[];
+}
+
+interface Aspect {
+	title: string;
+	info: string;
+}
+
+export const guideline: Guideline[] = [
+	{
+		title: "Be Honest and Constructive",
+		rules: [
+			"Share your genuine experience and opinions about the course by providing constructive criticism and avoiding using offensive language.",
+			"Remember that your review is subjective and based on your experience. Other students may have different opinions and experiences. Please do not consider any single review as the main reason to enroll in or avoid a course"
+		]
+	},
+	{
+		title: "Advice for Future Students",
+		rules: [
+			"Offer tips or advice for students considering taking the course. For example, how to prepare for the course or what to expect",
+			"Use specific examples to illustrate your points. For instance, mention particular assignments, projects, or teaching methods that stood out"
+		]
+	},
+	{
+		title: "Be Respectful and Fair",
+		rules: [
+			"Write your review respectfully and avoid personal attacks on instructors or classmates.",
+			"Provide balanced feedback, mentioning both positives and areas for improvement.",
+			"Ensure your review does not encourage or suggest academic dishonesty. Respect the academic policies of your institution.",
+			"Avoid mentioning the names of individuals in your review unless it is to admire or positively acknowledge their contribution"
+		]
+	},
+	{
+		title: "Keep it Relevant",
+		rules: [
+			"Focus on aspects directly related to the course and its delivery.",
+			"Avoid discussing unrelated personal grievances or issues outside the scope of the course."
+		]
+	}
+];
+
+export const aspects: Aspect[] = [
+	{
+		title: "Course Content",
+		info: "Describe the quality and relevance of the course materials."
+	},
+	{
+		title: "Teaching Quality",
+		info: "Comment on the instructor's teaching style and effectiveness without mentioning their name."
+	},
+	{
+		title: "Workload",
+		info: "Mention the amount of work required, including assignments, projects, and exams."
+	},
+	{
+		title: "Practical Application",
+		info: "Discuss how the course content applies to real-world scenarios or your field of study."
+	},
+	{
+		title: "Resources and Support",
+		info: "Note the availability and usefulness of resources such as textbooks, online materials, and support from teaching assistants."
+	}
+];

apps/web/app/guidelines/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+import React, { useState } from "react";
+import { guideline, aspects } from "./data";
+import { Container, Text, Title, Button, Group, Collapse, Box, List, Flex } from "@mantine/core";
+import { IconBook, IconKey, IconCirclePlus, IconOctagonMinus, IconChecklist } from "@tabler/icons-react";
+
+export default function Guideline(): JSX.Element {
+	const [openedIndex, setOpenedIndex] = useState<number | null>(null);
+
+	const toggleCollapse = (index: number) => {
+		setOpenedIndex(openedIndex === index ? null : index);
+	};
+
+	return (
+		<Container>
+			<Box mx="auto">
+				<Flex gap="md" wrap="wrap" direction="column" mb="xl">
+					<Group wrap="nowrap" justify="center" align="center">
+						<IconBook size={26} className="flex flex-shrink-0" />
+						<Title fw={700} className="text-center text-2xl">
+							Guidelines for Writing Course Reviews
+						</Title>
+						<IconBook size={26} className="flex flex-shrink-0" />
+					</Group>
+					<Text c="dimmed">
+						While reviews are helpful, always consult with your academic advisors when selecting courses.
+						This platform is intended to supplement their guidance with student experiences. Remember that
+						reading reviews is useful, but you must study according to your curriculum and requirements.
+					</Text>
+				</Flex>
+				<Flex gap="md" direction="column" wrap="wrap" mb="xl">
+					<Group wrap="nowrap" justify="center" align="center">
+						<IconKey size={26} className=" flex flex-shrink-0" />
+						<Title fw={700} className="text-center text-2xl">
+							Consider Key Aspect of the Course
+						</Title>
+						<IconKey size={26} className=" flex flex-shrink-0" />
+					</Group>
+
+					{aspects?.map((info, index) => (
+						<Box key={index}>
+							<Title order={4} fw={700} mb="md" className="flex items-center">
+								<IconChecklist className="mr-2" color="lightblue" size={24} />
+								{info.title}
+							</Title>
+							<Text c="dimmed">{info.info}</Text>
+						</Box>
+					))}
+				</Flex>
+				{guideline?.map((list, index: number) => (
+					<Box maw={960} key={index}>
+						<Group mb={5}>
+							<Button
+								justify="space-between"
+								onClick={() => toggleCollapse(index)}
+								color="gray"
+								fullWidth
+								mb={12}
+								size="md"
+								variant="light"
+								rightSection={openedIndex == index ? <IconOctagonMinus /> : <IconCirclePlus />}
+							>
+								{list.title}
+							</Button>
+						</Group>
+						<Collapse in={openedIndex === index} transitionDuration={300} transitionTimingFunction="linear">
+							<List pb="md" c="dimmed">
+								{<List.Item>{list.rules}</List.Item>}
+							</List>
+						</Collapse>
+					</Box>
+				))}
+			</Box>
+		</Container>
+	);
+}

apps/web/components/core/application-navbar.tsx

@@ -4,7 +4,7 @@ import { useAuth } from "hooks/use-auth";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useDisclosure } from "@mantine/hooks";
-import { IconBooks, IconHistory, IconHome } from "@tabler/icons-react";
+import { IconBooks, IconHistory, IconHome, IconCheckbox } from "@tabler/icons-react";
 import SigninConfirmationModal from "@components/ui/signin-confirmation";
 
 export const navItems = [
@@ -23,6 +23,11 @@ export const navItems = [
 		href: "https://center.stamford.dev/resources",
 		newTab: true,
 		icon: <IconBooks />
+	},
+	{
+		label: "Guidelines",
+		href: "/guidelines",
+		icon: <IconCheckbox />
 	}
 ];
 

apps/web/components/ui/write-review-form.tsx

@@ -8,6 +8,7 @@ import { Markdown } from "tiptap-markdown";
 import { notifications } from "@mantine/notifications";
 import { MarkdownEditor } from "@components/ui/markdown-editor";
 import type { Review } from "types/reviews";
+import Link from "next/link";
 
 const academicYearOptions = [
 	{ value: "2020", label: "2020" },
@@ -25,12 +26,21 @@ interface WriteReviewFormProps {
 
 const reviewGuidelines = [
 	{
-		text: "Your review will be displayed anonymously to the public after approval.",
+		text: <Text>Your review will be displayed anonymously to the public after approval.</Text>,
 		color: "blue",
 		displayIcon: <IconAlertCircle size={25} />
 	},
 	{
-		text: "Kindly refrain from mentioning names and write your reviews with respect. Constructive criticism is encouraged.",
+		text: (
+			<div>
+				Kindly refrain from mentioning names and write your reviews with respect.{" "}
+				<span className="underline">
+					<Link href="/guidelines" target="_blank">
+						Click here to learn more
+					</Link>
+				</span>
+			</div>
+		),
 		color: "yellow",
 		displayIcon: <IconAlertTriangle size={25} />
 	}
@@ -123,7 +133,7 @@ export default function WriteReviewForm({ courseCode, onSubmit, previousReview }
 				<Blockquote key={`review_guideline_${guide.text}`} color={guide.color} w="100%" p="sm" mb="xs">
 					<Flex justify="flex-start" gap="sm">
 						{guide.displayIcon}
-						<Text>{guide.text}</Text>
+						{guide.text}
 					</Flex>
 				</Blockquote>
 			))}
@@ -142,8 +152,8 @@ export default function WriteReviewForm({ courseCode, onSubmit, previousReview }
 
 				<MarkdownEditor editor={markdownEditor} />
 
-				<Flex gap="sm" justify="end">
-					<Button type="submit" my="sm">
+				<Flex gap="sm" justify="end" align="center">
+					<Button type="submit" my="sm" className="min-w-36">
 						Submit Review
 					</Button>
 				</Flex>

apps/web/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "web",
-	"version": "1.1.2",
+	"version": "1.2.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev --turbo",

apps/web/tsconfig.json

@@ -11,4 +11,4 @@
 	},
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
 	"exclude": ["node_modules"]
-}
+}