Skip to content
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

Jump to bottom

Add route parameters for owner/repo #95

Merged
merged 1 commit into from
Jul 30, 2020
Merged

Add route parameters for owner/repo #95

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
6 changes: 3 additions & 3 deletions github-experts-ui/src/layout/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,17 +49,17 @@ export default function App() {
<Route exact path="/schedule-summary" component={ScheduleSummary} />
<Route
exact
path="/schedule-request-form-start"
path="/schedule-request-form-start/:owner/:repo"
component={ScheduleRequestFormStart}
/>
<Route
exact
path="/schedule-request-form"
path="/schedule-request-form/:owner/:repo"
component={ScheduleRequestForm}
/>
<Route
exact
path="/schedule-request-form-success"
path="/schedule-request-form-success/:owner/:repo"
component={ScheduleRequestFormSuccess}
/>
<Route exact path="/videocall/:roomName" component={VideoCall} />
Expand Down
55 changes: 30 additions & 25 deletions github-experts-ui/src/pages/schedule-request-form/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,45 @@ import { BreadCrumbs } from 'components/Breadcrumbs';
import { RequestFormStart } from './request-form-start/index';
import { RequestForm } from './request-form/index';
import { RequestFormSuccess } from './request-form-success';
import { useParams } from 'react-router-dom';

export const ScheduleRequestFormStart = () => (
<Layout headerOptions={[{ text: 'Schedule', path: '/scheduler' }]}>
<BoxPanel>
<BreadCrumbs
breadCrumbPaths={[
'patniko',
'experts-demo',
'Schedule a coaching session',
]}
/>
<RequestFormStart></RequestFormStart>
</BoxPanel>
</Layout>
);
export const ScheduleRequestFormStart = () => {
const { owner, repo } = useParams();

export const ScheduleRequestForm = () => {
return (
<Layout headerOptions={[{ text: 'Schedule', path: '/scheduler' }]}>
<BoxPanel>
<BreadCrumbs
breadCrumbPaths={['patniko', 'experts-demo', 'Requests']}
breadCrumbPaths={[owner, repo, 'Schedule a coaching session']}
/>
<RequestForm />
<RequestFormStart owner={owner} repo={repo} />
</BoxPanel>
</Layout>
);
};

export const ScheduleRequestFormSuccess = () => (
<Layout headerOptions={[{ text: 'Schedule', path: '/scheduler' }]}>
<BoxPanel>
<BreadCrumbs breadCrumbPaths={['patniko', 'experts-demo', 'Requests']} />
<RequestFormSuccess />
</BoxPanel>
</Layout>
);
export const ScheduleRequestForm = () => {
const { owner, repo } = useParams();

return (
<Layout headerOptions={[{ text: 'Schedule', path: '/scheduler' }]}>
<BoxPanel>
<BreadCrumbs breadCrumbPaths={[owner, repo, 'Requests']} />
<RequestForm owner={owner} repo={repo} />
</BoxPanel>
</Layout>
);
};

export const ScheduleRequestFormSuccess = () => {
const { owner, repo } = useParams();

return (
<Layout headerOptions={[{ text: 'Schedule', path: '/scheduler' }]}>
<BoxPanel>
<BreadCrumbs breadCrumbPaths={[owner, repo, 'Requests']} />
<RequestFormSuccess owner={owner} repo={repo} />
</BoxPanel>
</Layout>
);
};
40 changes: 21 additions & 19 deletions github-experts-ui/src/pages/schedule-request-form/request-form-start/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ import {
GetDailyAvailability,
} from 'api/ExpertService';

// TODO: Where do you come from!?!?
const REPO = 'github-experts+github-experts-sample-repo';
const REQUESTOR = 'wkilday';

const defaultTimeslots = [
Expand All @@ -32,7 +30,7 @@ const defaultTimeslots = [

const shortDateOptions = { weekday: 'short', month: 'numeric', day: 'numeric' };

export const RequestFormStart = styled(({ className, children }) => {
export const RequestFormStart = styled(({ className, owner, repo }) => {
const today = moment().startOf('day');
const tomorrow = moment().startOf('day').add(1, 'days');

Expand Down Expand Up @@ -65,33 +63,37 @@ export const RequestFormStart = styled(({ className, children }) => {
const [activeDay, setActiveDay] = useState(days[0]);

useEffect(() => {
GetExperts(REPO).then((newExperts) => {
GetExperts(`${owner}+${repo}`).then((newExperts) => {
setTutors(newExperts);
setActiveTutor(newExperts[0]);
});
}, []);
}, [owner, repo]);

useEffect(() => {
if (!activeTutor) return;

GetMonthlyAvailability(REPO, activeTutor.name).then((monthlyDays) => {
let dates = monthlyDays
.filter((d) => !d.available)
.map((d) => new Date(d.date));
GetMonthlyAvailability(`${owner}+${repo}`, activeTutor.name).then(
(monthlyDays) => {
let dates = monthlyDays
.filter((d) => !d.available)
.map((d) => new Date(d.date));

setExcludeDates(dates);
});
}, [activeTutor]);
setExcludeDates(dates);
}
);
}, [activeTutor, owner, repo]);

useEffect(() => {
if (!activeTutor || !activeDay) return;

GetDailyAvailability(REPO, activeTutor.name, activeDay.value).then(
(timeslots) => {
setTimeslots(timeslots);
}
);
}, [activeDay, activeTutor]);
GetDailyAvailability(
`${owner}+${repo}`,
activeTutor.name,
activeDay.value
).then((timeslots) => {
setTimeslots(timeslots);
});
}, [activeDay, activeTutor, owner, repo]);

function handleTutorChanged(event) {
let tutor = tutors.find((t) => t.id === event.target.value);
Expand Down Expand Up @@ -190,7 +192,7 @@ export const RequestFormStart = styled(({ className, children }) => {
<footer className="d-flex flex-justify-end flex-items-center pr-4">
<Link
to={{
pathname: '/schedule-request-form',
pathname: `/schedule-request-form/${owner}/${repo}`,
state: {
DateTime: new Date(
moment(activeDay.value).format('YYYY-MM-DD') +
Expand Down
12 changes: 7 additions & 5 deletions github-experts-ui/src/pages/schedule-request-form/request-form/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const formatDateTime = (date) =>
moment(date).format('dddd, MMM DD, YYYY');

export const RequestForm = styled(
withRouter(({ className, history, location }) => {
withRouter(({ className, history, location, owner, repo }) => {
const [selectedRadioIndex, setselectedRadioIndex] = useState(0);
const [, setError] = useState(undefined);
const textAreaRef = useRef(null);
Expand Down Expand Up @@ -67,7 +67,7 @@ export const RequestForm = styled(
))}
</div>
<div className="cta-button">
<Link to="/schedule-request-form-start">
<Link to={`/schedule-request-form-start/${owner}/${repo}`}>
<button className="btn" type="button">
Change
</button>
Expand Down Expand Up @@ -116,12 +116,14 @@ export const RequestForm = styled(
Rate: get(location, 'state.Rate'),
RequestFree: selectedRadioIndex === 1 ? true : false,
Expert: location.state.Expert,
// Need to get this from somewhere else.
Repo: 'github-experts+github-experts-sample-repo',
Repo: `${owner}+${repo}`,
};

createAppt(payload).then(() => {
history.push('/schedule-request-form-success', payload);
history.push(
`/schedule-request-form-success/${owner}/${repo}`,
payload
);
});
}}
>
Expand Down