Merge branch 'main' into MiliMade

DSC-AIT-Pune · Oct 8, 2022 · 3b9d0c2 · 3b9d0c2
2 parents 265ea70 + 5539434
commit 3b9d0c2
Show file tree

Hide file tree

Showing 11 changed files with 9,803 additions and 7,471 deletions.
diff --git a/craco.config.js b/craco.config.js
@@ -0,0 +1,24 @@
+const webpack = require("webpack");
+
+module.exports = {
+  webpack: {
+    configure: {
+      resolve: {
+        fallback: {
+          process: require.resolve("process/browser"),
+          zlib: require.resolve("browserify-zlib"),
+          stream: require.resolve("stream-browserify"),
+          util: require.resolve("util"),
+          buffer: require.resolve("buffer"),
+          asset: require.resolve("assert"),
+        },
+      },
+      plugins: [
+        new webpack.ProvidePlugin({
+          Buffer: ["buffer", "Buffer"],
+          process: "process/browser",
+        }),
+      ],
+    },
+  },
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,23 +1,30 @@
-{ 
+{
   "name": "my-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^7.0.0-alpha.0",
+    "@react-pdf/renderer": "^3.0.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
+    "assert": "^2.0.0",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
+    "process": "^0.11.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
+    "stream-browserify": "^3.0.0",
+    "util": "^0.12.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "predeploy": "npm run build",
-   "deploy": "gh-pages -d build",
-
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "deploy": "gh-pages -d build",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

diff --git a/public/index.html b/public/index.html
@@ -10,22 +10,27 @@
       content="TextEdit is a text based utility which can be used to manipulate your text in the way you want"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon" />
-    
+
     <!-- import 'bootstrap/dist/css/bootstrap.min.css'; -->
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
+      crossorigin="anonymous"
+    />
 
     <title>TextEdit</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript>You need make sure to enable JavaScript to run this app</noscript>
     <div id="root"></div>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
+      crossorigin="anonymous"
+    ></script>
   </body>
   <!-- <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script> -->
-
-
-
 </html>
diff --git a/src/App.js b/src/App.js
@@ -10,7 +10,8 @@ import TextForm from './components/TextForm';
 
 
 function App() {
-  const [Mode, setMode] = useState('dark');// whether dark mode is enabled or not 
+  const [Mode, setMode] = useState('light');// whether dark mode is enabled or not
+  const [btntxt, setbtntxt] = useState('Enable Dark Mode');
   const [alert, setAlert] = useState(null)
   const showAlert = (message, type) => {
     setAlert({
@@ -19,7 +20,7 @@ function App() {
     })
     setTimeout(() => {
       setAlert(null);
-    }, 2000);
+    }, 1000);
   }
 
 
@@ -30,6 +31,7 @@ function App() {
       document.getElementById('darkmode-id').style.color='white'
       document.getElementById('darkmode-id').innerText = "Enable LightMode"
       showAlert(" Dark mode has been enabled", "primary");
+
       document.title = 'TextEdit-Dark Mode';
 
     }
@@ -40,17 +42,19 @@ function App() {
       document.getElementById('darkmode-id').style.color='#042743'
       document.getElementById('darkmode-id').innerText = "Enable DarkMode"
       showAlert("Light mode has been enabled", "primary");
+
       document.title = 'TextEdit-Light Mode';
 
+
     }
   }
   return (
     <>
-      <Navbar title="TextEdit" about="About" mode={Mode} toggleMode={toggleMode} />
-      <div className="container" my-3  >
+      <Navbar title="TextEdit" about="About" mode={Mode} toggleMode={toggleMode} btntxt={btntxt} />
+
         <Alert alert={alert} />
-        <strong><TextForm showAlert={showAlert} heading="Enter your text" /></strong>
-      </div>
+        <strong><TextForm showAlert={showAlert} heading="Enter the text Now" /></strong>
+
     </>
   );
 }

diff --git a/src/components/Alert.js b/src/components/Alert.js
@@ -2,14 +2,17 @@ import React from 'react'
 
 function Alert(props) {
     // this complete capitalize fuction just to make first word capital , merely you can ignore this and focus on the main code 
-    const capitalalize = (word) =>{
+    const capitalalize = (word) => {
         const lower = word.toLowerCase();
-        return lower.charAt(0).toUpperCase() + lower.slice(1); 
+        return lower.charAt(0).toUpperCase() + lower.slice(1);
     }
     return (
-        props.alert && <div className={`alert alert-${props.alert.type} alert-dismissible fade show`} role="alert">
-            <strong>{capitalalize(props.alert.type)}</strong> :{props.alert.msg}
-            {/* <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> */}
+        <div style={{ height: '50px' }}>
+            {props.alert && <div> <div className={`alert alert-${props.alert.type} alert-dismissible fade show`} role="alert">
+                <strong>{capitalalize(props.alert.type)}</strong> :{props.alert.msg}
+
+            </div>
+            </div>}
         </div>
     )
 }

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 export default function Navbar(props) {
   return (
-    <nav className={`navbar navbar-expand-lg navbar-${props.Mode} bg-${props.Mode}`}>
+    <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
       <div className="container-fluid">
         <a className="navbar-brand" href="/">{props.title}</a>
         <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -17,9 +17,11 @@ export default function Navbar(props) {
               <a className="nav-link" href="/">{props.about}</a>
             </li>
           </ul>
-          <div className={`form-check form-switch text-${props.Mode==='light'?'black':'white'}`}>
+          <div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
             <input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault" />
-            <label className="form-check-label" htmlfor="flexSwitchCheckDefault" id='darkmode-id'>Enable LightMode</label>
+
+
+            <label className="form-check-label" htmlFor="flexSwitchCheckDefault">{props.btntxt}</label>
           </div> 
         </div>
       </div>

diff --git a/src/components/PDFfile.js b/src/components/PDFfile.js
@@ -0,0 +1,61 @@
+import React from "react";
+import { Page, Text, Image, Document, StyleSheet } from "@react-pdf/renderer";
+import Appletouch from "./photos/apple-touch-icon.png";
+const styles = StyleSheet.create({
+    body: {
+        paddingTop: 35,
+        paddingBottom: 65,
+        paddingHorizontal: 35,
+    },
+    title: {
+        fontSize: 24,
+        textAlign: "center",
+    },
+    text: {
+        margin: 12,
+        fontSize: 14,
+        textAlign: "justify",
+        fontFamily: "Times-Roman",
+    },
+    image: {
+        marginVertical: 15,
+        marginHorizontal: 100,
+    },
+    header: {
+        fontSize: 12,
+        marginBottom: 20,
+        textAlign: "center",
+        color: "grey",
+    },
+    pageNumber: {
+        position: "absolute",
+        fontSize: 12,
+        bottom: 30,
+        left: 0,
+        right: 0,
+        textAlign: "center",
+        color: "grey",
+    },
+});
+
+const PDFfile = (props) => {
+    return (
+        <Document>
+            <Page style={styles.body}>
+                <Text style={styles.header} fixed></Text>
+                <Image style={styles.image} src={Appletouch} />
+                <Text style={styles.text}>
+                    {props.text}
+                </Text>
+                <Text
+                    style={styles.pageNumber}
+                    render={({ pageNumber, totalPages }) =>
+                        `${pageNumber} / ${totalPages}`
+                    }
+                />
+            </Page>
+        </Document>
+    );
+};
+
+export default PDFfile;
diff --git a/src/components/TextForm.js b/src/components/TextForm.js
@@ -1,4 +1,6 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
+import PDFfile from './PDFfile'
+import {PDFDownloadLink} from '@react-pdf/renderer';
 export default function TextForm(props) {
   const [text, setText] = useState("");
   const handleUpClick = () => {
@@ -12,7 +14,7 @@ export default function TextForm(props) {
     setText(newText)
     props.showAlert(" Converted to LowerCase!", "success")
 
-    
+
   }
   const handleclearClick = () => {
     let newText = "";
@@ -30,32 +32,57 @@ export default function TextForm(props) {
     props.showAlert(" Text has been Copied!", "success")
 
   }
-  const handleExtraSpaces = () =>{
+  const finder = () => {
+    let find = document.querySelector('.search').value
+    let replace = document.querySelector('.replace').value
+    let str = text.replace(find, replace)
+    setText(str)
+    props.showAlert(` ${find} replaced with ${replace}`, "success")
+  }
+  const handleExtraSpaces = () => {
     let newText = text.split(/[ ]+/);
     setText(newText.join(" "))
     props.showAlert(" Extra spaces have been removed!", "success")
 
   }
   return (
     <>
-      <div className="container" style={{color: props.Mode==='dark'?'white':'#042743'}}>
+      <div className="container my-2">
         <div className="mb-3">
-          <label for="myBox" className="form-label">{props.heading}</label>
-          <textarea className="form-control" onChange={handleOnChange} value={text} style={{backgroundColor: props.Mode==='dark'?'grey':'white',color:props.Mode==='dark'?'white':'#042743'}} id="myBox" rows="8"></textarea>
+          <label htmlFor="myBox" className="form-label">{props.heading}</label>
+          <textarea className="form-control" onChange={handleOnChange} value={text} id="myBox" rows="8"></textarea>
         </div>
         <button className="btn btn-primary mx-3" onClick={handleUpClick}>convert to uppercase</button>
-        <button className="btn btn-primary mx-3" onClick={handleLoClick}>convert to lowercase</button>
-        <button className="btn btn-primary mx-3" onClick={handleclearClick}>Clear text </button>
+        <button className="btn btn-warning mx-3" onClick={handleLoClick}>convert to lowercase</button>
+        <button className="btn btn-danger mx-3" onClick={handleclearClick}>Clear text </button>
         <button className="btn btn-primary mx-3" onClick={handleCopy}>Copy-Text</button>
-        <button className="btn btn-primary mx-3" onClick={handleExtraSpaces}>Remove extra spaces</button>
+        <button className="btn btn-warning mx-3" onClick={handleExtraSpaces}>Remove extra spaces</button>
+
+        <PDFDownloadLink document={<PDFfile text={text} />} fileName="textEdit.pdf">
+        {({ loading }) => (loading ?  <button className="btn btn-danger mx-3">'Loading document...'</button> :  <button className="btn btn-danger mx-3">Download PDF</button>)}
+        </PDFDownloadLink>
+
+
+
+        <div className="row mt-4 mb-4">
+          <div className="col">
+            <input type="text" className="form-control search" placeholder="Search" />
+          </div>
+          <div className="col">
+            <input type="text" className="form-control replace" placeholder="Replace" />
+          </div>
+        </div>
+        <button className="btn btn-danger mx-2 my-2" onClick={finder}>Search and Replace</button>
+
+
 
       </div>
-      <div className="container my-2" style={{color: props.Mode==='dark'?'white':'black'}}>
-        <h2>Your text summarry</h2>
+      <div className="container my-2">
+        <h2> <span className="badge bg-secondary">Your Text Summary</span></h2>
         <p> {text.split(" ").length} words and {text.length} characters</p>
         <p>{0.008 * text.split(" ").length}Minutes content left </p>
         <h2>Preview</h2>
-        <p>{text.length>0?text:"Enter something in the text box above to preview"}</p>
+        <p>{text.length > 0 ? text : "Enter something in the text box above to preview"}</p>
       </div>
     </>
   )

diff --git a/src/components/photos/apple-touch-icon.png b/src/components/photos/apple-touch-icon.png
diff --git a/src/index.js b/src/index.js
@@ -10,6 +10,7 @@ ReactDOM.render(
   </React.StrictMode>,
   document.getElementById('root')
 );
+// my name is nikita malik
 
 
 reportWebVitals();