From f2f05f7e29ffbe600895310014aff85a17ed00d6 Mon Sep 17 00:00:00 2001
From: Mitrasish Mukherjee <mmitrasish97@gmail.com>
Date: Sun, 3 May 2020 13:20:40 +0530
Subject: [PATCH] Adds Meety checkin returning the list of the checked-in
 participants

---
 .../SingleEvent/Admin/MeetyCheckIn.js         | 94 +++++++++++++++++++
 src/routes/SingleEventAdmin.js                | 19 ++++
 2 files changed, 113 insertions(+)
 create mode 100644 src/components/SingleEvent/Admin/MeetyCheckIn.js

diff --git a/src/components/SingleEvent/Admin/MeetyCheckIn.js b/src/components/SingleEvent/Admin/MeetyCheckIn.js
new file mode 100644
index 00000000..a08ff54a
--- /dev/null
+++ b/src/components/SingleEvent/Admin/MeetyCheckIn.js
@@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+import styled from '@emotion/styled'
+
+import Button from '../../Forms/Button'
+import TextInput from '../../Forms/TextInput'
+import Label from '../../Forms/Label'
+
+const Section = styled('section')`
+  margin-bottom: 40px;
+`
+
+const EventIdInputContainer = styled('div')`
+  display: flex;
+  margin-bottom: 20px;
+`
+
+const EventIdInput = styled(TextInput)`
+  margin: 0;
+  margin-right: 20px;
+`
+
+const POAPList = styled('ul')`
+  margin-left: 2em;
+`
+
+export default function MeetyCheckIn({ party, userAddress }) {
+  const [meetyId, setMeetyId] = useState('')
+  const [checkedInParticipants, setCheckedInParticipants] = React.useState([])
+  const [isRunning, setIsRunning] = useState(false)
+
+  const loadMeetyUser = async () => {
+    const response = await fetch(
+      `https://meety-backend.herokuapp.com/organizer/${userAddress.toLowerCase()}/events/${meetyId}/checkin`
+    )
+      .then(res => res.json())
+      .catch(err => console.log(err))
+    const participants = response.participants
+    setCheckedInParticipants(participants)
+  }
+
+  return (
+    <>
+      <Section>
+        <Label>Automatic Meety check in (experimental)</Label>
+        <p>
+          If you are using Meety Checkpoints, then you can check in your
+          attendees automatically.
+        </p>
+        <p>
+          Just enter your Meety event ID here so that it matches what is shown
+          here and Kickback will mark users who solved the minimum number of
+          required quizzes in minimum number of required checkpoint as
+          attendees.
+        </p>
+      </Section>
+      <Section>
+        <Label>Check in</Label>
+        <p>Enter your event ID and click below to check in your attendees.</p>
+
+        <EventIdInputContainer>
+          <EventIdInput
+            onChangeText={value => setMeetyId(value)}
+            placeholder="Meety Event ID"
+            type="text"
+          />
+        </EventIdInputContainer>
+        <Button
+          disabled={checkedInParticipants.length !== 0}
+          onClick={() => loadMeetyUser()}
+        >
+          Load Meety users
+        </Button>
+        <Button
+          disabled={isRunning || checkedInParticipants.length === 0}
+          onClick={() => setIsRunning(true)}
+        >
+          Mark Check In
+        </Button>
+      </Section>
+      <Section>
+        {isRunning ? <span>Auto checking in....</span> : ''}
+        <POAPList>
+          {checkedInParticipants.map((a, i) => {
+            return (
+              <li key={i}>
+                {a.user.username} {a.user.address.slice(0, 4)}...
+              </li>
+            )
+          })}
+        </POAPList>
+      </Section>
+    </>
+  )
+}
diff --git a/src/routes/SingleEventAdmin.js b/src/routes/SingleEventAdmin.js
index c096ddbd..2c17f226 100644
--- a/src/routes/SingleEventAdmin.js
+++ b/src/routes/SingleEventAdmin.js
@@ -6,6 +6,7 @@ import { ReactComponent as DefaultBackArrow } from '../components/svg/arrowBack.
 
 import ParticipantTableList from '../components/SingleEvent/ParticipantTableList'
 import CheckIn from '../components/SingleEvent/Admin/CheckIn'
+import MeetyCheckIn from '../components/SingleEvent/Admin/MeetyCheckIn'
 import SmartContractFunctions from '../components/SingleEvent/Admin/SmartContractFunctions'
 import WarningBox from '../components/WarningBox'
 import { PARTY_QUERY } from '../graphql/queries'
@@ -146,6 +147,14 @@ class SingleEvent extends Component {
                         >
                           POAP Check in
                         </ToggleLink>
+                        <ToggleLink
+                          active={
+                            pathname === `/event/${address}/admin/meety/checkin`
+                          }
+                          to={`/event/${address}/admin/meety/checkin`}
+                        >
+                          Meety Check in
+                        </ToggleLink>
                         <ToggleLink
                           active={pathname === `/event/${address}/admin/edit`}
                           to={`/event/${address}/admin/edit`}
@@ -175,6 +184,16 @@ class SingleEvent extends Component {
                           exact
                           render={() => <CheckIn party={party} />}
                         />
+                        <Route
+                          path={`/event/${address}/admin/meety/checkin`}
+                          exact
+                          render={() => (
+                            <MeetyCheckIn
+                              party={party}
+                              userAddress={userAddress}
+                            />
+                          )}
+                        />
                         <Route
                           path={`/event/${address}/admin/edit`}
                           exact