\r\n
\r\n )\r\n}\r\n\r\nexport default TextEditor\r\n","import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faCloudDownloadAlt, faPlusCircle, faTimesCircle, faTimes } from '@fortawesome/free-solid-svg-icons'\r\nimport { useContext, useEffect, useState } from 'react'\r\nimport TextEditor from './TextEditor'\r\nimport Files from 'react-files';\r\nimport { BroadCastContext } from '../../contexts/BroadCastContext';\r\n\r\n\r\nfunction WYSIWYG() {\r\n\r\n // TEXTAREA\r\n const {textContents, setTextContents, files, setFiles, filesError, setFilesError, textContentsError, activeContent, setActiveContent} = useContext(BroadCastContext)\r\n\r\n \r\n function addContent(){\r\n setTextContents(c => [...c, \"\"])\r\n }\r\n \r\n function removeContent(index){\r\n console.log(index);\r\n setActiveContent(0)\r\n setTextContents(c => c.filter((e,i) => i!==index))\r\n }\r\n\r\n function toJSX(textContent){\r\n // teplace \\n ke \r\n 😄\r\n handleStyle('*')} >B\r\n handleStyle('_')} >I\r\n handleStyle('~')} >S\r\n Nama\r\n Break\r\n
\r\n \r\n \r\n
\r\n \r\n let value = textContent;\r\n value = value.replace(new RegExp('\\r?\\n','g'), '
');\r\n\r\n // replace whatsapp style ke html style\r\n // html formatter\r\n const htmlFormat = [\r\n { symbol: '*', tag: 'b' },\r\n { symbol: '_', tag: 'em' },\r\n { symbol: '~', tag: 'del' },\r\n { symbol: '`', tag: 'code' },\r\n ];\r\n\r\n htmlFormat.forEach(({ symbol, tag }) => {\r\n if(!value) return;\r\n\r\n const regex = new RegExp(`\\\\${symbol}([^${symbol}]*)\\\\${symbol}`, 'gm');\r\n const match = value.match(regex);\r\n if(!match) return;\r\n\r\n match.forEach(m => {\r\n let formatted = m;\r\n for(let i=0; i<2; i++){\r\n formatted = formatted.replace(symbol, `<${i > 0 ? '/' : ''}${tag}>`);\r\n }\r\n value = value.replace(m, formatted);\r\n });\r\n });\r\n \r\n return value\r\n }\r\n //END TEXTAREA\r\n\r\n\r\n // FILES\r\n const [featuredImage, setFeaturedImage] = useState('')\r\n\r\n function onFilesChange(files){\r\n setFiles(() => [...files])\r\n }\r\n \r\n function onFilesError(error, file){\r\n switch (error.code) {\r\n case 2:\r\n setFilesError('ukuran file terlalu besar!!!')\r\n setTimeout(() => {\r\n setFilesError(\"\")\r\n }, 3000);\r\n break;\r\n case 4:\r\n setFilesError('maksimal 5 file')\r\n setTimeout(() => {\r\n setFilesError(\"\")\r\n }, 3000);\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n function handleDelete(id){\r\n setFiles(c => c.filter(file => file.id !== id))\r\n }\r\n\r\n\r\n useEffect(() => {\r\n if(files.length){\r\n const imagesFormat = [\"jpg\", \"jpeg\", \"png\"];\r\n if(imagesFormat.includes(files[0].extension)){\r\n files[0].arrayBuffer()\r\n .then(buffer => {\r\n const blob = new Blob( [ buffer ] );\r\n const url = URL.createObjectURL( blob );\r\n setFeaturedImage(url)\r\n })\r\n }else{\r\n setFeaturedImage('')\r\n }\r\n }\r\n }, [files])\r\n \r\n // END FILES\r\n\r\n return (\r\n <>\r\n
Pesan
\r\n\r\n \r\n \r\n \r\n
\r\n\r\n \r\n
\r\n Upload File (gambar, video, dokumen)
\r\nMax 5 file & Max 50.0 MB per file
\r\n\r\n {filesError && handleDelete(file.id)} size=\"lg\" /> \r\n })\r\n }\r\n
\r\n \r\n {filesError}
}\r\n {\r\n !files.length ?tidak ada file yang dipilih...
: files.map((file,i) => {\r\n return {file.name}\r\n
\r\n \r\n {textContentsError && (\r\n \r\n
\r\n \r\n {textContents.map((item, index) => {\r\n return (\r\n
\r\n \r\n \r\n {index ? removeContent(index)} /> : undefined}\r\n
\r\n )\r\n })}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Preview Pesan
\r\n \r\n {(files.length && featuredImage) ? 
: \"\"}\r\n {textContents[activeContent]?.split(\"===\").map((e, i) => (\r\n
\r\n \r\n \r\n
\r\n ))}\r\n {textContentsError}
\r\n )}\r\n \r\n )\r\n}\r\n\r\nexport default WYSIWYG\r\n","import React from 'react'\r\n\r\nfunction Heading({judul, deskripsi}) {\r\n return (\r\n\r\n
\r\n )\r\n}\r\n\r\nexport default Heading\r\n","import React, { useContext} from 'react'\r\nimport DatePicker from \"react-datepicker\";\r\nimport { addDays } from 'date-fns';\r\n\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport { BroadCastContext } from '../../contexts/BroadCastContext';\r\n\r\n\r\nfunction TanggalKirim() {\r\n\r\n const {sendNow, setSendNow, schedule, setSchedule, scheduleError} = useContext(BroadCastContext)\r\n\r\n function changeScheduleName(e){\r\n const name = e.target.value.replace( / +/g, ' ' );\r\n setSchedule(c => ({...c, name}))\r\n }\r\n\r\n return (\r\n {judul}
\r\n \r\n{deskripsi}
\r\n\r\n
\r\n )\r\n}\r\n\r\nexport default TanggalKirim\r\n","import React, { useContext } from 'react'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faBullhorn } from '@fortawesome/free-solid-svg-icons'\r\nimport { BroadCastContext } from '../../contexts/BroadCastContext'\r\n\r\n\r\nfunction StartBroadcast() {\r\n\r\n const {startBroadcast} = useContext(BroadCastContext)\r\n\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport default StartBroadcast\r\n","import React from 'react'\r\n\r\nfunction LoadingMainContent() {\r\n return (\r\n Tanggal Kirim
\r\n\r\n setSendNow(c => !c)} checked={sendNow || false}/>\r\n Kirim Sekarang\r\n
\r\n \r\n
\r\n {scheduleError && (\r\n \r\n setSchedule(c => ({...c, date}))}\r\n minDate={new Date()}\r\n maxDate={addDays(new Date(), 90)}\r\n isClearable={true}\r\n disabled={sendNow}\r\n withPortal\r\n />\r\n
\r\n \r\n \r\n \r\n {scheduleError}\r\n
\r\n )}\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default LoadingMainContent\r\n","import { Link } from 'react-router-dom'\r\nimport Tujuan from './Tujuan'\r\nimport WYSIWYG from './WYSIWYG'\r\nimport Heading from '../Heading'\r\nimport TanggalKirim from './TanggalKirim'\r\nimport StartBroadcast from './StartBroadcast'\r\nimport { useContext } from 'react'\r\nimport { BroadCastContext } from '../../contexts/BroadCastContext'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faFolder } from '@fortawesome/free-regular-svg-icons'\r\nimport LoadingMainContent from '../LoadingMainContent'\r\n\r\n\r\nfunction BroadcastContents() {\r\n\r\n const {loadingBroadcast} = useContext(BroadCastContext)\r\n\r\n return (\r\n \r\n
\r\n Loading...
\r\nLoading...
\r\nLoading...
\r\n\r\n {loadingBroadcast ? (\r\n
\r\n )\r\n}\r\n\r\nexport default BroadcastContents\r\n","import { BroadCastContextProvider } from '../../contexts/BroadCastContext'\r\nimport BroadcastContents from './BroadcastContents'\r\n\r\nfunction BroadcastPage() {\r\n\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n\r\n
\r\n 4 0 4
\r\n Woops!!! Halaman tidak ditemukan...\r\n\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default PageNotFound\r\n","import React, { useEffect, useState } from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faTrash } from '@fortawesome/free-solid-svg-icons';\r\nimport LoadingMainContent from '../LoadingMainContent';\r\n\r\n\r\nfunction JadwalPesan() {\r\n\r\n const [error, setError] = useState(\"\");\r\n const [loading, setLoading] = useState(false);\r\n const [mounted, setMounted] = useState(true);\r\n\r\n const [broadcasts, setBroadcasts] = useState([])\r\n\r\n\r\n async function removeBroadcast(id){\r\n try {\r\n setLoading(true);\r\n\r\n const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/wa/broadcast/${id}`, {\r\n method: 'DELETE',\r\n credentials: 'include'\r\n })\r\n \r\n const res = await req.json();\r\n \r\n if(res.status === 'ok'){\r\n setBroadcasts(c => c.filter(broadcast => broadcast._id !== id))\r\n }\r\n } catch (error) {\r\n setError(error.message)\r\n } finally {\r\n setLoading(false);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n\r\n (async () => {\r\n try {\r\n setLoading(true);\r\n const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/wa/broadcast/?sendNow=false`, {credentials: 'include'});\r\n const res = await req.json();\r\n\r\n if(res.status !== 'ok') throw new Error(res.message);\r\n\r\n if(mounted) setBroadcasts([...res.data]);\r\n\r\n } catch (error) {\r\n setError(error.message);\r\n } finally {\r\n setLoading(false);\r\n }\r\n })()\r\n\r\n\r\n return () => {\r\n setMounted(false)\r\n }\r\n }, [])\r\n\r\n\r\n return (\r\n \r\n 4 0 4
\r\n Woops!!! Halaman tidak ditemukan...\r\n
\r\n\r\n {loading &&
\r\n )\r\n}\r\n\r\nexport default JadwalPesan\r\n","import React from 'react'\r\n\r\nfunction AutoReply() {\r\n return (\r\n error saat mengambil data: {error}
}\r\n\r\n\r\n \r\n \r\n
\r\n
\r\n\r\n | Nama Schedule | \r\nWaktu Kirim | \r\nStatus | \r\n\r\n |
|---|---|---|---|
| \r\n {name} \r\n | \r\n \r\n {`${day}-${month}-${year}, jam ${hour}`} \r\n | \r\n \r\n \r\n {status}\r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n Auto Reply\r\n
\r\n )\r\n}\r\n\r\nexport default AutoReply\r\n","import React, { useEffect, useState } from 'react'\r\nimport LoadingMainContent from '../LoadingMainContent'\r\nimport download from 'downloadjs';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faWhatsapp } from '@fortawesome/free-brands-svg-icons'\r\n\r\n\r\nfunction ScrapeData() {\r\n const [mounted, setMounted] = useState(true)\r\n const [loading, setLoading] = useState()\r\n const [error, setError] = useState(\"\")\r\n const [groups, setGroups] = useState([])\r\n const [textAreaValues, setTextAreaValues] = useState(\"\")\r\n \r\n\r\n async function scrapeWAContact(){\r\n try {\r\n setLoading(true)\r\n\r\n const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/wa/import`, {credentials: 'include'});\r\n const blob = await req.blob();\r\n\r\n\r\n download(blob, \"whatsapp contacts.csv\");\r\n\r\n } catch (error) {\r\n setError(error.message)\r\n } finally {\r\n setLoading(false)\r\n }\r\n }\r\n\r\n function importGroupParticipants(id){\r\n // PR, harus filter by id, bukan by name, kalau by name bisa duplikat karena ada grup dengan nama yang sama\r\n const data = groups.filter(group => group.id === id)[0];\r\n const participants = data.participants.map(participan => participan.id.user);\r\n\r\n setTextAreaValues(participants.join('\\n'))\r\n }\r\n\r\n useEffect(() => {\r\n\r\n (async () => {\r\n try {\r\n setLoading(true)\r\n\r\n const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/wa/groups`, {credentials: 'include'})\r\n const res = await req.json();\r\n\r\n if(res.status !== 'ok') throw new Error(res.message)\r\n\r\n if(mounted) setGroups([...res.data])\r\n\r\n } catch (error) {\r\n setError(error.message)\r\n } finally {\r\n setLoading(false)\r\n }\r\n })()\r\n \r\n return () => {\r\n setMounted(false)\r\n }\r\n }, [])\r\n\r\n\r\n return (\r\n \r\n {loading &&
\r\n )\r\n}\r\n\r\nexport default ScrapeData\r\n","import React from 'react'\r\n\r\nfunction Template() {\r\n return (\r\n Error saat menscrape data, error message: {error}
}\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {groups.map(group => (\r\n
\r\n importGroupParticipants(group.id)}>{group.name}
\r\n ))}\r\n \r\n Tepmlate\r\n
\r\n )\r\n}\r\n\r\nexport default Template\r\n","import React from 'react'\r\n\r\nfunction Pengaturan() {\r\n return (\r\n \r\n Pengaturan\r\n
\r\n )\r\n}\r\n\r\nexport default Pengaturan\r\n","import React, { useEffect, useState } from 'react'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faPlusCircle, faTrashAlt, faEdit } from '@fortawesome/free-solid-svg-icons'\r\nimport { Link } from 'react-router-dom'\r\n\r\n\r\n\r\nfunction Label() {\r\n\r\n const [loading, setLoading] = useState(true)\r\n const [labels, setLabels] = useState([])\r\n const [mounted, setMounted] = useState(true);\r\n\r\n async function removeLabel(id){\r\n const confirm = window.confirm('hapus label?')\r\n if(confirm){\r\n const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/label/${id}`, {\r\n method: 'DELETE',\r\n credentials: 'include'\r\n })\r\n const res = await req.json()\r\n \r\n if(res.status === 'ok'){\r\n const filteredLabels = labels.filter(label => label._id !== id)\r\n if(mounted) setLabels(filteredLabels)\r\n }\r\n }\r\n }\r\n\r\n \r\n useEffect(() => {\r\n async function getLabels(){\r\n try {\r\n const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/label`, {\r\n credentials: 'include'\r\n })\r\n const res = await req.json()\r\n \r\n if(mounted) setLabels(res.data)\r\n } catch (error) {\r\n // do something\r\n } finally {\r\n setLoading(false)\r\n }\r\n }\r\n \r\n getLabels()\r\n\r\n return () => {\r\n setMounted(false)\r\n }\r\n }, [])\r\n\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default Label\r\n","import React, { useEffect, useState } from 'react'\r\nimport Files from 'react-files';\r\nimport readXlsxFile from 'read-excel-file'\r\n\r\n\r\nfunction TambahLabel() {\r\n\r\n const [loading, setLoading] = useState(false)\r\n const [labelName, setLabelName] = useState(\"\")\r\n const [targetContact, setTargetContact] = useState(\"\")\r\n const [successMessage, setSuccessMessage] = useState(\"\")\r\n const [errorMessage, setErrorMessage] = useState([])\r\n const [files, setFiles] = useState([])\r\n const [mounted, setMounted] = useState(true);\r\n\r\n\r\n // ================= handler ===============\r\n\r\n function onFilesChange(files){\r\n setFiles(files)\r\n }\r\n \r\n function onFilesError(error, file){\r\n console.log('error code ' + error.code + ': ' + error.message)\r\n }\r\n\r\n function handleChange(e){\r\n setTargetContact(e.target.value)\r\n }\r\n\r\n function validateTarget(){\r\n const errors = []\r\n const targets = targetContact.split('\\n').filter(target => target)\r\n\r\n targets.forEach(target => {\r\n if(!target.split(',')[0].match(/^(^\\+62|62|^08)(\\d{3,4}-?){2}\\d{3,4}$/g)) errors.push(target)\r\n })\r\n\r\n return errors\r\n }\r\n\r\n function handleSubmit(e){\r\n e.preventDefault()\r\n \r\n // validate if label name or target contacts is empty\r\n if(!labelName || !targetContact) {\r\n setErrorMessage([\"nama label dan daftar kontak wajib diisi\"])\r\n setTimeout(() => {\r\n if(mounted) setErrorMessage([])\r\n }, 5000);\r\n\r\n return\r\n }\r\n\r\n // validate target contacts\r\n let targetErrors = validateTarget();\r\n if(targetErrors.length){\r\n setErrorMessage(targetErrors)\r\n return\r\n }else{\r\n setErrorMessage([])\r\n }\r\n\r\n\r\n // POST data to server\r\n async function createLabel(){\r\n const body = {\r\n name: labelName,\r\n contacts: targetContact.split(\"\\n\").filter(contact => contact)\r\n }\r\n try {\r\n setLoading(true)\r\n\r\n const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/label`, {\r\n headers: {\r\n 'Content-Type': 'application/json'\r\n },\r\n body: JSON.stringify(body),\r\n method: 'POST',\r\n credentials: 'include'\r\n })\r\n const res = await req.json();\r\n\r\n if(res.status !== 'ok') throw new Error(\"fetch status not ok\")\r\n\r\n setSuccessMessage(\"data berhasil ditambahkan\")\r\n setLabelName(\"\")\r\n setTargetContact(\"\")\r\n\r\n } catch (error) {\r\n setErrorMessage(`Wooopps, error saat menambahkan label. Error: ${error.message}`)\r\n } finally {\r\n setLoading(false)\r\n }\r\n }\r\n\r\n createLabel()\r\n \r\n }\r\n\r\n // ================= END handler ===============\r\n\r\n useEffect(() => {\r\n return () => {\r\n setMounted(false)\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n async function readFile(){\r\n const result = await readXlsxFile(files[0])\r\n const targets = result.map(target => {\r\n return target.join(',') + \"\\n\"\r\n })\r\n\r\n setTargetContact(targets.join(''))\r\n }\r\n\r\n if(files.length){\r\n readFile()\r\n }\r\n }, [files])\r\n\r\n return (\r\n | Nama Label | \r\nJumlah Kontak | \r\n\r\n |
|---|---|---|
| loading... | \r\n||
| {label.name} | \r\n{label.contacts.length} | \r\n\r\n \r\n | \r\n
| Nama Label | \r\nJumlah Kontak | \r\n\r\n |
\r\n
\r\n )\r\n}\r\n\r\nexport default TambahLabel\r\n","import React, { useEffect, useState } from 'react'\r\nimport { useParams } from 'react-router-dom'\r\nimport Files from 'react-files';\r\nimport readXlsxFile from 'read-excel-file'\r\n\r\n\r\n\r\nfunction UbahLabel() {\r\n\r\n const [loading, setLoading] = useState(false)\r\n const {id} = useParams()\r\n const [errorMessage, setErrorMessage] = useState(\"\")\r\n const [successMessage, setSuccessMessage] = useState(\"\")\r\n const [label, setLabel] = useState({\r\n name: \"\",\r\n contacts: \"\"\r\n })\r\n const [files, setFiles] = useState([])\r\n const [mounted, setMounted] = useState(true);\r\n\r\n\r\n useEffect(() => {\r\n async function getLabel(){\r\n try {\r\n setLoading(true)\r\n const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/label/${id}`, {\r\n credentials: 'include'\r\n })\r\n const res = await req.json()\r\n \r\n if(res.status !== 'ok') throw new Error('status not ok')\r\n\r\n setLabel(() => {\r\n return {\r\n name: res.data.name,\r\n contacts: res.data.contacts.join('\\n')\r\n }\r\n })\r\n \r\n } catch (error) {\r\n window.location.replace('http://localhost:3000/');\r\n } finally {\r\n setLoading(false)\r\n }\r\n }\r\n\r\n getLabel()\r\n\r\n return () => {\r\n setMounted(false)\r\n }\r\n }, [id])\r\n\r\n useEffect(() => {\r\n async function readFile(){\r\n const result = await readXlsxFile(files[0])\r\n const targets = result.map(target => {\r\n return target.join(',') + \"\\n\"\r\n })\r\n\r\n setLabel(c => ({...c, contacts: targets.join('')}))\r\n }\r\n\r\n if(files.length){\r\n readFile()\r\n }\r\n }, [files])\r\n\r\n // FORM Handler\r\n\r\n function onFilesChange(files){\r\n setFiles(files)\r\n }\r\n \r\n function onFilesError(error, file){\r\n console.log('error code ' + error.code + ': ' + error.message)\r\n }\r\n\r\n function validateTarget(){\r\n const errors = []\r\n const targets = label.contacts.split('\\n').filter(target => target)\r\n\r\n targets.forEach(target => {\r\n if(!target.split(',')[0].match(/^(^\\+62|62|^08)(\\d{3,4}-?){2}\\d{3,4}$/g)) errors.push(target)\r\n })\r\n\r\n return errors\r\n }\r\n\r\n function changeName(e){\r\n setLabel(c => ({...c, name: e.target.value}))\r\n }\r\n\r\n function changeContacts(e){\r\n setLabel(c => ({...c, contacts: e.target.value}))\r\n }\r\n\r\n function handleSubmit(e){\r\n e.preventDefault()\r\n \r\n // validate if label name or target contacts is empty\r\n if(!label.name || !label.contacts) {\r\n setErrorMessage([\"nama label dan daftar kontak wajib diisi\"])\r\n setTimeout(() => {\r\n if(mounted) setErrorMessage([])\r\n }, 5000);\r\n\r\n return\r\n }\r\n\r\n // validate target contacts\r\n let targetErrors = validateTarget();\r\n if(targetErrors.length){\r\n setErrorMessage(targetErrors)\r\n return\r\n }else{\r\n setErrorMessage([])\r\n }\r\n\r\n // POST data to server\r\n async function updateLabel(){\r\n const body = {\r\n name: label.name,\r\n contacts: label.contacts.split(\"\\n\").filter(contact => contact)\r\n }\r\n try {\r\n setLoading(true)\r\n\r\n const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/label/${id}`, {\r\n headers: {\r\n 'Content-Type': 'application/json'\r\n },\r\n body: JSON.stringify(body),\r\n method: 'PATCH',\r\n credentials: 'include'\r\n })\r\n const res = await req.json();\r\n\r\n console.log(res);\r\n\r\n if(res.status !== 'ok') throw new Error(\"fetch status not ok\")\r\n\r\n setSuccessMessage(\"data berhasil diubah\")\r\n\r\n setTimeout(() => {\r\n if(mounted) setSuccessMessage(\"\")\r\n }, 3000);\r\n } catch (error) {\r\n setErrorMessage(`Wooopps, error saat merubah label. Error: ${error.message}`)\r\n } finally {\r\n setLoading(false)\r\n }\r\n }\r\n\r\n updateLabel()\r\n \r\n }\r\n\r\n // END FORM Handler\r\n\r\n return (\r\n Tambah Label
\r\n \r\n\r\n
\r\n )\r\n}\r\n\r\nexport default UbahLabel\r\n","import { useEffect, useState } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport Heading from \"../Heading\";\r\nimport Pagination from 'rc-pagination';\r\nimport 'rc-pagination/assets/index.css';\r\n\r\nconst locale = {\r\n // Options.jsx\r\n items_per_page: '/ page',\r\n jump_to: 'Loncat ke halaman:',\r\n jump_to_confirm: 'confirm',\r\n page: '',\r\n // Pagination.jsx\r\n prev_page: 'Previous Page',\r\n next_page: 'Next Page',\r\n prev_5: 'Previous 5 Pages',\r\n next_5: 'Next 5 Pages',\r\n prev_3: 'Previous 3 Pages',\r\n next_3: 'Next 3 Pages'\r\n}\r\n\r\nfunction LaporanBroadcast() {\r\n const [loading, setLoading] = useState(true)\r\n const [error, setError] = useState(\"\")\r\n const [mounted, setMounted] = useState(true)\r\n\r\n // state for broadcasts data\r\n const [broadcasts, setBroadcasts] = useState([])\r\n const [totalBroadcasts, setTotalBroadcasts] = useState(0)\r\n\r\n // state for pagonation\r\n const [page, setPage] = useState(1)\r\n const [limit, setLimit] = useState(5)\r\n\r\n function handlePagination(current, pageSize) {\r\n setPage(current)\r\n }\r\n\r\n useEffect(() => {\r\n async function getData(){\r\n try {\r\n setLoading(true)\r\n\r\n const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/wa/broadcast?limit=${limit}&page=${page}&fields=name,contacts,status`,{\r\n method: 'GET',\r\n credentials: 'include'\r\n })\r\n \r\n const res = await req.json()\r\n\r\n if(res.status !== 'ok') throw new Error('status not ok')\r\n\r\n if(mounted){\r\n setBroadcasts([...res.data])\r\n setTotalBroadcasts(res.totalData)\r\n }\r\n\r\n } catch (error) {\r\n mounted && setError(error.message)\r\n } finally {\r\n mounted && setLoading(false)\r\n }\r\n }\r\n\r\n getData()\r\n }, [limit, page])\r\n\r\n\r\n return (\r\n Ubah Label
\r\n \r\n\r\n \r\n \r\n \r\n
\r\n\r\n {/* pagination */}\r\n
\r\n )\r\n}\r\n\r\nexport default LaporanBroadcast","import { useEffect, useState } from \"react\"\r\nimport { Link, useParams } from \"react-router-dom\"\r\nimport Heading from \"../Heading\"\r\n\r\n\r\nfunction StatusLaporanBroadcast() {\r\n\r\n const {id} = useParams()\r\n const [loading, setLoading] = useState(true)\r\n const [data, setData] = useState({})\r\n const [error, setError] = useState(\"\")\r\n\r\n useEffect(() => {\r\n async function getData(){\r\n try {\r\n setLoading(true)\r\n\r\n const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/wa/broadcast/${id}`,{\r\n method: 'GET',\r\n credentials: 'include'\r\n })\r\n \r\n const res = await req.json()\r\n\r\n if(res.status !== 'ok') throw new Error('status not ok')\r\n\r\n setData({...res.data})\r\n } catch (error) {\r\n setError(error.message)\r\n console.log(\"❌ failed fetch GET broadcasts/:id, error:\")\r\n console.log(error)\r\n } finally {\r\n setLoading(false)\r\n }\r\n }\r\n\r\n getData()\r\n }, [])\r\n\r\n return (\r\n \r\n Kembali\r\n
\r\n | Nama Broadcast | \r\nKontak | \r\nStatus | \r\n
|---|---|---|
| loading... | \r\n||
| {broadcast.name || 'tanpa nama'} | \r\n{broadcast.contacts.length} | \r\n{status} | \r\n
\r\n
\r\n \r\n \r\n {data.success.map((e, i) => \r\n {data.failed.map((e, i) =>
\r\n )\r\n}\r\n\r\nexport default StatusLaporanBroadcast\r\n","import {Switch, Route} from 'react-router-dom'\r\nimport BroadcastPage from \"./broadcast/BroadcastPage\"\r\nimport PageNotFound from \"./pagenotfound/PageNotFound\"\r\nimport JadwalPesan from './jadwal_pesan/JadwalPesan'\r\nimport AutoReply from './auto_reply/AutoReply'\r\nimport ScrapeData from './scrape_data/ScrapeData'\r\nimport Template from './template/Template'\r\nimport Pengaturan from './pengaturan/Pengaturan'\r\nimport Label from \"./label/Label\"\r\nimport TambahLabel from './label/TambahLabel'\r\nimport UbahLabel from './label/UbahLabel'\r\nimport LaporanBroadcast from './broadcast/LaporanBroadcast'\r\nimport StatusLaporanBroadcast from './broadcast/StatusLaporanBroadcast'\r\n\r\n\r\nfunction Main() {\r\n\r\n return (\r\n \r\n Kembali\r\n
\r\n {!loading && !error ? (\r\n <>\r\n {e}
)}\r\n\r\n \r\n\r\n{e}
)}\r\n\r\n \r\n ) : null}\r\n\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Main\r\n","import { createContext, useContext, useEffect, useState } from \"react\";\r\nimport { AuthContext } from \"./AuthContext\";\r\nimport {io} from 'socket.io-client'\r\n\r\n\r\nexport const WAAuthContext = createContext()\r\n\r\nexport function WAAuthProvider(props){\r\n\r\n const [isWaConnected, setIsWaConnected] = useState(false);\r\n const {loggedInUser} = useContext(AuthContext)\r\n const [loading, setLoading] = useState(true)\r\n const [socket, setSocket] = useState(undefined)\r\n\r\n\r\n async function checkWAConnection(){\r\n try {\r\n console.log('checking wa connection 🔁');\r\n\r\n setLoading(true);\r\n if(!loggedInUser) return;\r\n\r\n const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/wa/checkconnection`, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json'\r\n },\r\n credentials: 'include',\r\n body: JSON.stringify({\"clientid\": loggedInUser._id})\r\n })\r\n const res = await req.json()\r\n\r\n if(res.status !== 'ok'){\r\n console.log(\"status not ok, reinit wa 🔁\");\r\n\r\n setIsWaConnected(false)\r\n fetch(`${process.env.REACT_APP_SERVER_URL}/wa/init`, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json'\r\n },\r\n credentials: 'include',\r\n body: JSON.stringify({\"id\": loggedInUser._id})\r\n })\r\n .then(data => {\r\n return data.json()\r\n })\r\n .then(data => {\r\n console.log('reinit wa', data);\r\n console.log('success reinit wa');\r\n })\r\n .catch(err => {\r\n console.log('failed reinit wa');\r\n })\r\n }else{\r\n setIsWaConnected(true)\r\n }\r\n } catch (error) {\r\n setIsWaConnected(false)\r\n } finally {\r\n setLoading(false)\r\n }\r\n\r\n }\r\n\r\n useEffect(() => {\r\n checkWAConnection()\r\n }, [])\r\n\r\n\r\n // jika user sudah login, lakukan koneksi ke socket server\r\n useEffect(() => {\r\n if(loggedInUser !== null){\r\n console.log('logged in');\r\n if(!socket){\r\n setSocket(() => io(process.env.REACT_APP_SERVER_URL))\r\n }\r\n }\r\n\r\n // @TODO: tambah cleanup function untuk menghapus/destroy socket connection\r\n \r\n }, [loggedInUser])\r\n\r\n\r\n /*jika socket sudah terhubung, lakukan hal berikut:\r\n 1. cek apakah wa sudah terhubung, jika belum lakukan ini:\r\n a. redirect ke halaman full loading\r\n b. jika socket menerima event qr, tampilkan gambar scan qr\r\n c. jika socket menerima event ready, set iswaconnected true dan arahkan ke menu utama\r\n 2. lakukan event berikut ini:\r\n a. saat wa disconnected\r\n b. saat wa unauthorized\r\n */\r\n useEffect(() => {\r\n if(socket !== undefined){\r\n socket.on('connect', () => {\r\n console.log('connected to the socket server');\r\n })\r\n\r\n if(isWaConnected === true){\r\n socket.onAny((eventName, data) => {\r\n if(data.to === loggedInUser._id){\r\n switch (eventName) {\r\n case 'wa-disconnected':\r\n window.location.reload()\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n })\r\n }\r\n \r\n }\r\n \r\n }, [socket, isWaConnected])\r\n \r\n\r\n\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Alert\r\n","import { useContext, useEffect, useState } from \"react\"\r\nimport qr from 'qrcode'\r\nimport Alert from \"../notifications/Alert\"\r\nimport { WAAuthContext } from \"../../contexts/WAAuthContext\"\r\nimport { AuthContext } from \"../../contexts/AuthContext\"\r\n\r\n\r\nfunction QRCode() {\r\n\r\n const [qrUrl, setQrUrl] = useState(\"\")\r\n const [errorMessage, setErrorMessage] = useState(\"\")\r\n const {loading, socket, isWaConnected, setIsWaConnected} = useContext(WAAuthContext)\r\n const {loggedInUser} = useContext(AuthContext)\r\n\r\n function watchEmit(socket){\r\n\r\n socket.onAny((eventName, data) => {\r\n if(data.to === loggedInUser._id){\r\n switch (eventName) {\r\n case 'qr':\r\n qr.toDataURL(data.data)\r\n .then(url => {\r\n setQrUrl(url)\r\n })\r\n break;\r\n case 'wa-ready':\r\n setIsWaConnected(true)\r\n break;\r\n case 'qr-failed':\r\n setErrorMessage('scan QR gagal, reload untuk scan QR lagi')\r\n break;\r\n case 'wa-auth-failure':\r\n setErrorMessage('gagal menghubungkan akun whatsapp, reload untuk scan QR lagi')\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n if((!loading && socket) && (isWaConnected === false)){\r\n watchEmit(socket)\r\n }\r\n\r\n return () => {\r\n if(!loading && socket){\r\n socket.removeAllListeners(['qr', 'wa-ready', 'qr-failed']);\r\n }\r\n }\r\n }, [loading])\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default QRCode\r\n","import { createContext, useContext, useEffect, useState } from \"react\";\r\nimport { AuthContext } from \"./AuthContext\";\r\nimport { WAAuthContext } from \"./WAAuthContext\";\r\n\r\nexport const WADataContext = createContext()\r\n\r\nexport const WADataProvider = props => {\r\n\r\n const {isWaConnected} = useContext(WAAuthContext)\r\n const [loading, setLoading] = useState(true)\r\n const [contacts, setContacts] = useState({\r\n \"length\": 0,\r\n \"data\": []\r\n })\r\n\r\n useEffect(() => {\r\n if(!isWaConnected) return;\r\n\r\n // async function getContacts(){\r\n // try {\r\n // setLoading(true)\r\n\r\n // const req = await fetch(`${process.env.REACT_APP_SERVER_URL}/wa/contact?clientid=${loggedInUser._id}`)\r\n // const res = await req.json()\r\n\r\n // if(res.status !== 'ok') throw new Error('status not ok, failed fetch wa contact')\r\n\r\n // const contactsData = res.data.filter(contact => {\r\n // return contact.id.server === \"c.us\" && contact.isGroup === false && contact.isWAContact === true && contact.isBusiness === false && contact.isBlocked === false && contact.isMe === false\r\n // })\r\n\r\n // setContacts({\r\n // length: contactsData.length,\r\n // data: contactsData\r\n // })\r\n\r\n // } catch (error) {\r\n // console.log('❌ failed fetch contact');\r\n // console.log(error);\r\n // } finally {\r\n // setLoading(false)\r\n // }\r\n // }\r\n\r\n // getContacts()\r\n\r\n }, [isWaConnected])\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Sebelum ngebacot, scan QR dulu kak...
\r\n\r\n 
\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default SidebarMenu\r\n","import SidebarMenu from \"./components/SidebarMenu\";\r\nimport {BrowserRouter as Router} from 'react-router-dom'\r\nimport Main from './components/Main'\r\nimport {ThemeContext} from './contexts/ThemeContext'\r\nimport { useContext } from \"react\";\r\nimport { WAAuthContext } from \"./contexts/WAAuthContext\";\r\nimport QRCode from \"./components/authentication/QRCode\";\r\nimport { WADataProvider } from \"./contexts/WADataContext\";\r\nimport AccountInformation from './components/AccountInformation';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faBars } from '@fortawesome/free-solid-svg-icons';\r\n\r\n\r\nfunction MainPage() {\r\n\r\n const {showSidebar, setShowSidebar, showPopup, setShowPopup, popupMessage} = useContext(ThemeContext)\r\n const {isWaConnected} = useContext(WAAuthContext)\r\n\r\n return !isWaConnected ? \r\n 
\r\n
\r\n \r\n
\r\n {name}
\r\n{phoneNumber}
\r\n \r\n\r\n
}\r\n {/* end popup */}\r\n \r\n
\r\n {popupMessage}
\r\n\r\n \r\n
\r\n \r\n {showSidebar &&
\r\n \r\n
}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Login\r\n","import React from 'react'\r\n\r\nfunction Loading() {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n {errorMessage &&
\r\n \r\n \r\n \r\n ![\"logo\"/](\"/logo.png\")
\r\n
\r\n \r\n \r\n \r\n
\r\n Bacotin
\r\nAyo masuk dan mulai ngebacot...
\r\n\r\n ![\"loading...\"](\"/loading.jpg\")
\r\n
\r\n )\r\n}\r\n\r\nexport default Loading\r\n","import { useContext } from \"react\";\r\nimport { AuthContext } from \"./contexts/AuthContext\";\r\nimport MainPage from \"./MainPage\";\r\nimport Login from './components/authentication/Login'\r\nimport Loading from \"./components/Loading\";\r\nimport {ThemeContextProvider} from './contexts/ThemeContext'\r\nimport { WAAuthProvider } from \"./contexts/WAAuthContext\";\r\n\r\n\r\nfunction App() {\r\n\r\n const {loggedInUser, loading} = useContext(AuthContext)\r\n\r\n return (\r\n loading ? \r\n