Skip to content

feat: creator insights platform #211

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 17, 2024
Merged

feat: creator insights platform #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"next": "^14.0.2",
"next-pwa": "^5.6.0",
"next-remove-imports": "^1.0.12",
"node-fetch": "^2.6.7",
"postcss-focus-visible": "^6.0.4",
"puppeteer": "^22.0.0",
"react": "18.2.0",
Expand Down Expand Up @@ -80,15 +81,14 @@
"react-transition-group": "^4.4.5",
"react-visibility-sensor": "^5.1.1",
"reactjs-popup": "^2.0.5",
"recharts": "^2.5.0",
"recharts": "^2.12.7",
"simplemde": "^1.11.2",
"socket.io-client": "^4.7.4",
"stripe": "^13.9.0",
"tailwind-merge": "^2.3.0",
"tailwindcss": "^3.2.1",
"tailwindcss-animate": "^1.0.7",
"xterm": "^5.3.0",
"node-fetch": "^2.6.7"
"xterm": "^5.3.0"
},
"devDependencies": {
"eslint": "8.26.0",
Expand Down
Binary file added public/insightDemo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
90 changes: 87 additions & 3 deletions src/pages/challenges/[...id].jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import Confetti from 'react-confetti';
import { Context } from '@/context';
import { useRef } from 'react';
import WriteupModal from '@/components/WriteupModal';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';


export default function Challenge() {
Expand Down Expand Up @@ -711,7 +712,56 @@ function HintsPage({ cache }) {


function DescriptionPage({ cache, fileIDName, fileIDLink }) {


const { challenge } = cache;

const [solvesData, setSolvesData] = useState([]);
const [creatorMode, setCreatorMode] = useState(false); // Add state for creator mode

const [insights, setInsights] = useState({
solves: 0,
attempts: 0,
solvesLast30Days: 0,
attemptsLast30Days: 0,
});

useEffect(() => {
const fetchSolvesData = async () => {
try {
const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/${challenge.id}/insights/solvesLast10Days`, 'GET', null);
setSolvesData(response);
console.log(response);
} catch (error) {
console.error('Failed to fetch solves data: ', error);
}
};

const fetchCreatorMode = async () => {
try {
const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account`, 'GET', null);
setCreatorMode(response.creatorMode);
console.log(response.creatorMode);
} catch (error) {
console.error('Failed to fetch creator mode: ', error);
}
};

const fetchInsights = async () => {
try {
const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/${challenge.id}/insights`, 'GET', null);
setInsights(response);
console.log(response);
} catch (error) {
console.error('Failed to fetch solves data: ', error);
}
};

fetchSolvesData();
fetchInsights();
fetchCreatorMode();
}, [challenge]);

const [challengeData, setChallengeData] = useState(null);
const [authorPfp, setAuthorPfp] = useState(null);
const { username } = useContext(Context);
Expand Down Expand Up @@ -821,8 +871,43 @@ function DescriptionPage({ cache, fileIDName, fileIDLink }) {
) : (
<p>You may need to boot the terminal to see the associated files.</p>
)}


<hr className="border-neutral-700 mt-4"></hr>
{creatorMode && (
<>
<hr className="border-neutral-700 mt-4"></hr>
<div className="w-full mt-10 bg-neutral-700/50 hover:bg-neutral-700/90 duration-100 rounded-sm text-white mx-auto items-center text-blue-500">
<div className="bg-neutral-800/40 px-4 py-1 pb-3">
<h1 className="text-lg mt-2"><i className="fas fa-lightbulb mr-2"></i>Creator Insights</h1>
</div>
<div className="grid grid-cols-4 w-full mt-2 px-5 py-2">
<div>
<h1 className="text-md">Solves</h1>
<p className="text-xl">{insights.solves}</p>
</div>
<div>
<h1 className="text-md">Attempts</h1>
<p className="text-xl">{insights.attempts}</p>
</div>
<div>
<h1 className="text-md">Solves <span className="text-neutral-500 text-sm">(30d)</span></h1>
<p className="text-xl text-white">{insights.solvesLast30Days}</p>
</div>
<div>
<h1 className="text-md">Attempts <span className="text-neutral-500 text-sm">(30d)</span></h1>
<p className="text-xl text-white">{insights.attemptsLast30Days}</p>
</div>
</div>
<br />
<LineChart className="mb-3" width={600} height={300} data={solvesData}>
<XAxis dataKey="date" />
<YAxis />
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
<Line type="monotone" dataKey="solves" stroke="#8884d8" />
</LineChart>
<br />
</div>
</>
)}
</div >
<div className="shrink-0 bg-neutral-800 h-10 w-full"></div>
</>
Expand Down Expand Up @@ -1603,4 +1688,3 @@ function DeleteCommentModal({ isOpen, onClose, onConfirm }) {
</Dialog>
);
}

190 changes: 185 additions & 5 deletions src/pages/create.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import Box from '@mui/material/Box';
import { useRouter } from 'next/router';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { Dialog, Transition } from '@headlessui/react';
import { Fragment } from 'react';

export default function Create() {
const router = useRouter();
Expand Down Expand Up @@ -254,6 +256,52 @@ export default function Create() {
fetchNotifications();
}, []);

const [showCreatorMode, setShowCreatorMode] = useState(null);

const [isEnableModalOpen, setIsEnableModalOpen] = useState(false);
const [isDisableModalOpen, setIsDisableModalOpen] = useState(false);

const handleEnableCreatorMode = async () => {
try {
await request(`${process.env.NEXT_PUBLIC_API_URL}/account/creatorMode`, 'POST', { creatorMode: true });
setIsEnableModalOpen(false);
// Additional logic to enable creator mode
setCreatorMode(true);
setShowCreatorMode(true);
toast.success('Creator mode enabled successfully');
} catch (error) {
console.error('Error enabling creator mode:', error);
toast.error('Failed to enable creator mode');
}
};

const handleDisableCreatorMode = async () => {
try {
await request(`${process.env.NEXT_PUBLIC_API_URL}/account/creatorMode`, 'POST', { creatorMode: false });
setIsDisableModalOpen(false);
setCreatorMode(false);
setShowCreatorMode(true);
toast.success('Creator mode disabled successfully');
} catch (error) {
console.error('Error disabling creator mode:', error);
}
};

const [creatorMode, setCreatorMode] = useState(false);

useEffect(() => {
const fetchCreatorMode = async () => {
try {
const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account`, "GET", null);
setCreatorMode(response.creatorMode);
} catch (error) {
console.error('Error fetching creator mode:', error);
}
};

fetchCreatorMode();
}, []);

return (
<>
<Head>
Expand Down Expand Up @@ -489,7 +537,7 @@ export default function Create() {
)}
</div>

<hr className='mt-4 border-neutral-700'></hr>
<hr className='mt-4 border-neutral-800'></hr>
<div className=" mt-4 pb-4 ">
<div className="flex items-center">
<h1 className="flex-1 text-2xl font-medium text-white">
Expand Down Expand Up @@ -567,8 +615,8 @@ export default function Create() {
</div>


<hr className='mt-4 border-neutral-700'></hr>
<div className=" mt-4 pb-4 ">
<hr className='mt-4 border-neutral-700 hidden'></hr>
<div className=" mt-4 pb-4 hidden ">
<div className="flex items-center">
<h1 className="flex-1 text-2xl font-medium text-white">
<div className="flex">
Expand All @@ -593,7 +641,7 @@ export default function Create() {
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text--white">
Module Name
</th>


<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text--white">
Last Updated
Expand Down Expand Up @@ -643,6 +691,135 @@ export default function Create() {
</div>

<div className=" pr-4 sm:pr-6 lg:flex-shrink-0 lg:border-neutral-700 lg:pr-8 xl:pr-0 ">

<button
className={`mb-4 float-right ${creatorMode ? 'bg-blue-700 hover:bg-blue-700/90' : 'bg-blue-700 hover:bg-blue-700/90'} text-sm shadow-sm px-2 py-1 text-white rounded-sm mr-3`}
onClick={() => creatorMode ? setIsDisableModalOpen(true) : setIsEnableModalOpen(true)}
>
{creatorMode ? 'Disable Creator Mode' : 'Enable Creator Mode'}
</button>


<Transition appear show={isEnableModalOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={() => setIsEnableModalOpen(false)}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child>

<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-lg transform overflow-hidden rounded-2xl bg-neutral-800 p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-white">
Enable Creator Mode <span className='text-sm text-gray-300'> BETA</span>
</Dialog.Title>
<div className="mt-2">
<img src="/insightDemo.png" className='mt-4 mb-4 w-3/4 mx-auto rounded-lg shadow-lg border-none shadow-blur shadow-blue-900/50'></img>
<p className="text-md text-gray-300 mt-3">
Creator mode will allow you to see insights for every challenge on CTFGuide. You're welcome to leverage this data when creating challenges.
<br></br> <br></br>

Are you sure you want to enable creator mode?
</p>
</div>

<div className="mt-4">
<button
type="button"
className="inline-flex justify-center rounded-md border border-transparent bg-blue-900 px-4 py-2 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={handleEnableCreatorMode}
>
Yes, Enable
</button>
<button
type="button"
className="ml-2 inline-flex justify-center rounded-md border border-transparent bg-red-900 px-4 py-2 text-sm font-medium text-white hover:bg-red-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
onClick={() => setIsEnableModalOpen(false)}
>
Cancel
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>

<Transition appear show={isDisableModalOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={() => setIsDisableModalOpen(false)}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child>

<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-neutral-800 p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-white">
Disable Creator Mode
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-300">
Are you sure you want to disable creator mode?
</p>
</div>

<div className="mt-4">
<button
type="button"
className="inline-flex justify-center rounded-md border border-transparent bg-blue-900 px-4 py-2 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={handleDisableCreatorMode}
>
Yes, Disable
</button>
<button
type="button"
className="ml-2 inline-flex justify-center rounded-md border border-transparent bg-red-900 px-4 py-2 text-sm font-medium text-white hover:bg-red-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
onClick={() => setIsDisableModalOpen(false)}
>
Cancel
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>

<div className="pl-6 lg:w-80">
<div className="pt-6 pb-2">
<h2 className="text-2xl text-white ">Challenge Notifications</h2>
Expand Down Expand Up @@ -673,6 +850,9 @@ export default function Create() {
)}
</ul>
</div>



</div>
</div>
</div>
Expand Down Expand Up @@ -711,7 +891,7 @@ export default function Create() {

<br></br>
<br></br>
<hr className='border-neutral-700'></hr>
<hr className='border-neutral-800'></hr>
<br></br>
If you disagree with the changes, please join our <a href='https://discord.gg/bH6gu3HCFF' className='text-blue-500 hover:text-blue-600'><i className='fab fa-discord '></i> Discord</a> and voice your opinion.
<br></br>
Expand Down
Loading