1 files changed, 154 insertions, 0 deletions
diff --git a/src/views/Circles/JoinCircle.jsx b/src/views/Circles/JoinCircle.jsx
new file mode 100644
index 0000000..fd6d542
--- /dev/null
+++ b/src/views/Circles/JoinCircle.jsx
@@ -0,0 +1,154 @@
+import { Box, Container, Input, Sheet, Typography } from '@mui/joy'
+import Logo from '../../Logo'
+
+import { Button } from '@mui/joy'
+import { useContext } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { UserContext } from '../../contexts/UserContext'
+import { JoinCircle } from '../../utils/Fetcher'
+const JoinCircleView = () => {
+  const { userProfile, setUserProfile } = useContext(UserContext)
+  let [searchParams, setSearchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const code = searchParams.get('code')
+
+  return (
+    <Container
+      component='main'
+      maxWidth='xs'
+
+      // make content center in the middle of the page:
+    >
+      <Box
+        sx={{
+          marginTop: 4,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Sheet
+          component='form'
+          sx={{
+            mt: 1,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            padding: 2,
+            borderRadius: '8px',
+            boxShadow: 'md',
+          }}
+        >
+          {/* <img
+            src='/src/assets/logo.svg'
+            alt='logo'
+            width='128px'
+            height='128px'
+          /> */}
+          <Logo />
+
+          <Typography level='h2'>
+            Done
+            <span
+              style={{
+                color: '#06b6d4',
+              }}
+            >
+              tick
+            </span>
+          </Typography>
+          {code && userProfile && (
+            <>
+              <Typography level='body-md' alignSelf={'center'}>
+                Hi {userProfile?.displayName}, you have been invited to join the
+                circle{' '}
+              </Typography>
+              <Input
+                fullWidth
+                placeholder='Enter code'
+                value={code}
+                disabled={!!code}
+                size='lg'
+                sx={{
+                  width: '220px',
+                  mb: 1,
+                }}
+              />
+              <Typography level='body-md' alignSelf={'center'}>
+                Joining will give you access to the circle's chores and members.
+              </Typography>
+              <Typography level='body-md' alignSelf={'center'}>
+                You can leave the circle later from you Settings page.
+              </Typography>
+              <Button
+                fullWidth
+                size='lg'
+                sx={{ mt: 3, mb: 2 }}
+                onClick={() => {
+                  JoinCircle(code).then(resp => {
+                    if (resp.ok) {
+                      alert(
+                        'Joined circle successfully, wait for the circle owner to accept your request.',
+                      )
+                      navigate('/my/chores')
+                    } else {
+                      if (resp.status === 409) {
+                        alert('You are already a member of this circle')
+                      } else {
+                        alert('Failed to join circle')
+                      }
+                      navigate('/my/chores')
+                    }
+                  })
+                }}
+              >
+                Join Circle
+              </Button>
+              <Button
+                fullWidth
+                size='lg'
+                q
+                variant='plain'
+                sx={{
+                  width: '100%',
+                  mb: 2,
+                  border: 'moccasin',
+                  borderRadius: '8px',
+                }}
+                onClick={() => {
+                  navigate('/my/chores')
+                }}
+              >
+                Cancel
+              </Button>
+            </>
+          )}
+          {!code ||
+            (!userProfile && (
+              <>
+                <Typography level='body-md' alignSelf={'center'}>
+                  You need to be logged in to join a circle
+                </Typography>
+                <Typography level='body-md' alignSelf={'center'} sx={{ mb: 9 }}>
+                  Login or sign up to continue
+                </Typography>
+                <Button
+                  fullWidth
+                  size='lg'
+                  sx={{ mt: 3, mb: 2 }}
+                  onClick={() => {
+                    navigate('/login')
+                  }}
+                >
+                  Login
+                </Button>
+              </>
+            ))}
+        </Sheet>
+      </Box>
+    </Container>
+  )
+}
+
+export default JoinCircleView