\n
\n )}\n \n {!selectedGroupsLength && (\n \n )}\n {!!selectedGroupsLength && (\n
\n - \n
- \n \n {selectedGroupsLength} group\n {selectedGroupsLength > 1 && 's'} selected\n \n \n
- \n \n \n
- \n \n \n
\n
\n )\n}\n\nexport default injectSheet(styles)(PupilSelector)\n","export const groupsFilterStyles = ({ COLORS }) => ({\n container: {\n marginBottom: '5px',\n '& button': {\n fontWeight: 'normal'\n }\n },\n groupsInfo: {\n listStyle: 'none',\n padding: '0',\n margin: '0',\n color: COLORS.TEXT.DARK_GREY.NORMAL,\n display: 'flex',\n alignItems: 'center',\n '& strong': {\n lineHeight: '2'\n },\n '& li': {\n paddingLeft: '24px',\n position: 'relative',\n '&:after': {\n content: '\"\"',\n width: '4px',\n height: '4px',\n borderRadius: '4px',\n background: '#ddd',\n position: 'absolute',\n left: '10px',\n top: '12px'\n },\n '&:first-child': {\n padding: '0',\n '&:after': {\n display: 'none'\n }\n }\n }\n }\n})\n\nexport const groupSelectorStyles = {\n content: {\n padding: '0',\n height: '366px'\n },\n pending: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '100%',\n height: '100%'\n }\n}\n\nexport default {\n filters: {\n background: '#f8f8f8',\n padding: '25px 20px'\n },\n search: {\n display: 'flex',\n '& input': {\n borderRadius: '4px 0 0 4px',\n borderRight: 'none'\n },\n '& button': {\n height: '100%',\n borderRadius: '0 4px 4px 0',\n padding: '7px 14px'\n }\n },\n pupils: {\n height: '400px',\n overflow: 'auto',\n padding: '0 0 20px'\n },\n pending: {\n height: '100%',\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n table: {\n '& tr th': {\n display: 'none',\n '&:first-child': {\n paddingLeft: '20px',\n width: '44px',\n display: 'table-cell'\n },\n '&:last-child': {\n display: 'table-cell',\n width: '20px'\n },\n '@media (min-width: 451px)': {\n display: 'table-cell'\n }\n },\n '& tr td': {\n display: 'none',\n '&:first-child': {\n display: 'table-cell',\n paddingLeft: '20px'\n },\n '&:last-child': {\n display: 'table-cell',\n paddingRight: '20px'\n },\n '@media (min-width: 451px)': {\n display: 'table-cell'\n }\n }\n },\n yearHCell: {\n width: '90px'\n },\n permissionHCell: {\n width: '110px'\n },\n pupilName: {\n display: 'flex',\n alignItems: 'center'\n },\n avatar: {\n fontSize: '32px',\n marginRight: '10px',\n flexShrink: '0'\n },\n uploadButton: {\n '& span': {\n display: 'none',\n '@media (min-width: 451px)': {\n display: 'inline'\n }\n },\n '& > div': {\n margin: '0 !important',\n '@media (min-width: 451px)': {\n margin: '0 6px 0 -2px !important'\n }\n }\n }\n}\n","import { ModalContent, ModalFooter } from 'pobble-components/dist/modal'\nimport React, { useState } from 'react'\nimport injectSheet from 'react-jss'\nimport FormLabel from 'pobble-components/dist/form-elements/form-label'\nimport FormTextArea from 'pobble-components/dist/form-elements/form-text-area'\nimport FormInput from 'pobble-components/dist/form-elements/form-input'\nimport FormRadio from 'pobble-components/dist/form-elements/form-radio'\nimport Button from 'pobble-components/dist/button'\nimport ButtonElement from 'pobble-components/dist/button-element'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCaretDown } from '@fortawesome/pro-solid-svg-icons/faCaretDown'\nimport { faCaretUp } from '@fortawesome/pro-solid-svg-icons/faCaretUp'\nimport { faInfoCircle } from '@fortawesome/pro-solid-svg-icons/faInfoCircle'\nimport { faCircle } from '@fortawesome/pro-regular-svg-icons/faCircle'\nimport { faCheckCircle } from '@fortawesome/pro-solid-svg-icons/faCheckCircle'\nimport { faTimesCircle } from '@fortawesome/pro-solid-svg-icons/faTimesCircle'\nimport Tooltip from 'pobble-components/dist/tooltip'\nimport {\n useFeatureCounter,\n SubsCrown\n} from 'pobble-components/dist/subscriptions'\n\nconst FormControl = injectSheet({\n container: {\n position: 'relative',\n '& input': {\n appearance: 'none',\n position: 'absolute',\n backgroundColor: '#fff',\n margin: 0,\n '& + *': {\n height: '100%',\n cursor: 'pointer',\n border: '1px solid #ddd',\n padding: '16px',\n borderRadius: '4px',\n display: 'flex',\n alignItems: 'center',\n flexDirection: 'column',\n position: 'relative',\n '& $checkIcon:first-child': {\n display: 'none'\n }\n },\n '&:checked + *': {\n borderColor: 'var(--blue)',\n background: '#f5fcff',\n '& $checkIcon': {\n color: 'var(--blue)',\n '&:first-child': {\n display: 'block'\n },\n '&:last-child': {\n display: 'none'\n }\n }\n },\n '&:disabled + *': {\n backgroundColor: 'var(--light-gray--)'\n }\n }\n },\n checkIcon: {\n position: 'absolute',\n right: '8px',\n top: '8px',\n color: '#ddd',\n fontSize: '16px'\n }\n})(function FormControl({ classes, children, THEME, hideIcon, ...props }) {\n return (\n \n )\n}, [])\n\nconst styles = ({ COLORS }) => ({\n content: {\n padding: '0',\n fontSize: '14px',\n '& section': {\n padding: '2em 1.43em',\n borderTop: '1px solid #ececec',\n alignItems: 'center',\n '&:first-child': {\n border: 'none'\n }\n },\n '& sup': {\n color: COLORS.RED.NORMAL\n }\n },\n commentHint: {\n display: 'none',\n '@media (min-width: 575px)': {\n display: 'inline'\n }\n },\n infoSection: {\n '& > *': {\n marginTop: '2em',\n '&:first-child': {\n marginTop: '0'\n }\n }\n },\n staButton: {\n color: COLORS.TEXT.LIGHT_GREY.NORMAL,\n display: 'flex',\n alignItems: 'center',\n marginTop: '30px',\n '& svg': {\n marginLeft: '6px'\n }\n },\n staChoices: {\n listStyle: 'none',\n padding: '0',\n margin: '0 0 20px',\n display: 'flex',\n '& li': {\n marginRight: '20px'\n },\n '& label': {\n display: 'flex',\n alignItems: 'center',\n '& span': {\n marginRight: '5px'\n }\n }\n },\n staDescription: {\n margin: '20px 0',\n '& a': {\n color: COLORS.TEXT.LIGHT_GREY.NORMAL\n }\n },\n publishChoices: {\n display: 'grid',\n gridTemplateColumns: '1fr',\n gap: '16px',\n '@media (min-width: 768px)': {\n gridTemplateColumns: '1fr 1fr',\n '& > *': {\n height: '100%'\n }\n }\n },\n publishChoice: {\n color: 'var(--gray--)',\n '& svg': {\n color: 'var(--gray---)',\n margin: '1px 12px 0 0'\n },\n '& > span': {\n display: 'block',\n margin: '4px 0',\n '&:first-child': {\n fontWeight: 'bold',\n margin: '0 0 12px',\n font: 'var(--heading--)',\n color: 'var(--gray-)'\n }\n }\n },\n publishPoint: {\n display: 'flex !important'\n },\n commentSection: {\n marginTop: '24px'\n },\n publishCrown: {\n position: 'absolute',\n right: '8px',\n top: '8px',\n fontSize: '14px'\n }\n})\n\nconst WorkForm = injectSheet(styles)(\n ({\n classes,\n defaultValues,\n canPublish,\n pupilName,\n pupilId,\n onCancel,\n submitButton,\n onSubmit\n }) => {\n const [publish, setPublish] = useState(false)\n const [comment, setComment] = useState('')\n const [title, setTitle] = useState(defaultValues.title)\n const [tags, setTags] = useState('')\n const [showSta, setShowSta] = useState(false)\n const [sta, setSta] = useState(null)\n const [staExtraInfo, setStaExtraInfo] = useState('')\n const [description, setDescription] = useState(defaultValues.description)\n const workState = publish ? 'published' : 'evidence_bank'\n\n const [incrementPublishWorkCounter, publishWorkSP] = useFeatureCounter(\n 'WorkPublishing',\n sp => sp.publish_work\n )\n\n return (\n \n
\n \n setSearchString(e.target.value)}\n id=\"search\"\n placeholder=\"Type a pupil's name\"\n />\n \n
\n \n {!pupils && (\n \n {!!pupils.length ? (\n \n {\n setSelectedGroups({})\n setSearchString('')\n }}\n simple>\n Clear filters\n \n \n ) : (\n \n \n )}\n \n )}\n {!!pupils &&\n !!resultingPupils.length && (\n \n \n
\n )}\n
\n \n
\n )}\n {!!pupils &&\n !resultingPupils.length && (\n \n We searched everywhere\n
\n There are no pupils matching this criteria\n
You don’t have any pupils in your school yet
\n \n\n setPublish(false)}>\n \n Save to evidence bank\n \n \n publishWorkSP.restricted\n ? publishWorkSP.showDialog()\n : setPublish(true)\n }>\n {publishWorkSP.restricted && (\n
\n {publish && (\n \n \n \n \n Leave a public comment on {pupilName}\n 's work\n \n \n \n setComment(e.currentTarget.value)}\n />\n
\n )}\n \n \n \n Title\n *\n \n \n setTitle(e.currentTarget.value)}\n />\n
\n \n \n Description\n \n setDescription(e.currentTarget.value)}\n />\n
\n \n \n Tags\n \n setTags(e.currentTarget.value)}\n />\n
\n \n setShowSta(!showSta)}\n className={classes.staButton}>\n Set STAs independent writing criteria (optional){' '}\n setStaExtraInfo(e.target.value)}\n placeholder=\"e.g. First paragraph shared writing\"\n />\n )}\n \n )}\n
\n \n Does this piece meet the STAs independent writing criteria?{' '}\n
- \n
- \n \n \n
- \n \n \n
- \n \n \n
\n \n
\n \n \n )\n }\n)\n\nconst filterStyles = ({ COLORS }) => ({\n container: {\n background: '#fff',\n '@media (min-width: 813px)': {\n height: '100%',\n display: 'flex',\n flexDirection: 'column'\n }\n },\n sessionsSelectSection: {\n padding: '20px',\n borderBottom: '1px solid #ececec',\n fontSize: '14px',\n '& h2': {\n fontSize: '1.51em',\n lineHeight: '1.2',\n display: 'none',\n margin: '.5em 0 .6em',\n '@media (min-width: 813px)': {\n display: 'block'\n }\n }\n },\n sessionSelectSkeleton: {\n height: '40px',\n borderRadius: '4px'\n },\n studentsList: {\n '@media (min-width: 813px)': {\n flex: '1',\n overflow: 'auto'\n }\n },\n student: {\n width: '100%',\n padding: '12px 20px',\n borderBottom: '1px solid #ececec',\n display: 'flex',\n alignItems: 'center'\n },\n skeletonAvatar: {\n flexShrink: '0',\n width: '32px',\n height: '32px',\n borderRadius: '100%',\n marginRight: '10px'\n },\n skeletonName: {\n width: '120px'\n },\n backButton: {\n margin: '20px 0 20px 20px'\n },\n addStudent: {\n padding: '20px',\n borderBottom: '1px solid #ececec',\n '@media (min-width: 575px)': {\n border: 'none'\n },\n '& button': {\n textDecoration: 'underline',\n color: COLORS.TEXT.LIGHT_GREY.NORMAL\n }\n }\n})\n\nconst Filter = injectSheet(filterStyles)(({ classes }) => {\n const { filters } = useSelector(state => getFeedItemsState(state))\n const dispatch = useDispatch()\n const [sessionsList, setSessionsList] = useState(null)\n const lastUpdate = usePrevious(filters.updateAfter)\n const [pupilSelectorOpened, setPupilSelectorOpened] = useState(false)\n const sessionsListFormatted = useMemo(\n () =>\n sessionsList &&\n sessionsList.map(session => ({\n ...session,\n dateFormat: format(new Date(session.accessible_at), 'MMM dd')\n })),\n [sessionsList]\n )\n\n const sessionListMapped = useMemo(\n () => {\n if (!sessionsListFormatted) return {}\n const result = {}\n sessionsListFormatted.forEach(session => (result[session.id] = session))\n return result\n },\n [sessionsListFormatted]\n )\n\n const selectedSession = useMemo(\n () => {\n return sessionListMapped[filters.session_id]\n },\n [sessionListMapped, filters.session_id]\n )\n\n const [studentsPerSession, setStudentsPerSession] = useState(null)\n\n const studentsPerSessionMap = useMemo(\n () => {\n if (!Array.isArray(studentsPerSession)) return {}\n const result = {}\n studentsPerSession.forEach(student => (result[student.id] = true))\n return result\n },\n [studentsPerSession]\n )\n\n const { selectedStudentState, setSelectedStudentState } = useContext(\n FeedContext\n )\n\n const selectedStudent = useMemo(\n () => {\n if (!selectedStudentState.studentId) return null\n return studentsPerSession.filter(\n student => student.id === selectedStudentState.studentId\n )[0]\n },\n [selectedStudentState, studentsPerSession]\n )\n\n // Fetch sessions\n useEffect(() => {\n apiGetMe({ include: 'account.pa_sessions,account.pa_session.details' })\n .catch(errorHandler)\n .then(res =>\n setSessionsList(res.data.account.pa_sessions.reverse().slice(0, 50))\n )\n }, [])\n\n // Fetch students per session and filter feed\n useEffect(\n () => {\n if (!filters.session_id) {\n setStudentsPerSession(null)\n } else {\n setStudentsPerSession('pending')\n apiGetStudentsPerSession(filters.session_id, {\n include: 'account.names,account.avatar'\n }).then(res => setStudentsPerSession(res.data.students_data))\n }\n },\n [filters.session_id]\n )\n\n // Update student stats when the work rejected or approved\n useEffect(\n () => {\n if (lastUpdate) {\n apiGetStudentsPerSession(filters.session_id, {\n include: 'account.names,account.avatar'\n }).then(res => setStudentsPerSession(res.data.students_data))\n }\n },\n [filters.updateAfter] // eslint-disable-line\n )\n\n return (\n \n
\n \n
\n )\n})\n\nconst successModalStyles = {\n content: {\n display: 'flex',\n alignItems: 'center',\n flexDirection: 'column',\n fontSize: '14px',\n lineHeight: '1.2',\n textAlign: 'center',\n minWidth: 'auto',\n maxWidth: 'calc(100vw - 40px)',\n width: '30em',\n padding: '2em',\n '& img': {\n margin: '0 0 2em',\n width: '12.5em',\n height: '12.5em'\n },\n '& h3': {\n fontSize: '1.57em',\n margin: '0 0 1em'\n },\n '& p': {\n margin: '0'\n },\n '& button': {\n margin: '2em 0 1em'\n }\n }\n}\n\nconst SuccessModal = injectSheet(successModalStyles)(\n ({ classes, data, ...props }) => {\n return (\n \n {\n dispatch(\n fetchFeedItems(\n e.target.value !== 'all' && {\n session_id: e.target.value\n }\n )\n ).catch(errorHandler)\n }}>\n \n {sessionsListFormatted.map(session => (\n \n ))}\n \n )}\n
\n Filter by...
\n {!sessionsListFormatted && (\n\n {selectedStudent && (\n \n setSelectedStudentState({\n studentId: student.id,\n sessionId: filters.session_id\n })\n }\n />\n )\n })}\n {selectedSession &&\n !selectedSession.student_solo_session && (\n {\n dispatch(\n addStudentsToSession(filters.session_id, pupilIds)\n ).catch(errorHandler)\n }}\n exclude={studentsPerSessionMap}\n isOpen={pupilSelectorOpened}\n requestClose={() => setPupilSelectorOpened(false)}\n />\n \n )}\n \n )}\n
\n \n \n setSelectedStudentState({ studentId: null, sessionId: null })\n }\n className={classes.backButton}\n bleed\n back\n simple>\n Back\n \n
\n )}\n {!selectedStudent && (\n <>\n {studentsPerSession &&\n studentsPerSession === 'pending' && (\n \n {[...Array(4).keys()].map(i => (\n
\n )}\n {studentsPerSession &&\n studentsPerSession !== 'pending' && (\n <>\n {studentsPerSession.map(student => {\n return (\n \n
\n ))}\n \n setPupilSelectorOpened(true)}>\n Add students\n \n
\n )}\n And away they go
\n {data.workState === 'published' && (\n\n The work is now published on Pobble.\n
\n Your pupil will be so excited!\n
\n The work is now saved on the\n
\n evidence bank.\n
\n \n setCurrentPage(\n currentPage === 0 ? pagesLength - 1 : currentPage - 1\n )\n }>\n \n setCurrentPage(\n currentPage === pagesLength - 1 ? 0 : currentPage + 1\n )\n }>\n
\n )\n }\n)\n\nconst feedContentHolderStyles = {\n container: {\n padding: '0 16px'\n }\n}\n\nconst FeedContentHolder = injectSheet(feedContentHolderStyles)(\n ({ classes, className, ...props }) => {\n return (\n \n )\n }\n)\n\nconst successCriteriaStyles = ({ FONT_SIZES }) => ({\n successCriteria: {\n border: '1px solid #4a4a4a',\n borderRadius: '8px',\n overflow: 'hidden',\n background: '#fff',\n '& ul': {\n listStyle: 'none',\n padding: '0',\n margin: '0'\n },\n '& li': {\n display: 'flex',\n alignItems: 'center',\n padding: '16px 20px',\n borderTop: '1px solid #4a4a4a',\n '&:first-child': {\n borderTop: '0'\n }\n },\n '& p': {\n margin: '0'\n }\n },\n successCriteriaHead: {\n background: '#4a4a4a',\n padding: '16px 20px',\n color: '#fff',\n display: 'block',\n fontWeight: 'bold',\n ...FONT_SIZES.BODY_DEFAULT.STYLE\n },\n criteria: {\n flex: '1'\n },\n criterion: {\n fontWeight: 'bold'\n }\n})\n\nconst SuccessCriteria = injectSheet(successCriteriaStyles)(\n ({ classes, data, onChange }) => {\n return (\n \n Have I...\n
\n )\n }\n)\n\nconst boxStyles = ({ FONT_SIZES }) => ({\n box: {\n background: '#f8f8f8',\n padding: '20px',\n overflow: 'hidden',\n borderBottom: '1px solid #ececec',\n '&:last-child': {\n border: 'none'\n },\n '& > h2': {\n margin: '-20px -20px 20px',\n padding: '20px',\n background: '#fff',\n ...FONT_SIZES.BODY_DEFAULT.STYLE,\n fontWeight: 'bold'\n }\n }\n})\n\nconst Box = injectSheet(boxStyles)(({ title, classes, children }) => {\n return (\n - \n {data.map(item => {\n return (\n
- \n \n\n
{item.criterion}
\n{item.prompts}
\n\n\n\n \n )\n })}\n
\n
\n )\n})\n\nconst feedItemStyles = ({ COLORS }) => ({\n container: {\n borderRadius: '8px',\n background: '#fff',\n boxShadow: '0 2px 12px rgba(0, 0, 0, 0.2)',\n overflow: 'hidden',\n fontSize: '14px',\n marginBottom: '2em',\n maxWidth: '1024px',\n margin: '0 auto',\n '@media (min-width: 575px)': {\n marginBottom: '3em'\n },\n '@media (min-width: 813px)': {\n width: '100%'\n }\n },\n head: {\n display: 'flex',\n padding: '1.4em 0',\n '& h3': {\n fontSize: '1.57em',\n lineHeight: '1.2',\n margin: '0'\n }\n },\n layout: {\n '@media (min-width: 575px)': {\n display: 'flex'\n }\n },\n layoutDetails: {\n background: '#f8f8f8',\n '@media (min-width: 575px)': {\n borderTop: '1px solid #eee',\n flex: '1',\n maxWidth: '360px',\n position: 'relative',\n '& > div': {\n position: 'absolute',\n left: '0',\n top: '0',\n height: '100%',\n width: '100%',\n overflow: 'auto'\n }\n }\n },\n layoutWork: {\n flex: '1'\n },\n media: {\n position: 'relative'\n },\n work: {\n background: '#333',\n padding: '1em',\n flexDirection: 'column-reverse',\n display: 'flex',\n '@media (min-width: 575px)': {\n padding: '20px',\n display: 'flex'\n }\n },\n controls: {\n display: 'flex',\n margin: '0 0 14px',\n justifyContent: 'space-between',\n '@media (min-width: 575px)': {\n margin: '0 0 20px'\n }\n },\n footer: {\n paddingTop: '1.2em',\n paddingBottom: '1.2em',\n display: 'flex',\n justifyContent: 'flex-end',\n '& > *': {\n marginLeft: '1em'\n },\n '@media (min-width: 575px)': {\n position: 'relative',\n zIndex: '50',\n boxShadow: '0 -3px 3px rgba(0, 0, 0, 0.1)'\n }\n },\n author: {\n background: '#fff',\n padding: '1em 0',\n borderBottom: '1px solid #ececec',\n '& > *': {\n display: 'flex',\n alignItems: 'center'\n }\n },\n avatar: {\n fontSize: '2.7em',\n marginRight: '.2em'\n },\n pupilName: {\n fontWeight: 'bold',\n margin: '0',\n lineHeight: '1.2'\n },\n creator: {\n margin: '0',\n fontSize: '.86em',\n lineHeight: '1.2',\n color: COLORS.TEXT.LIGHT_GREY.NORMAL\n },\n versionSelect: {\n '& select': {\n border: 'none',\n background: '#000',\n color: '#fff'\n },\n '& svg': {\n color: '#fff !important'\n }\n }\n})\n\nconst FeedItem = injectSheet(feedItemStyles)(\n ({ classes, data, onSendBack, onApprove }) => {\n const [currentMediaPage, setCurrentMediaPage] = useState(0)\n const [currentVersionIndex, setCurrentVersionIndex] = useState(\n data.pa_work_versions.length - 1\n )\n\n const md = useMemo(\n () => {\n const { pa_work_versions } = data\n const currentWorkVersion = pa_work_versions[currentVersionIndex]\n const { student } = data\n return {\n title: data.pa_session.title,\n media: !currentWorkVersion.work ? [] : currentWorkVersion.work.media,\n pupilName: student.full_name,\n pupilAvatar: student.avatar,\n successCriteria: currentWorkVersion.success_criteria,\n action: data,\n versions: pa_work_versions\n }\n },\n [data, currentVersionIndex]\n )\n\n const workReviewsProps = useWorkReviews(md.action)\n\n const activeMedia = md.media[currentMediaPage]\n\n return (\n {title}
\n {children}\n\n \n \n
\n )\n }\n)\n\nconst selectedStudentScreenStyles = ({ COLORS }) => ({\n pending: {\n flex: '1',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n teacherReviewContainer: {\n padding: '20px',\n '@media (min-width: 575px)': {\n padding: '30px 20px'\n },\n '@media (min-width: 813px) and (orientation: landscape)': {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n flex: '1',\n overflow: 'auto',\n '& *': {\n flexShrink: '0'\n }\n }\n },\n studentInteractionContainer: {\n flex: '1',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n studentInteractionHolder: {\n textAlign: 'center',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n padding: '0 40px',\n '& > p': {\n margin: '15px 0'\n }\n },\n statusIcon: {\n background: COLORS.BLUE.NORMAL,\n width: '80px',\n height: '80px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontSize: '30px',\n color: '#fff',\n borderRadius: '100%'\n }\n})\n\nconst SelectedStudentScreen = injectSheet(selectedStudentScreenStyles)(\n ({ classes }) => {\n const [paAction, setPaAction] = useState(null)\n\n const { selectedStudentState } = useContext(FeedContext)\n\n useEffect(\n () => {\n if (!selectedStudentState.studentId) return false\n apiGetPresentationAction({\n pa_session_id: selectedStudentState.sessionId,\n student_account_id: selectedStudentState.studentId,\n include:\n 'pa_action.status,pa_action.presentation.names,pa_action.presentation.image,pa_session.timestamps,pa_action.last_pa_work_version.work.media,pa_action.last_pa_work_version.work.status,pa_action.last_pa_work_version.work.medium.image,pa_action.last_pa_work_version.work.medium.details,pa_action.student.names,pa_action.student.avatar,pa_action.student.student_type.policy,pa_action.pa_session.details'\n })\n .then(res => setPaAction(res.data.pa_presentation_action))\n .catch(errorHandler)\n },\n [selectedStudentState]\n )\n return !paAction ? (\n \n \n \n
\n {md.title}
\n\n
\n \n
\n \n {activeMedia && (\n
\n \n {activeMedia.pa_highlight_canva && (\n
\n )}\n \n setCurrentVersionIndex(e.target.value)}>\n {md.versions.map((version, index) => {\n return \n })}\n \n
\n \n
\n \n \n \n )}\n {!!workReviewsProps.reviews && (\n \n \n )}\n
\n \n \n \n
\n {!!md.successCriteria.length && (\n \n
\n {md.pupilName}
\nCreator
\n\n
\n ) : paAction.status === 'teacher_review' ? (\n \n
\n ) : (\n \n
\n )\n }\n)\n\nconst FeedContext = createContext(null)\n\nconst feedStyles = {\n container: {\n ...fullVHExceptHeader,\n display: 'flex',\n flexDirection: 'column',\n '& > *': {\n flexShrink: '0'\n }\n },\n filterButton: {\n marginRight: 'auto',\n '@media (min-width: 813px) and (orientation: landscape)': {\n display: 'none'\n }\n },\n filter: {\n display: 'none',\n '@media (min-width: 813px) and (orientation: landscape)': {\n width: '250px',\n display: 'block',\n background: '#fff'\n },\n '@media (min-width: 1025px)': {\n width: '386px'\n }\n },\n showFilters: {\n '& $filter': {\n display: 'block'\n }\n },\n pending: {\n flex: '1',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n head: {\n justifyContent: 'flex-end'\n },\n layout: {\n display: 'flex',\n flexDirection: 'column',\n flex: '1',\n '@media (min-width: 813px) and (orientation: landscape)': {\n flexDirection: 'row',\n overflow: 'hidden'\n }\n },\n items: {\n padding: '20px',\n '@media (min-width: 575px)': {\n padding: '30px 20px'\n },\n '@media (min-width: 813px) and (orientation: landscape)': {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n flex: '1',\n overflow: 'auto',\n '& > *': {\n flexShrink: '0'\n }\n }\n },\n noItems: {\n flex: '1',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: '14px',\n padding: '2em',\n '& h3': {\n fontSize: '1.57em',\n lineHeight: '1.2',\n margin: '0 0 1em'\n }\n }\n}\n\nconst Feed = injectSheet(feedStyles)(({ classes }) => {\n const history = useHistory()\n const match = useRouteMatch()\n const dispatch = useDispatch()\n const feedItems = useSelector(state => getFeedItemsList(state))\n\n const [modalState, setModalState] = useState({ type: null, data: null })\n const [showFilters, setShowFilters] = useState(false)\n const { fetchItemsRequest } = useSelector(state => getFeedItemsState(state))\n const [selectedStudentState, setSelectedStudentState] = useState({\n studentId: null,\n sessionId: null\n })\n\n const { uploadWork, uploadingWork } = useWorkUpload()\n\n useEffect(\n () => {\n setModalState(\n match.path === '/upload'\n ? { type: 'DirectUpload', data: null }\n : { type: null, data: null }\n )\n },\n [match.path]\n )\n\n useEffect(\n () => {\n dispatch(fetchFeedItems())\n },\n [dispatch]\n )\n\n const contextValue = useMemo(\n () => {\n return {\n selectedStudentState,\n setSelectedStudentState\n }\n },\n [selectedStudentState, setSelectedStudentState]\n )\n\n return (\n \n
\n \n
\n {paAction.status === 'done' && (\n \n {paAction.student.first_name} already got an approved work.\n
\n You can access{' '}\n
\n {paAction.student.first_name} hasn’t submitted a piece of work yet\n
\n )}\n\n
\n \n
\n {selectedStudentState.studentId ? (\n \n
\n )}\n {feedItems &&\n !fetchItemsRequest.pending && (\n <>\n {!feedItems.length && (\n \n 
\n
\n )}\n {!!feedItems.length && (\n Nothing to review
\n\n {feedItems.map(feedItem => (\n {\n openConfirmationDialog({\n bodyText: `Are you sure you want to send this work back to the student?`,\n confirmText: 'Send back',\n cancelText: 'Cancel',\n action: () => {\n toast.success(\n `Work has been sent back to ${\n feedItem.pa_action.student.first_name\n }`\n )\n dispatch(\n rejectWork({\n feedId: feedItem.id,\n workVersionId:\n feedItem.pa_action.last_pa_work_version\n .id\n })\n ).catch(errorHandler)\n }\n })\n }}\n onApprove={() =>\n setModalState({\n type: 'Approve',\n data: feedItem\n })\n }\n key={feedItem.id}\n data={feedItem.pa_action}\n />\n ))}\n
\n )}\n \n )}\n \n )}\n \n setScreenState('page')}\n tall\n icon={
\n \n {mediaCopy.map(media => (\n
\n \n
\n ))}\n \n
And away they go
\n {data.workState === 'published' && (\n\n The work is now published on Pobble.\n
\n Your pupil will be so excited!\n
\n The work is now saved in the\n
\n evidence bank.\n
\n \n {\n Cookies.remove('prefillWorkDetails')\n uploadWork(data.pupilId, files).then(() =>\n props.requestClose()\n )\n }}>\n
\n \n )}\n \n {media.length > 1 && (\n setScreenState('reorder')}\n tall\n icon={\n openConfirmationDialog({\n bodyText: 'Are you sure you want to delete this page?',\n action: onDelete\n })\n }\n tall\n icon={ {\n dispatch(\n addMedia(workId, {\n image: files[0]\n })\n ).catch(errorHandler)\n }}\n accept=\"image/jpeg, image/png, .pdf\">\n
\n )\n }\n)\n\nconst editControlsStyles = {\n container: {\n marginRight: 'auto',\n '@media (min-width: 575px)': {\n marginRight: '1em'\n }\n }\n}\n\nconst EditControls = injectSheet(editControlsStyles)(({ classes, media }) => {\n const dispatch = useDispatch()\n const { rotateMediumRequest } = useSelector(state =>\n getWorkUploadState(state)\n )\n return (\n \n dispatch(rotateMedium(media.id)).catch(errorHandler)}\n tall\n icon={
\n )\n})\n\nconst workStyles = {\n container: {\n minHeight: '100vh',\n backgroundColor: '#333',\n overflow: 'hidden'\n },\n imageHolder: {\n padding: '20px 20px 40px',\n '& > div': {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n '& img': {\n position: 'relative',\n zIndex: '10',\n width: '100%',\n background: '#000'\n }\n },\n controls: {\n display: 'flex',\n justifyContent: 'flex-end',\n padding: '20px 20px 0',\n '@media (min-width: 575px)': {\n paddingTop: '30px'\n }\n },\n pageNavDesktop: {\n display: 'none',\n marginRight: 'auto',\n '@media (min-width: 575px)': {\n display: 'flex'\n }\n },\n pageNavMobile: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n margin: '-10px 0 30px',\n '@media (min-width: 575px)': {\n display: 'none'\n }\n }\n}\n\nconst Work = ({ classes }) => {\n const match = useRouteMatch()\n const history = useHistory()\n const dispatch = useDispatch()\n const workId = match.params.id\n const media = useSelector(state => getMediaListInOrder(state))\n const student = useSelector(getStudent)\n const mediaNav = useMediaNav(media)\n const previousPagesLength = usePrevious(mediaNav.mediaLength)\n const [modalState, setModalState] = useState({\n type: null\n })\n const [screenState, setScreenState] = useState('page')\n\n const { params } = useRouteMatch()\n\n useEffect(\n () => {\n dispatch(fetchWorkUploadData(params.id)).catch(errorHandler)\n },\n [dispatch, params.id]\n )\n\n // Update page navigation when new media added\n useEffect(\n () => {\n if (mediaNav.mediaLength && previousPagesLength) {\n if (previousPagesLength < mediaNav.mediaLength) {\n mediaNav.setActiveMediaIndex(mediaNav.mediaLength - 1)\n }\n if (mediaNav.activeMediaIndex > mediaNav.mediaLength - 1) {\n mediaNav.setActiveMediaIndex(mediaNav.mediaLength - 1)\n }\n }\n },\n [mediaNav.mediaLength] //eslint-disable-line\n )\n\n const onReorder = useCallback(\n ids => {\n dispatch(reorderMedia(workId, ids))\n },\n [dispatch, workId]\n )\n\n const value = useMemo(\n () => ({\n media,\n screenState,\n setScreenState,\n workId,\n onReorder\n }),\n [media, screenState, setScreenState, workId, onReorder]\n )\n\n return (\n \n \n setModalState({ type: 'Details' })} />\n {!!media.length && (\n \n setModalState({ type: null })}\n onSubmit={({ title, description, workState, tags, comment, sta }) => {\n Cookies.set(\n 'prefillWorkDetails',\n JSON.stringify({\n title,\n description\n }),\n { expires: 1 }\n )\n const payload = {\n title,\n description,\n state: workState,\n comment_on_work: comment,\n tags\n }\n if (sta) payload.independent = sta.value\n if (sta && sta.extraInfo)\n payload.independent_description = sta.extraInfo\n\n return dispatch(saveWork(workId, payload))\n .catch(errorHandler)\n .then(() =>\n setModalState({\n type: 'Success',\n data: {\n ...modalState.data,\n workState,\n pupilName: student.account.first_name,\n pupilId: student.account.id\n }\n })\n )\n }}\n isOpen={modalState.type === 'Details'}\n />\n setModalState({ type: null })}\n isOpen={modalState.type === 'Success'}\n data={modalState.data}\n />\n
\n )\n}\n\nexport default injectSheet(workStyles)(Work)\n","import React from 'react'\nimport styles from './app.styles'\nimport injectSheet from 'react-jss'\nimport { UserProvider, UserInspector } from 'pobble-components/dist/pobble-user'\nimport EnvironmentLine from 'pobble-components/dist/environment-line'\nimport Header from 'pobble-components/dist/pobble-header'\nimport { Switch, Route, BrowserRouter as Router } from 'react-router-dom'\nimport Feed from '../pages/feed/feed'\nimport { ToastContainer } from 'pobble-components/dist/toast'\nimport Work from '../pages/work/work'\nimport { ConfirmationDialog } from 'pobble-components/dist/modal/confirmation-dialog'\nimport PageNotFound from 'pobble-components/dist/page-not-found'\nimport { SubscriptionProvider } from 'pobble-components/dist/subscriptions'\nimport { ErrorBoundary } from 'pobble-components/dist/error-boundary'\n\nconst APP_PATH = process.env.REACT_APP_PATH || '/'\n\nconst App = ({ classes, me, meError }) => {\n return (\n \n {screenState === 'page' && (\n <>\n \n {\n if (media.length > 1) {\n dispatch(deleteMedia(mediaNav.activeMedia.id)).catch(\n errorHandler\n )\n } else {\n dispatch(deleteWork(workId))\n .then(() => history.push('/'))\n .catch(errorHandler)\n }\n }}\n currentMedia={mediaNav.activeMedia}\n />\n \n \n \n \n \n \n )}\n {screenState === 'reorder' &&
\n )}\n \n \n \n
\n