3109.47419d4c.chunk.js

"use strict";(self.webpackChunkacellus=self.webpackChunkacellus||[]).push([[3109],{53109:function(t,e,o){o.r(e),o.d(e,{default:function(){return g}});var i,r,s=o(30168),n=o(29439),a=o(43681),l=o(51083),c=o(78447),h=o(30424),d=o(11126),u=o(49840),p=o(47313),x=o(60106),w=o(46417);function g(){var t=(0,c.Z)(),e=(0,h.Z)(),o=e.width,i=e.height,r=(0,x.Z)("md"),s=(0,d.Z)(),a=(0,p.useState)(0),g=(0,n.Z)(a,2),Z=g[0],C=g[1],S=(0,p.useState)(0),N=(0,n.Z)(S,2),z=N[0],I=N[1],W=(0,u.Z)((function(){I(z>=2?0:z+1)}),1e3);return(0,w.jsxs)(l.i,{customStyles:{marginTop:"8rem",height:"calc(100dvh - 8rem)",overflowY:"auto","--tw-bg-opacity":"1",backgroundColor:"rgb(255 255 255 / var(--tw-bg-opacity))"},children:[(0,w.jsxs)(b,{children:[(0,w.jsx)(y,{children:"What is the purpose of this page?"}),(0,w.jsx)(f,{children:"This page is to show all the logic in the 'shared/utils' folder globally in the Acellus app. There are many reasons why it is beneficial for everyone to understand what logic is in the shared folder, to prevent us from creating additional logic that has already been created. If you add something to the 'shared' folder, please add it below, in alphabetical order."})]}),(0,w.jsxs)(b,{children:[(0,w.jsx)(j,{children:"HOOKS"}),(0,w.jsx)(f,{children:"The following hooks can be used in your fucntional components to apply useful logic to make the page more dynamic"})]}),(0,w.jsxs)(b,{children:[(0,w.jsx)(j,{children:"useScroll"}),(0,w.jsx)(f,{children:"This hook is used to detect when the user has scrolled at all from the top of the page. If the user has scrolled past the top isScrolling returns true, otherwise isScrolling is false. It is used in the 'src/teacher-interface/components/Teacher'"}),(0,w.jsxs)(f,{children:["isScrolling:",(0,w.jsxs)(T,{children:[" ",s?"true":"false"]})]})]}),(0,w.jsxs)(b,{children:[(0,w.jsx)(j,{children:"useTransitioner"}),(0,w.jsxs)(f,{children:["This hook is used to transition between pages with a cloud animation. It is used in the student interface to transition between pages. to use it in your component, import it from 'src\\utils\\student\\useTransition.js' and then use it in your component like so: ",(0,w.jsx)("br",{}),(0,w.jsx)(m,{children:" const transition = useTransitioner()"})," ",(0,w.jsx)("br",{})," then call it onClick like so:",(0,w.jsx)("br",{})," onClick={() =>",(0,w.jsx)(m,{children:" transition('/path/to/where/you/want/to/go')"}),"}"]}),(0,w.jsx)("button",{className:"bg-red-500 w-20 p-4",onClick:function(){return t(document.location.pathname)},children:"Click Me"})]}),(0,w.jsxs)(b,{children:[(0,w.jsx)(j,{children:"useWindowSize"}),(0,w.jsxs)(f,{children:["This hook is used like this: ",(0,w.jsx)(m,{children:"const {width, height} = useWindowSize()"})," ",(0,w.jsx)("br",{}),"you can then use these value anywhere and they adapt upon window resizes",(0,w.jsx)("br",{}),"Width: ",o,(0,w.jsx)("br",{}),"Height: ",i]})]}),(0,w.jsxs)(b,{children:[(0,w.jsx)(j,{children:"useBreakpoint"}),(0,w.jsxs)(f,{children:["This hook is used like this: ",(0,w.jsx)(m,{children:'const md = useBreakpoint("md")'})," ",(0,w.jsx)("br",{}),"it will return true if width is greater than or equal to the breakpoint, false is less than",(0,w.jsx)("br",{}),"So the example would have md = true if the window width is 768px, false if it is 767px",(0,w.jsx)("br",{}),"md: ",r]})]}),(0,w.jsxs)(b,{children:[(0,w.jsx)(j,{children:"useThrottle"}),(0,w.jsxs)(f,{children:["This hook is used to throttle the amount of times a function is called. You pass in a function and a time in milliseconds. It will then not allow the function to be called again until the time has passed. ",(0,w.jsx)("br",{}),(0,w.jsx)(m,{children:" const throttledFunction = useThrottle(function, time)"})," ",(0,w.jsx)("br",{}),(0,w.jsx)("button",{className:"bg-yellow-500 p-4",onClick:function(){C(Z>=2?0:Z+1)},children:"Normal Function"}),(0,w.jsx)("button",{className:"bg-yellow-500 p-4",onClick:W,children:"Throttled Function"}),(0,w.jsx)(k,{color:Z,children:"Normal"}),(0,w.jsx)(v,{throttledColor:z,children:"Throttled"})]})]}),(0,w.jsx)("div",{className:"h-[100px]"})]})}var b=a.Z.section({marginTop:"2rem",display:"flex",flexDirection:"column",gap:"0.5rem"}),j=a.Z.h1({"--tw-text-opacity":"1",color:"rgb(30 58 138 / var(--tw-text-opacity))"}),y=a.Z.h3({"--tw-text-opacity":"1",color:"rgb(17 24 39 / var(--tw-text-opacity))"}),f=a.Z.p({"--tw-text-opacity":"1",color:"rgb(17 24 39 / var(--tw-text-opacity))"}),m=a.Z.span({fontSize:"2rem","--tw-text-opacity":"1",color:"rgb(239 68 68 / var(--tw-text-opacity))"}),k=(0,a.Z)(f)(i||(i=(0,s.Z)(["\n  ","\n"])),(function(t){var e=t.color;return 0===e?{"--tw-text-opacity":"1",color:"rgb(236 72 153 / var(--tw-text-opacity))"}:1===e?{"--tw-text-opacity":"1",color:"rgb(34 197 94 / var(--tw-text-opacity))"}:{"--tw-text-opacity":"1",color:"rgb(59 130 246 / var(--tw-text-opacity))"}})),v=(0,a.Z)(f)(r||(r=(0,s.Z)(["\n  ","\n"])),(function(t){var e=t.throttledColor;return 0===e?{"--tw-text-opacity":"1",color:"rgb(236 72 153 / var(--tw-text-opacity))"}:1===e?{"--tw-text-opacity":"1",color:"rgb(34 197 94 / var(--tw-text-opacity))"}:{"--tw-text-opacity":"1",color:"rgb(59 130 246 / var(--tw-text-opacity))"}})),T=((0,a.Z)(b)({"--tw-bg-opacity":"1",backgroundColor:"rgb(243 244 246 / var(--tw-bg-opacity))"}),a.Z.span({"--tw-bg-opacity":"1",backgroundColor:"rgb(250 204 21 / var(--tw-bg-opacity))",fontSize:"1.6rem","--tw-text-opacity":"1",color:"rgb(0 0 0 / var(--tw-text-opacity))"}))}}]);