Merge branch 'main' of github.com:csesoc/learning-platform

Author: maxphillipsdev

components/ArticlesCarousel.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+// @ts-nocheck
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Box, styled } from '@modulz/design-system'
 import { useComposedRefs } from '@radix-ui/react-compose-refs'
 import { createContext } from '@radix-ui/react-context'
 import { useCallbackRef } from '@radix-ui/react-use-callback-ref'
 import { composeEventHandlers } from '@radix-ui/primitive'
 import debounce from 'lodash.debounce'
-import { useCallback, useEffect, useRef, useState } from 'react'
 import smoothscroll from 'smoothscroll-polyfill'
 
 import { Article } from 'contentlayer/generated'
@@ -298,7 +298,7 @@ export const Carousel = (props) => {
       return slidesArray.find(
         (slide) => slide.dataset.slideIntersectionRatio !== '0'
       )
-    }
+    } 
   })
 
   const handleNextClick = useCallback(() => {
@@ -513,6 +513,7 @@ const CarouselArrowButton = styled('button', {
   margin: 0,
   border: 0,
   padding: 0,
+  length: 0,
 
   display: 'flex',
   position: 'relative',

components/MultiChoice.tsx

@@ -0,0 +1,44 @@
+import { Children, cloneElement, ReactElement, ReactNode } from 'react'
+import { styled } from '../stitches.config'
+import { Flex } from './Flex'
+import Answer from './MultiChoiceAnswer'
+import Explanation from './MultiChoiceExplanation'
+import Question from './MultiChoiceQuestion'
+
+const MultiChoiceBase = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: '$slate1',
+  padding: '$2 $6 $6',
+  borderRadius: '16px',
+  margin: '$6 0 $6',
+  boxShadow: '0px 4px 55px -42px rgba(0,0,0,0.74)',
+})
+
+interface MultiChoiceProps {
+  children: ReactNode
+}
+
+const MultiChoice = ({ children }: MultiChoiceProps) => {
+  const childrenArray = Children.toArray(children) as ReactElement[]
+  const question = childrenArray.find(
+    (child) => child.type === MultiChoice.Question
+  )
+  const answers = childrenArray
+    .filter((child) => child.type === MultiChoice.Answer)
+    // assign answer a number based on order, shown as a number circle
+    .map((answer, index) => cloneElement(answer, { answerNum: index + 1 }))
+
+  return (
+    <MultiChoiceBase>
+      {question}
+      <Flex direction="column">{answers}</Flex>
+    </MultiChoiceBase>
+  )
+}
+
+MultiChoice.Question = Question
+MultiChoice.Answer = Answer
+MultiChoice.Explanation = Explanation
+
+export default MultiChoice

components/MultiChoiceAnswer.tsx

@@ -0,0 +1,100 @@
+import {
+  CheckCircle,
+  IconProps,
+  NumberCircleFive,
+  NumberCircleFour,
+  NumberCircleOne,
+  NumberCircleThree,
+  NumberCircleTwo,
+  XCircle
+} from 'phosphor-react'
+import { Children, ReactElement, ReactNode, useState } from 'react'
+import { styled } from '../stitches.config'
+import { Flex } from './Flex'
+import MultiChoice from './MultiChoice'
+
+const COLOR_CORRECT = 'limegreen'
+const COLOR_INCORRECT = 'tomato'
+
+const ExplanationBase = styled('div', {
+  cursor: 'pointer',
+  padding: '$2',
+  borderBottom: '1px solid grey',
+  '&:hover': {
+    backgroundColor: '$slate3'
+  }
+})
+
+type AnswerProps = {
+  content: ReactElement
+  isCorrect: boolean
+  answerNum: number
+  children: ReactNode
+}
+
+const Answer = ({
+  content,
+  isCorrect = false,
+  answerNum,
+  children
+}: AnswerProps) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const childrenArray = Children.toArray(children) as ReactElement[]
+  const answer = childrenArray.filter(
+    (child) => child.type != MultiChoice.Explanation
+  )
+  const explanation = childrenArray.find(
+    (child) => child.type === MultiChoice.Explanation
+  )
+
+  const handleOnClick = () => {
+    setIsExpanded((prev) => !prev)
+  }
+
+  // content is used for short answers
+  // long answers use the children prop
+  return (
+    <ExplanationBase onClick={handleOnClick}>
+      <Flex direction="row" gap="3" align="center">
+        {renderCircle(isExpanded ? isCorrect : answerNum)}
+        {content ? <p>{content}</p> : <div>{answer}</div>}
+      </Flex>
+      {isExpanded && renderIsCorrect(isCorrect)}
+      {isExpanded && explanation}
+    </ExplanationBase>
+  )
+}
+
+export default Answer
+
+const renderIsCorrect = (isCorrect: boolean) => {
+  if (isCorrect) {
+    const style = { color: COLOR_CORRECT, fontWeight: 'bold' }
+    return <p style={style}>Correct!</p>
+  }
+  // !isCorrect
+  const style = { color: COLOR_INCORRECT, fontWeight: 'bold' }
+  return <p style={style}>Incorrect</p>
+}
+
+const renderCircle = (circleType: boolean | number) => {
+  const iconProps: IconProps = { size: '32px', style: { flexShrink: 0 } }
+  switch (circleType) {
+    case true:
+      return <CheckCircle color={COLOR_CORRECT} weight="fill" {...iconProps} />
+    case false:
+      return <XCircle color={COLOR_INCORRECT} weight="fill" {...iconProps} />
+    case 1:
+      return <NumberCircleOne {...iconProps} />
+    case 2:
+      return <NumberCircleTwo {...iconProps} />
+    case 3:
+      return <NumberCircleThree {...iconProps} />
+    case 4:
+      return <NumberCircleFour {...iconProps} />
+    case 5:
+      return <NumberCircleFive {...iconProps} />
+    default:
+      return <XCircle {...iconProps} />
+  }
+}

components/MultiChoiceExplanation.tsx

@@ -0,0 +1,92 @@
+import React, { Children, ReactElement, ReactNode, useState } from 'react'
+import { callbackify } from 'util'
+import { styled } from '../stitches.config'
+
+const ExplanationBase = styled('div', {
+  color: 'grey'
+})
+
+type ExplanationProps = {
+  content: ReactElement
+  children: JSX.Element[]
+}
+
+const Explanation = ({ content, children }: ExplanationProps) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  // content is used for short explanations
+  // long explanations use the children prop
+  if (content) {
+    return (
+      <ExplanationBase>
+        <p>{content}</p>
+      </ExplanationBase>
+    )
+  }
+
+  console.log("children", children)
+    const traverse = (ele: JSX.Element[] | JSX.Element | string, callback: (ele: string) => void) => {
+    if (typeof ele === 'string') {
+      // console.log("ele is string:", ele)
+      callback(ele);
+      return;
+    }
+    if (Array.isArray(ele)) {
+      // console.log("ele is array:", ele)
+      ele.forEach((subEle) => traverse(subEle, callback));
+    } else if (React.isValidElement(ele)) {
+      // console.log("ele is react element:", ele)
+      if (ele.props.hasOwnProperty('children')) {
+        // Only if the props of this react element has a children prop.
+        // Might not in some cases, e.g. when ele.type === "img"
+        traverse((ele as JSX.Element).props.children, callback);
+      }
+    }
+  }
+
+  // Traverse the component tree to count total length of text.
+  let textLength = 0;
+  traverse(children, (text) => {
+    textLength += text.length
+  })
+  
+  const handleOnClick = (event) => {
+    // prevents collapsing the parent component
+    event.stopPropagation()
+    setIsExpanded((prev) => !prev)
+  }
+
+  // above collapsable threshold
+  const threshold = 1000
+  if ((children.length > 1 || textLength > threshold) && !isExpanded) {
+    let previewTextFound = false
+    let previewText = ""
+
+    // Traverse the component tree and find the first text node.    
+    traverse(children, (text: string) => {
+      if (!previewTextFound) {
+        previewText = text
+        previewTextFound = true
+      }
+    })
+
+    previewText.substring(0, threshold)
+      // trims all non-letter characters from end of string
+      // this ensures the truncated paragraph looks good with the ellipsis (...)
+      .replace(/[^a-z]+$/gi, '')
+
+    return (
+      <ExplanationBase>
+        <p>
+          {previewText}
+          {'... '}
+          <a onClick={(event) => handleOnClick(event)}>Read more</a>
+        </p>
+      </ExplanationBase>
+    )
+  }
+
+  return <ExplanationBase>{children}</ExplanationBase>
+}
+
+export default Explanation

components/MultiChoiceQuestion.tsx

@@ -0,0 +1,39 @@
+import { Children, cloneElement, ReactElement, ReactNode } from 'react'
+import { styled } from '../stitches.config'
+
+const QuestionBase = styled('div', {
+  borderBottom: '1px solid grey'
+})
+
+type QuestionProps = {
+  children: ReactNode
+}
+
+const Question = ({ children }: QuestionProps) => {
+  // a clone of children, except the images are centred
+  const childrenWithCenteredImages = Children.map(
+    children as ReactElement[],
+    (child) => {
+      if (childIsType(child, 'img')) {
+        return cloneElement(child, { align: 'center' })
+      }
+      return child
+    }
+  )
+
+  return <QuestionBase>{childrenWithCenteredImages}</QuestionBase>
+}
+
+export default Question
+
+// recursively checks if an element or any of its children is the given type
+const childIsType = (child: ReactElement, type: string): boolean => {
+  if (child == null) {
+    return false
+  }
+  const isType = childIsType(child.props?.children, type)
+  if (child.type === type) {
+    return true
+  }
+  return isType
+}