Skip to content

[DEV-532] added question input page and page navigation #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adambelouad wants to merge 1 commit into
base: preview
Choose a base branch
from
Open

[DEV-532] added question input page and page navigation #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions frontend/app/questions/ask/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use client';

import AskQuestion from '@/components/AskQuestion';

export default function AskQuestionPage() {
return <AskQuestion />;
}
5 changes: 4 additions & 1 deletion frontend/app/questions/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import AddIcon from '@mui/icons-material/Add';
import { Button, Heading, Pane, Text, TrendingUpIcon, majorScale } from 'evergreen-ui';
import { useRouter } from 'next/navigation';

export function QAPage() {
const router = useRouter();

/**
* Handles the recent button click
*/
Expand All @@ -23,7 +26,7 @@ export function QAPage() {
* Handles the ask question button click
*/
const askQuestionHandler = () => {
// Placeholder for button click action
router.push('/questions/ask');
};

return (
Expand Down
240 changes: 147 additions & 93 deletions frontend/components/AskQuestion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@

import React, { useState } from 'react';

import { Pane, Textarea, Button, majorScale, minorScale } from 'evergreen-ui';
import { ArrowLeftIcon, Button, Heading, Pane, Text, Textarea, majorScale } from 'evergreen-ui';
import { useRouter } from 'next/navigation';

interface FormState {
questionTitle: string;
Expand All @@ -19,9 +20,9 @@ const initialFormState: FormState = {
};

export default function AskQuestion(): React.ReactElement {
const router = useRouter();
const [form, setForm] = useState<FormState>(initialFormState);
const [submitted, setSubmitted] = useState(false);
const [canceled, setCanceled] = useState(false);

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target as HTMLInputElement;
Expand All @@ -38,106 +39,159 @@ export default function AskQuestion(): React.ReactElement {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setSubmitted(true);
setCanceled(false);
setForm(initialFormState);
};

const handleCancel = () => {
setForm(initialFormState);
setSubmitted(false);
setCanceled(true);
router.push('/questions');
};

const handleBack = () => {
router.push('/questions');
};

return (
<Pane padding={majorScale(2)} marginTop={minorScale(2)} marginBottom={minorScale(2)}>
<h2 className='text-3xl font-bold mb-2 text-left'>Ask a Question</h2>
<h3 className='text-base font-normal mb-12 text-left'>
Get help from the Princeton academics community
</h3>
<form className='flex flex-col gap-6' onSubmit={handleSubmit}>
<div style={{ marginBottom: minorScale(2) }}>
<label style={{ display: 'block' }}>Question Title</label>
<input
name='questionTitle'
value={form.questionTitle}
onChange={handleChange}
required
style={{ width: '100%', padding: 8 }}
placeholder='E.g., How do I approach the graph algorithms in COS 226?'
className='w-full p-2 rounded-md border border-gray-300 bg-gray-100'
/>
</div>

<div style={{ marginBottom: minorScale(2) }}>
<label style={{ display: 'block' }}>Category</label>
<select
name='category'
value={form.category}
onChange={handleCategoryChange}
required
style={{ width: '100%', padding: 8 }}
className='w-full p-2 rounded-md border border-gray-300 bg-gray-100'
>
<option value='' disabled>
Select a category
</option>
<option value='Assignments and PSETs'>Assignments and PSETs</option>
<option value='Exam Prep'>Exam Prep</option>
<option value='Resource Recommendations'>Resource Recommendations</option>
<option value='Other'>Other</option>
</select>
</div>

<div style={{ marginBottom: minorScale(2) }}>
<label style={{ display: 'block' }}>Course (Optional)</label>
<input
name='course'
value={form.course}
onChange={handleChange}
style={{ width: '100%', padding: 8 }}
placeholder='E.g., COS 226'
className='w-full p-2 rounded-md border border-gray-300 bg-gray-100'
/>
</div>

<div style={{ marginBottom: minorScale(2) }}>
<label style={{ display: 'block' }}>Details</label>
<Textarea
name='questionDetails'
value={form.questionDetails}
onChange={handleChange}
style={{ borderRadius: 8, fontSize: '16px' }}
required
rows={10}
width='100%'
placeholder='Provide more details about your question...'
className='w-full p-2 rounded-md border border-gray-300 bg-gray-100'
/>
<span className='text-base font-normal mt-1'>
Tip: Add specific details and context to get better answers
</span>
</div>

<div
style={{
display: 'flex',
gap: 12,
width: '100%',
}}
<Pane
display='flex'
flexDirection='column'
alignItems='center'
paddingTop={majorScale(4)}
paddingBottom={majorScale(6)}
paddingX={majorScale(2)}
>
{/* Back button */}
<Pane width='100%' maxWidth='720px' marginBottom={majorScale(2)}>
<Button
appearance='minimal'
iconBefore={ArrowLeftIcon}
onClick={handleBack}
paddingLeft={0}
fontWeight={500}
>
<Button appearance='primary' type='submit' size='large' style={{ flex: 8 }}>
Post Question
</Button>
<Button onClick={handleCancel} type='button' size='large' style={{ flex: 2 }}>
Cancel
</Button>
</div>
</form>

{submitted && (
<Pane marginTop={minorScale(2)}>Thank you for submitting your question!</Pane>
)}
{canceled && <Pane marginTop={minorScale(2)}>Edit canceled.</Pane>}
Back
</Button>
</Pane>

{/* Header */}
<Pane width='100%' maxWidth='720px' marginBottom={majorScale(3)}>
<Heading size={800} fontWeight={700} marginBottom={4}>
Ask a Question
</Heading>
<Text size={400} color='muted'>
Get help from the Hoagie academics community
</Text>
</Pane>

{/* Form card */}
<Pane
width='100%'
maxWidth='720px'
background='white'
border='default'
borderRadius={8}
padding={majorScale(4)}
>
{submitted ? (
<Pane textAlign='center' paddingY={majorScale(4)}>
<Heading size={600} marginBottom={majorScale(2)}>
Thank you for submitting your question!
</Heading>
<Button appearance='primary' onClick={handleBack}>
Back to Q&A
</Button>
</Pane>
) : (
<form className='flex flex-col gap-6' onSubmit={handleSubmit}>
{/* Question Title */}
<div>
<label className='block text-sm font-semibold mb-1'>
Question Title
</label>
<input
Copy link
Contributor

@issacli-0821 issacli-0821 Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Swap these html input elements for TextInput evergreen elements

name='questionTitle'
value={form.questionTitle}
onChange={handleChange}
required
placeholder='e.g. How do I approach the graph algorithms in COS 226?'
className='w-full rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent'
/>
</div>

{/* Category */}
<div>
<label className='block text-sm font-semibold mb-1'>Category</label>
<select
Copy link
Contributor

@issacli-0821 issacli-0821 Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use Evergreen SelectMenu

name='category'
value={form.category}
onChange={handleCategoryChange}
required
className='w-full rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent'
>
<option value='' disabled>
Select a category
</option>
<option value='Assignments and PSETs'>Assignments and PSETs</option>
<option value='Exam Prep'>Exam Prep</option>
<option value='Resource Recommendations'>
Resource Recommendations
Comment on lines +134 to +137
Copy link
Contributor

@issacli-0821 issacli-0821 Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Put these options in a list as a constant on the top of the file

</option>
<option value='Other'>Other</option>
</select>
</div>

{/* Course */}
<div>
<label className='block text-sm font-semibold mb-1'>
Course (Optional)
</label>
<input
name='course'
value={form.course}
onChange={handleChange}
placeholder='e.g. COS 226'
className='w-full rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent'
/>
</div>

{/* Details */}
<div>
<label className='block text-sm font-semibold mb-1'>Details</label>
<Textarea
name='questionDetails'
value={form.questionDetails}
onChange={handleChange}
required
rows={6}
width='100%'
placeholder='Provide more details about your question...'
className='w-full rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent'
style={{ borderRadius: 6, fontSize: '14px', resize: 'vertical' }}
/>
<Text size={300} color='muted' marginTop={4} display='block'>
Tip: Add specific details and context to get better answers
</Text>
</div>

{/* Buttons */}
<div className='flex gap-3 mt-2'>
<button
Copy link
Contributor

@issacli-0821 issacli-0821 Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the Evergreen Button element

type='submit'
className='flex-1 rounded-md bg-red-500 px-4 py-2.5 text-sm font-semibold text-white hover:bg-red-600 transition-colors'
>
Post Question
</button>
<button
type='button'
onClick={handleCancel}
className='rounded-md border border-gray-300 bg-white px-6 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors'
>
Cancel
</button>
</div>
</form>
)}
</Pane>
</Pane>
);
}
Loading