diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx index b7aeae9..09ebff2 100644 --- a/src/components/Playground/Playground.tsx +++ b/src/components/Playground/Playground.tsx @@ -1,45 +1,76 @@ 'use client'; import Image from 'next/image'; +import { Dice1, Dice3, Dice5, Info } from 'lucide-react'; + +// Components +import Shell from '@/components/Shell/Shell'; import SearchBox from '@/components/Search/SearchBox'; -import { TerminalUI } from './TerminalUI'; // utils +import { formatTime } from '@/shared/utils/commonUtils'; +import { usePlayground } from './hooks/usePlayground'; export default function Playground() { + const { decreaseCommandsLeft, search, timeLeft, commandsLeft, setSearch } = + usePlayground(); + return (
-
+
+
+ DiceDB logo +

PlayGround

+
+
- +
+
+
+ + + +
+
+
+ +
+
+ +
+
+
+ Cleanup in : {formatTime(timeLeft)} mins +
+
+ Commands left: {commandsLeft} +
+
+
+ +

+ DiceDB instance is shared across all users. +

+
+
+
- +
); } - -function Header() { - return ( -
-
- DiceDB logo -

PlayGround

-
-
- ); -} diff --git a/src/components/Playground/TerminalUI.tsx b/src/components/Playground/TerminalUI.tsx deleted file mode 100644 index 0a0f1bc..0000000 --- a/src/components/Playground/TerminalUI.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Dice1, Dice3, Dice5, Info } from 'lucide-react'; -import Shell from '../Shell/Shell'; -import { formatTime } from '@/shared/utils/commonUtils'; -import { useTimer } from '@/shared/hooks/useTimer'; -import { useState } from 'react'; - -export function TerminalUI() { - const [commandsLeft, setCommandsLeft] = useState(1000); - const decreaseCommandsLeft = () => { - setCommandsLeft((prev) => (prev > 0 ? prev - 1 : 0)); - }; - return ( - <> -
-
-
- - - -
-
-
- -
-
- - - ); -} - -function TerminalCounter({ commandsLeft }: { commandsLeft: number }) { - const { timeLeft } = useTimer(15 * 60); - return ( -
-
-
- Cleanup in : {formatTime(timeLeft)} mins -
-
- Commands left: {commandsLeft} -
-
-
- -

- DiceDB instance is shared across all users. -

-
-
- ); -} diff --git a/src/components/Playground/hooks/usePlayground.ts b/src/components/Playground/hooks/usePlayground.ts new file mode 100644 index 0000000..0f10898 --- /dev/null +++ b/src/components/Playground/hooks/usePlayground.ts @@ -0,0 +1,29 @@ +import { useState, useEffect } from 'react'; + +export const usePlayground = () => { + const [search, setSearch] = useState(''); + const [timeLeft, setTimeLeft] = useState(15 * 60); + const [commandsLeft, setCommandsLeft] = useState(1000); + + useEffect(() => { + const timer = setInterval(() => { + setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0)); + }, 1000); + + return () => clearInterval(timer); + }, []); + + const decreaseCommandsLeft = () => { + setCommandsLeft((prev) => (prev > 0 ? prev - 1 : 0)); + }; + + return { + decreaseCommandsLeft, + search, + timeLeft, + commandsLeft, + setSearch, + setTimeLeft, + setCommandsLeft, + }; +}; diff --git a/src/components/Search/NotFoundPage.tsx b/src/components/Search/NotFoundPage.tsx new file mode 100644 index 0000000..5790123 --- /dev/null +++ b/src/components/Search/NotFoundPage.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +const NotFoundPage = ({ url }: { url: string }) => { + return ( +
+

+ No matching data was found🥺 +

+ +
+

+ Try refining your search or browse the documentation for common + commands. +

+
+ + View Documentation + +
+ ); +}; + +export default NotFoundPage; diff --git a/src/components/Search/SearchBox.tsx b/src/components/Search/SearchBox.tsx index 0a24319..a83b05a 100644 --- a/src/components/Search/SearchBox.tsx +++ b/src/components/Search/SearchBox.tsx @@ -1,18 +1,19 @@ 'use client'; -import { useMemo, useState } from 'react'; +import { SetStateAction, Dispatch } from 'react'; import { Search } from 'lucide-react'; import { DiceCmds, DiceCmdMeta } from '@/data/command'; import CommandPage from './command'; +import NotFoundPage from './NotFoundPage'; -export default function SearchBox() { - const [search, setSearch] = useState(''); - const filteredCommands = useMemo( - () => - Object.values(DiceCmds).filter((cmd: DiceCmdMeta) => - cmd.title.toLowerCase().includes(search.toLowerCase()), - ), - [search], +interface SearchBoxProps { + search: string; + setSearch: Dispatch>; +} + +export default function SearchBox({ search, setSearch }: SearchBoxProps) { + const filteredCommands = Object.values(DiceCmds).filter((cmd: DiceCmdMeta) => + cmd.title.toLowerCase().includes(search.toLowerCase()), ); return ( @@ -30,7 +31,8 @@ export default function SearchBox() {
- {search.length > 1 && + {search.length > 1 ? ( + filteredCommands.length > 0 && filteredCommands.map((cmdMeta) => ( - ))} + )) + ) : ( +

+ Please enter a command with more than one word. +

+ )} + {search.length > 1 && filteredCommands.length === 0 && ( + + )}
); diff --git a/src/components/Search/command.tsx b/src/components/Search/command.tsx index a23e460..07bdaf5 100644 --- a/src/components/Search/command.tsx +++ b/src/components/Search/command.tsx @@ -1,5 +1,3 @@ -'use client'; - import { Clipboard } from 'lucide-react'; import { DiceCmdMeta } from '@/data/command'; import { useState } from 'react'; @@ -16,11 +14,11 @@ export default function CommandPage({ onCopy, }: CommandPageProps) { const [isCopied, setIsCopied] = useState(false); + setIsCopied(true); + setTimeout(() => { + setIsCopied(false); + }, 1000); const handleCopy = () => { - setIsCopied(true); - setTimeout(() => { - setIsCopied(false); - }, 1000); navigator.clipboard.writeText(syntax).then(() => { if (onCopy) { onCopy(); diff --git a/src/shared/hooks/useTimer.ts b/src/shared/hooks/useTimer.ts deleted file mode 100644 index 065ba35..0000000 --- a/src/shared/hooks/useTimer.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useEffect, useState } from 'react'; - -export const useTimer = (timeInSeconds: number) => { - const [timeLeft, setTimeLeft] = useState(timeInSeconds); - useEffect(() => { - const timer = setInterval(() => { - setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0)); - }, 1000); - - return () => clearInterval(timer); - }, []); - - return { - timeLeft, - }; -};