Merge pull request #47 from ayann07/main

feat: added guide buttons for all section
PranabKumarSahoo · Jan 22, 2024 · 7b49e20 · 7b49e20
2 parents 402994e + c512b90
commit 7b49e20
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 129 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Sections/CountOfRows/CountOfRows.jsx b/src/Sections/CountOfRows/CountOfRows.jsx
@@ -7,16 +7,16 @@ import OutputBox from '../../Components/CustomComp/OutputBox/OutputBox';
 import Warning from '../../Components/CustomComp/Warning/Warning';
 import {ToastContainer,toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-
+import { countOfRows } from '../../data/guideTexts';
 
 
 export default function CountOfRows() {
     const [wordsInput, setWordsInput] = useState('');
     const [specificWord, setSpecificWord] = useState('');
     const [outputSql, setOutputSql] = useState(null);
     const [warnMsg, setWarnMsg] = useState('');
-
-
+    const [showGuide, setShowGuide] = useState(false);   
+ 
     const handleTextBoxChange = (value) => {
         setWordsInput(value);
     };
@@ -66,6 +66,10 @@ ORDER BY
             setWarnMsg("Please enter something...");
         }
     };
+    const handleGuideButtonClick = () => {
+        setShowGuide(!showGuide);
+        setOutputSql(showGuide ? countOfRows : null); // Clear output if guide is hidden
+      };
     return (
         <div className='count-of-rows-sec'>
             <TextBox textbox_placehold="Enter tables name line by line..." value={wordsInput} onChange={handleTextBoxChange} />
@@ -74,9 +78,11 @@ ORDER BY
             <InputBox input_title="Schema Name" value={specificWord} onchange={handleInputBoxChange} error={true} />
 
             <Button btnText='Submit' onClick={generateSql} />
+            <Button btnText='Guide' onClick={handleGuideButtonClick} />
             <ToastContainer/>
 
             <OutputBox data={outputSql} />
         </div>
     )
 }
