From 18fe13554f6a04c457183ec3a06901b229e06f7a Mon Sep 17 00:00:00 2001 From: RishabhC-137 <60658557+RishabhC-137@users.noreply.github.com> Date: Sat, 5 Oct 2024 22:39:43 +0530 Subject: [PATCH] #35 Refactor repo for consistency (#45) --- ...erfile_Backend => PlaygroundMonoDockerfile | 0 README.md | 71 ++++++++++++++----- docker-compose.dev.yml | 2 +- docker-compose.yml | 11 ++- src/app/page.tsx | 2 +- src/components/Playground/Playground.tsx | 4 +- .../{CLI/CLI.tsx => Shell/Shell.tsx} | 12 ++-- .../{CLI => Shell}/__tests__/index.test.tsx | 10 +-- .../useCli.tsx => Shell/hooks/useShell.tsx} | 10 +-- src/lib/api.ts | 7 +- src/shared/constants/apiEndpoints.ts | 2 +- .../utils/{cliUtils.ts => shellUtils.ts} | 10 +-- 12 files changed, 87 insertions(+), 54 deletions(-) rename Dockerfile_Backend => PlaygroundMonoDockerfile (100%) rename src/components/{CLI/CLI.tsx => Shell/Shell.tsx} (80%) rename src/components/{CLI => Shell}/__tests__/index.test.tsx (94%) rename src/components/{CLI/hooks/useCli.tsx => Shell/hooks/useShell.tsx} (91%) rename src/shared/utils/{cliUtils.ts => shellUtils.ts} (88%) diff --git a/Dockerfile_Backend b/PlaygroundMonoDockerfile similarity index 100% rename from Dockerfile_Backend rename to PlaygroundMonoDockerfile diff --git a/README.md b/README.md index ff418e1..bd5494f 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,14 @@ # DiceDB Playground Web -DiceDB Playground is an interactive platform designed to let users experiment with [DiceDB](https://github.com/dicedb/dice/) commands in a live environment, similar to the Go Playground. -Allows users to search and play with various DiceDB commands in real-time. +DiceDB Playground is an interactive platform designed to let users experiment with [DiceDB](https://github.com/dicedb/dice/) commands in a live environment, similar to the Go Playground. It allows users to search and play with various DiceDB commands in real-time. -This repository hosts frontend service implementation of the Playground. +This repository hosts the frontend service implementation of the Playground. ## Setup Using Docker -``` +To start the playground using Docker, run: + +```bash docker-compose up ``` @@ -15,9 +16,16 @@ docker-compose up Ensure you have the following installed: -- **Node.js** (v16.x or later) +- **Node.js** (v16.13.0 or later) - **Yarn** (or npm) -- **Next.js** (v13.x or later) +- **Next.js** (v14.2.13 or later) + +To ensure you're using the correct Node.js version, you can check or set up the required version using NVM: + +```bash +nvm install 16.13.0 +nvm use 16.13.0 +``` ## Installation @@ -39,11 +47,11 @@ npm run dev This will launch the app on [http://localhost:3000](http://localhost:3000). The app will automatically reload if you make changes to the code. -If you want to bring up backend and DiceDB for local end to end development, follow below steps: +### Setting Up Backend and DiceDB for Local Development -1. Update `docker-compose.yml` file with below code: +1. Update `docker-compose.yml` file with the following code: -```yml +```yaml version: "3.8" services: @@ -64,21 +72,43 @@ services: - DICE_ADDR=dicedb:7379 ``` -2. Run below command to start backend server and DiceDB +2. Run the following command to start the backend server and DiceDB: -```shell +```bash docker-compose up ``` ## Step-by-Step Setup for End-to-End Development with Docker -We have added `Dockerfile.dev` which is for development purposes, ensuring your Next.js application supports hot reloading and reflects code changes without requiring image rebuilds. + +We have added `Dockerfile.dev`, which is for development purposes, ensuring your Next.js application supports hot reloading and reflects code changes without requiring image rebuilds. `docker-compose.dev.yml` configures Docker Compose to build and run your Next.js app in development mode. -```shell +To build and run the development mode: + +```bash docker-compose -f docker-compose.dev.yml up --build ``` +## Prettier Scripts + +To ensure consistent code formatting, we use Prettier. It runs automatically as part of the GitHub workflow, but in case of a workflow failure, you can run Prettier manually. + +### Running Prettier Locally + +To run Prettier and fix formatting issues locally: + +```bash +npm run prettier:format +``` + +This command will format all `.js`, `.jsx`, `.ts`, `.tsx`, `.json`, and `.css` files. + +To check for any formatting issues without fixing them: + +```bash +npm run prettier:check +``` ## Building for Production @@ -94,19 +124,22 @@ After the build is complete, you can start the production server with: npm run start ``` -## Running the test cases +## Running the Test Cases + +To run the test cases, execute the following command: -To run the test cases, execute following command: ```bash npm run test ``` -To execute the test cases simultaneously as you make changes to the files, execute following command: +To execute the test cases simultaneously as you make changes to the files, execute the following command: + ```bash npm run test:watch ``` -To get the test coverage of the project, execute following command: +To get the test coverage of the project, execute the following command: + ```bash npm run test:coverage ``` @@ -120,8 +153,8 @@ The main components of the DiceDB Playground include: Feel free to extend or modify the components to suit your needs. -## How to contribute +## How to Contribute -The Code Contribution Guidelines are published at [CONTRIBUTING.md](CONTRIBUTING.md); please read them before you start making any changes. This would allow us to have a consistent standard of coding practices and developer experience. +The Code Contribution Guidelines are published at [CONTRIBUTING.md](CONTRIBUTING.md); please read them before you start making any changes. This will ensure a consistent standard of coding practices and developer experience. Contributors can join the [Discord Server](https://discord.gg/6r8uXWtXh7) for quick collaboration. diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml index 127a34b..04a797b 100644 --- a/docker-compose.dev.yml +++ b/docker-compose.dev.yml @@ -9,7 +9,7 @@ services: backend: build: context: . - dockerfile: Dockerfile_Backend + dockerfile: PlaygroundMonoDockerfile ports: - "8080:8080" depends_on: diff --git a/docker-compose.yml b/docker-compose.yml index 7e078c1..9b5bc81 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,4 +1,3 @@ -version: '3.8' services: dicedb: @@ -9,20 +8,20 @@ services: backend: build: context: . - dockerfile: Dockerfile_Backend + dockerfile: PlaygroundMonoDockerfile ports: - "8080:8080" depends_on: - - dicedb + - dicedb environment: - DICE_ADDR=dicedb:7379 frontend: build: context: . - dockerfile: Dockerfile + dockerfile: Dockerfile.dev # Specify the correct Dockerfile for the frontend ports: - "3000:3000" depends_on: - - dicedb - - backend + - dicedb + - backend diff --git a/src/app/page.tsx b/src/app/page.tsx index f412349..23bb4f2 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,6 @@ // components import Playground from '@/components/Playground/Playground'; -import Footer from '@/components/Footer/Footer'; // comment this to hide footer +import Footer from '@/components/Footer/Footer'; export default function Home() { return ( diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx index 91bf918..07d15b6 100644 --- a/src/components/Playground/Playground.tsx +++ b/src/components/Playground/Playground.tsx @@ -1,7 +1,7 @@ 'use client'; // Components -import Cli from '@/components/CLI/CLI'; +import Shell from '@/components/Shell/Shell'; import SearchBox from '@/components/Search/SearchBox'; import { Dice1, Dice3, Dice5, Info } from 'lucide-react'; @@ -43,7 +43,7 @@ export default function Playground() {
- +
diff --git a/src/components/CLI/CLI.tsx b/src/components/Shell/Shell.tsx similarity index 80% rename from src/components/CLI/CLI.tsx rename to src/components/Shell/Shell.tsx index c4ad381..96768ee 100644 --- a/src/components/CLI/CLI.tsx +++ b/src/components/Shell/Shell.tsx @@ -1,14 +1,14 @@ -// src/components/CLI/CLI.tsx +// src/components/Shell/Shell.tsx 'use client'; // hooks -import { useCli } from './hooks/useCli'; +import { useShell } from './hooks/useShell'; -interface CliProps { +interface ShellProps { decreaseCommandsLeft: () => void; } -export default function Cli({ decreaseCommandsLeft }: CliProps) { +export default function Shell({ decreaseCommandsLeft }: ShellProps) { const { handleInputChange, handleKeyDown, @@ -16,7 +16,7 @@ export default function Cli({ decreaseCommandsLeft }: CliProps) { inputRef, output, command, - } = useCli(decreaseCommandsLeft); + } = useShell(decreaseCommandsLeft); return (
diff --git a/src/components/CLI/__tests__/index.test.tsx b/src/components/Shell/__tests__/index.test.tsx similarity index 94% rename from src/components/CLI/__tests__/index.test.tsx rename to src/components/Shell/__tests__/index.test.tsx index 7500faa..1fd31f8 100644 --- a/src/components/CLI/__tests__/index.test.tsx +++ b/src/components/Shell/__tests__/index.test.tsx @@ -1,7 +1,7 @@ import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import CLI from '../CLI'; +import Shell from '../Shell'; const decreaseCommandsLeftMock = jest.fn(); @@ -16,10 +16,12 @@ const dummyCommands = [ const setupTest = () => { const user = userEvent.setup(); - const utils = render(); + const utils = render( + , + ); const terminalElement = screen.getByTestId('terminal'); - const cliInputElement = screen.getByTestId('cli-input'); + const cliInputElement = screen.getByTestId('shell-input'); const typeMultipleCommands = async () => { for (const command of dummyCommands) { @@ -36,7 +38,7 @@ const setupTest = () => { }; }; -describe('CLI Component', () => { +describe('Shell Component', () => { it('should focus on terminal element click', async () => { const { terminalElement, cliInputElement, user } = setupTest(); await user.click(terminalElement); diff --git a/src/components/CLI/hooks/useCli.tsx b/src/components/Shell/hooks/useShell.tsx similarity index 91% rename from src/components/CLI/hooks/useCli.tsx rename to src/components/Shell/hooks/useShell.tsx index ddc8a47..153e51a 100644 --- a/src/components/CLI/hooks/useCli.tsx +++ b/src/components/Shell/hooks/useShell.tsx @@ -2,15 +2,15 @@ import { useState, useEffect, useRef, KeyboardEvent, ChangeEvent } from 'react'; // utils -import { handleCommand } from '@/shared/utils/cliUtils'; -import blacklistedCommands from '@/shared/utils/blacklist'; // Assuming you added blacklist here +import { handleCommand } from '@/shared/utils/shellUtils'; +import blacklistedCommands from '@/shared/utils/blacklist'; -export const useCli = (decreaseCommandsLeft: () => void) => { +export const useShell = (decreaseCommandsLeft: () => void) => { // states const [command, setCommand] = useState(''); const [output, setOutput] = useState([]); const [tempCommand, setTempCommand] = useState(''); - //Initialise the command history with sessionStorage + // Initialise the command history with sessionStorage const [commandHistory, setCommandHistory] = useState([]); const [historyIndex, setHistoryIndex] = useState(-1); @@ -40,7 +40,7 @@ export const useCli = (decreaseCommandsLeft: () => void) => { } }, [output]); - //Load initial command history if present + // Load initial command history if present useEffect(() => { const savedHistory = sessionStorage.getItem('terminalHistory'); const commandHistory = savedHistory ? JSON.parse(savedHistory) : []; diff --git a/src/lib/api.ts b/src/lib/api.ts index 91c414f..2fea0c3 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -1,12 +1,12 @@ // src/lib/api.ts -import { CLI_COMMAND_URL } from '@/shared/constants/apiEndpoints'; +import { SHELL_COMMAND_URL } from '@/shared/constants/apiEndpoints'; -export const executeCLICommandOnServer = async ( +export const executeShellCommandOnServer = async ( cmd: string, cmdOptions: object, ): Promise => { try { - const response = await fetch(`${CLI_COMMAND_URL}/${cmd}`, { + const response = await fetch(`${SHELL_COMMAND_URL}/${cmd}`, { method: 'POST', body: JSON.stringify(cmdOptions), headers: { @@ -14,7 +14,6 @@ export const executeCLICommandOnServer = async ( }, }); - // TODO: This needs to be looked at const data = await response.json(); if (Object.prototype.hasOwnProperty.call(data, 'data')) { return data.data; diff --git a/src/shared/constants/apiEndpoints.ts b/src/shared/constants/apiEndpoints.ts index b59071c..1cda3e1 100644 --- a/src/shared/constants/apiEndpoints.ts +++ b/src/shared/constants/apiEndpoints.ts @@ -1,2 +1,2 @@ // This folder will contain or hold constants. For example in this particular file we can store the api endpoints as constants -export const CLI_COMMAND_URL = 'http://localhost:8080/shell/exec'; +export const SHELL_COMMAND_URL = 'http://localhost:8080/shell/exec'; diff --git a/src/shared/utils/cliUtils.ts b/src/shared/utils/shellUtils.ts similarity index 88% rename from src/shared/utils/cliUtils.ts rename to src/shared/utils/shellUtils.ts index 4c09ba8..cfe5fa5 100644 --- a/src/shared/utils/cliUtils.ts +++ b/src/shared/utils/shellUtils.ts @@ -1,6 +1,6 @@ -// src/shared/utils/cliUtils.ts +// src/shared/utils/shellUtils.ts -import { executeCLICommandOnServer } from '@/lib/api'; +import { executeShellCommandOnServer } from '@/lib/api'; import { CommandHandler } from '@/types'; export const handleCommand = async ({ command, setOutput }: CommandHandler) => { @@ -20,7 +20,7 @@ export const handleCommand = async ({ command, setOutput }: CommandHandler) => { try { const [key] = args; const cmdOptions = { key: key }; - result = await executeCLICommandOnServer(cmd, cmdOptions); + result = await executeShellCommandOnServer(cmd, cmdOptions); setOutput((prevOutput) => [...prevOutput, newOutput, result]); } catch (error: unknown) { console.error('Error executing command:', error); @@ -34,7 +34,7 @@ export const handleCommand = async ({ command, setOutput }: CommandHandler) => { const [key, value] = args; try { const cmdOptions = { key: key, value: value }; - result = await executeCLICommandOnServer(cmd, cmdOptions); + result = await executeShellCommandOnServer(cmd, cmdOptions); setOutput((prevOutput) => [...prevOutput, newOutput, result]); } catch (error: unknown) { console.error('Error executing command:', error); @@ -53,7 +53,7 @@ export const handleCommand = async ({ command, setOutput }: CommandHandler) => { const [keys] = args; try { const cmdOptions = { keys: [keys] }; - result = await executeCLICommandOnServer(cmd, cmdOptions); + result = await executeShellCommandOnServer(cmd, cmdOptions); setOutput((prevOutput) => [...prevOutput, newOutput, result]); } catch (error: unknown) { console.error('Error executing command:', error);