+
diff --git a/src/Sections/DropConstraintSec/DropConstraintSec.jsx b/src/Sections/DropConstraintSec/DropConstraintSec.jsx
@@ -5,12 +5,12 @@ import Button from '../../Components/CustomComp/Button/Button'
 import OutputBox from '../../Components/CustomComp/OutputBox/OutputBox'
 import {ToastContainer,toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-
+import { dropConstraint } from '../../data/guideTexts'
 
 export default function DropConstraintSec() {
     const [textBoxValue, setTextBoxValue] = useState('');
     const [outputData, setOutputData] = useState(null)
-
+    const [showGuide, setShowGuide] = useState(false);
     const handleTextBoxChange = (value) => {
         setTextBoxValue(value);
     };
@@ -52,14 +52,19 @@ export default function DropConstraintSec() {
             setOutputData('Please Enter The Key_Constraint...')
         }
     };
+    const handleGuideButtonClick = () => {
+        setShowGuide(!showGuide);
+        setOutputData(showGuide ? dropConstraint : null); // Clear output if guide is hidden
+      };
     return (
         <div className='drop-const-sec'>
             <TextBox textbox_placehold="Enter table & constraint name line by line as per syntax mentioned below...
             {table_name}: {constraint_name}" value={textBoxValue} onChange={handleTextBoxChange} />
 
             <Button btnText='Submit' onClick={handleButtonClick} />
+            <Button btnText='Guide' onClick={handleGuideButtonClick} />
             <ToastContainer/>
             <OutputBox data={outputData} />
         </div>
     )
-}
+}
diff --git a/src/Sections/NthHighest/NthHighest.jsx b/src/Sections/NthHighest/NthHighest.jsx
@@ -6,13 +6,14 @@ import Button from '../../Components/CustomComp/Button/Button';
 import OutputBox from '../../Components/CustomComp/OutputBox/OutputBox';
 import {ToastContainer,toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { nthHighestText } from '../../data/guideTexts';
 
 export default function NthHighest() {
   const [columnName, setColumnName] = useState('');
   const [tableName, setTableName] = useState('');
   const [nthHighest, setNthHighest] = useState('');
   const [outputState, setOutputState] = useState(null);
-
+  const [showGuide, setShowGuide] = useState(false);
   const handleColumnNameChange = (value) => {
     setColumnName(value);
   };
@@ -46,14 +47,18 @@ export default function NthHighest() {
       setOutputState('Please enter values for all inputs.');
     }
   };
-
+  const handleGuideButtonClick = () => {
+    setShowGuide(!showGuide);
+    setOutputState(showGuide ? nthHighestText : null); // Clear output if guide is hidden
+  };
   return (
     <div className='nth-highest'>
       <InputBox input_title='Column Name' value={columnName} onchange={(value) => handleColumnNameChange(value)} error={false} />
       <InputBox input_title='Table Name' value={tableName} onchange={(value) => handleTableNameChange(value)} error={false} />
       <InputBox input_title='Nth Highest' value={nthHighest} onchange={(value) => handleNthHighestChange(value)} error={false} />
 
       <Button btnText='Submit' onClick={generateSelectStat} />
+      <Button btnText='Guide' onClick={handleGuideButtonClick} />
       <ToastContainer/>
       <OutputBox data={outputState} />
     </div>

diff --git a/src/Sections/NthMinimum/NthMinimum.jsx b/src/Sections/NthMinimum/NthMinimum.jsx
@@ -1,16 +1,15 @@
 import React, { useState } from 'react';
 import './NthMinimum.css';
-import TextBox from '../../Components/CustomComp/TextBox/TextBox';
 import InputBox from '../../Components/CustomComp/InputBox/InputBox';
 import Button from '../../Components/CustomComp/Button/Button';
 import OutputBox from '../../Components/CustomComp/OutputBox/OutputBox';
-
+import { NthMinimumText } from '../../data/guideTexts';
 export default function NthMinimum() {
   const [columnName, setColumnName] = useState('');
   const [tableName, setTableName] = useState('');
   const [nthMinimum, setnthMinimum] = useState('');
   const [outputState, setOutputState] = useState(null);
-
+  const [showGuide, setShowGuide] = useState(false);
   const handleColumnNameChange = (value) => {
     setColumnName(value);
   };
@@ -52,6 +51,10 @@ export default function NthMinimum() {
       setOutputState('Please enter values for all inputs.');
     }
   };
+  const handleGuideButtonClick = () => {
+    setShowGuide(!showGuide);
+    setOutputState(showGuide ? NthMinimumText : null); // Clear output if guide is hidden
+  };
 
   return (
     <div className='nth-highest'>
@@ -60,8 +63,8 @@ export default function NthMinimum() {
       <InputBox input_title='Nth Highest' value={nthMinimum} onchange={(value) => handleNthMinimumChange(value)} error={false} />
 
       <Button btnText='Submit' onClick={generateSelectStat} />
-
-      <OutputBox data={outputState} />
+      <Button btnText='Guide' onClick={handleGuideButtonClick} />
+      <OutputBox data={outputState}/>
     </div>
   );
-}
+}
diff --git a/src/Sections/SelectStatement/SelectStatement.jsx b/src/Sections/SelectStatement/SelectStatement.jsx
@@ -6,14 +6,14 @@ import Button from '../../Components/CustomComp/Button/Button';
 import OutputBox from '../../Components/CustomComp/OutputBox/OutputBox';
 import {ToastContainer,toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-
+import { SelectStatementText } from '../../data/guideTexts';
 
 export default function SelectStatement() {
     const [wordsInput, setWordsInput] = useState('');
     const [prefixState, setPrefixState] = useState('');
     const [suffixState, setSuffixState] = useState('');
     const [outputState, setOutputState] = useState(null);
-
+    const [showGuide, setShowGuide] = useState(false);
     const handleTextBoxChange = (value) => {
         setWordsInput(value);
     };
@@ -57,7 +57,10 @@ export default function SelectStatement() {
             setOutputState('Please Enter The Tables Name or Middle Statement...');
         }
     }
-
+    const handleGuideButtonClick = () => {
+        setShowGuide(!showGuide);
+        setOutputState(showGuide ? SelectStatementText : null); // Clear output if guide is hidden
+      };
     return (
         <div className='select-stat-sec'>
             <TextBox textbox_placehold="Enter middle statements or tables name line by line..." value={wordsInput} onChange={handleTextBoxChange} />
@@ -69,8 +72,9 @@ export default function SelectStatement() {
             </div>
 
             <Button btnText='Submit' onClick={generateSelectStat} />
+            <Button btnText='Guide' onClick={handleGuideButtonClick} />
             <ToastContainer/>
             <OutputBox data={outputState} />
         </div>
     )
-}
+}