Merge branch 'main' into feature/About_page

AnoshMalik · May 19, 2023 · da91c0a · da91c0a
2 parents 0a87f8c + 7c991dd
commit da91c0a
Show file tree

Hide file tree

Showing 7 changed files with 263 additions and 58 deletions.
diff --git a/client/src/Components/MainContent.js b/client/src/Components/MainContent.js
@@ -15,19 +15,21 @@ const MainContent = ({ user }) => {
 	// const [speechIcon, SetSpeechIcon] = useState("bi bi-pause-circle-fill");
 	const [isIconPaused, setIsIconPaused] = useState(false);
 	const [loadingResponse, SetLoadingResponse] = useState(false);
+	const [saveCounter, SetSaveCounter] = useState(1);
 
 	//const api = process.env.API_URL || "/api"; //for future easier routing to the routes
 
 	//Submit button
 
 	// SPEECH OUTPUT FEATURE
 	useEffect(() => {
+		// console.log(user);
 		const synth = new SpeechSynthesisUtterance();
 		const voices = window.speechSynthesis.getVoices();
 		synth.voice = voices[0];
 		synth.lang = "en-GB";
 		setSynth(synth);
-	}, []);
+	}, [user]);
 
 	// useEffect(() => {
 	// 	// const synth = new SpeechSynthesisUtterance();
@@ -52,24 +54,24 @@ const MainContent = ({ user }) => {
 				synth.text = "Here are your suggestions! " + response;
 			}
 			if (speechToggle % 2 == 0) {
-				console.log("Stopped");
+				// console.log("Stopped");
 				SetSpeechToggle(speechToggle + 1);
 				setIsIconPaused(false);
 
 				window.speechSynthesis.cancel();
 				clearTimeout(timeOutId);
-				console.log("CLEAR TIMEOUT CALLED");
+				// console.log("CLEAR TIMEOUT CALLED");
 			} else {
-				console.log("Playing");
+				// console.log("Playing");
 				SetSpeechToggle(speechToggle + 1);
 				setIsIconPaused(true);
 
 				window.speechSynthesis.speak(synth);
 				// FOLLOWING LINES ARE NEEDED TO STOP CHROME CUTTING AUDIO OFF AFTER 15 SECONDS
 				window.speechSynthesis.pause();
-				console.log("PAUSED");
+				// console.log("PAUSED");
 				window.speechSynthesis.resume();
-				console.log("RESUMED");
+				// console.log("RESUMED");
 
 				// STOPS TEXT FROM LOOPING
 				// synth.onend = () => {
@@ -78,14 +80,14 @@ const MainContent = ({ user }) => {
 				// 	clearTimeout(timeOutId);
 				// };
 				if (window.speechSynthesis.speaking == false) {
-					console.log("Not speaking");
+					// console.log("Not speaking");
 					window.speechSynthesis.cancel();
 					clearTimeout(timeOutId);
 				} else {
-					console.log("Speaking");
+					// console.log("Speaking");
 					let timeId = setTimeout(handleSpeak, 10000);
 					SetTimeOutId(timeId);
-					console.log("SET TIMEOUT CALLED");
+					// console.log("SET TIMEOUT CALLED");
 				}
 			}
 		}
@@ -107,10 +109,10 @@ const MainContent = ({ user }) => {
 		e.preventDefault();
 
 		if (!content) {
-			alert("Add some text");
+			alert("Please add some text");
 			return;
 		} else if (value === content) {
-			alert("update text please");
+			alert("Please update the text");
 		} else {
 			/*let x = onAdd(content);
 			console.log(x);*/
@@ -162,26 +164,47 @@ const MainContent = ({ user }) => {
 
 	// DATABASE --> SENDING
 	const saveHandler = async () => {
-		console.log(user.id);
-		// const github_id = user.id;
-		await fetch("/api/history", {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify({
-				input: content,
-				output: response,
-				user_id: 3,
-			}),
-		})
-			.then((res) => res.json())
-			.then((data) => console.log(data));
+		if (content == "" || response == "") {
+			alert("Please add text and click check");
+			return;
+		} else if (value === content && saveCounter > 1) {
+			alert("Please update text on the left");
+		} else {
+			// console.log(user.id);
+			// const github_id = user.id;
+			await fetch("/api/history", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					input: content,
+					output: response,
+					user_id: user.id,
+				}),
+			})
+				.then((res) => res.json())
+				.then((data) => console.log(data));
+			alert("Saved in History!");
+		}
+		SetSaveCounter(saveCounter + 1);
 	};
 	// DATABASE --> SENDING
 
+	// COPY TO CLIPBOARD
+	async function copyTextToClipboard() {
+		if ("clipboard" in navigator) {
+			await navigator.clipboard.writeText(response);
+			alert("Copied to Clipboard!");
+			return;
+		} else {
+			return document.execCommand("copy", true, response);
+		}
+	}
+	// COPY TO CLIPBOARD
+
 	return (
-		<Container style={{ marginTop: "6%" }}>
+		<Container style={{ marginTop: "3%" }}>
 			<Row>
 				<Col>
 					<Card>
@@ -193,7 +216,11 @@ const MainContent = ({ user }) => {
 										rows={10}
 										placeholder="Write your text here..."
 										value={content}
-										onChange={(e) => setContent(e.target.value)}
+										onChange={(e) => {
+											setContent(e.target.value);
+											setResponse("");
+											SetSaveCounter(1);
+										}}
 										style={{ boxShadow: "0px 5px 10px grey" }}
 									/>
 								</Form.Group>
@@ -336,6 +363,7 @@ const MainContent = ({ user }) => {
 											marginLeft: "2%",
 											boxShadow: "0px 5px 10px grey",
 										}}
+										onClick={copyTextToClipboard}
 									>
 										COPY
 									</Button>

diff --git a/client/src/Components/ProfileIcon.js b/client/src/Components/ProfileIcon.js
@@ -19,7 +19,7 @@ const ProfileIcon = ({ user }) => {
 			>
 				<img
 					crossOrigin="anonymous"
-					src={user ? user.avatar : icon}
+					src={user ? user.name : icon}
 					alt="Icon"
 					style={{
 						width: "35px",

diff --git a/client/src/pages/History.js b/client/src/pages/History.js
@@ -17,14 +17,18 @@ const History = ({ user }) => {
 				`http://localhost:3100/api/history?githubId=${user.id}&search=${search}&sort=${sort}`
 		)
 			.then((response) => response.json())
-			.then((data) => setHistory(data.data))
+			.then((data) => {
+				setHistory(data.data);
+				// console.log(data.data);
+			})
 			.catch((error) => {
 				console.log(error);
 			});
 	};
 
 	useEffect(() => {
 		if (user) {
+			// console.log(user);
 			sendRequest();
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -63,12 +67,12 @@ const History = ({ user }) => {
 				.then((data) => console.log(data));
 		}
 	};
-	// how to create summery of string for ...//
-	const excerpt = (content) => {
+	// show shorter version of long text
+	const shortenText = (content) => {
 		const listOfWords = content.trim().split(" ");
 		const truncatedContent = listOfWords.slice(0, 10).join(" ");
-		const excerpt = truncatedContent + "...";
-		return listOfWords.length > 20 ? excerpt : content;
+		const shortVersion = truncatedContent + "...";
+		return listOfWords.length > 20 ? shortVersion : content;
 	};
 
 	function PopUp(props) {
@@ -182,8 +186,7 @@ const History = ({ user }) => {
 					>
 						{history &&
 							history.map((item, index) => (
-								<button
-									onClick={() => handleModal(item)}
+								<div
 									key={index}
 									style={{
 										display: "block",
@@ -202,7 +205,7 @@ const History = ({ user }) => {
 												fontWeight: "550",
 											}}
 										>
-											{excerpt(item.input)}
+											{shortenText(item.input)}
 										</p>
 										<p
 											className="m-4 fs-5 w-50 "
@@ -212,17 +215,21 @@ const History = ({ user }) => {
 												fontWeight: "500",
 											}}
 										>
-											{excerpt(item.output)}
+											{shortenText(item.output)}
 										</p>
 									</div>
 									<div className="d-flex justify-content-end align-items-center w-100">
+										<button
+											onClick={() => handleModal(item)}
+											className="btn btn-outline-secondary"
+										>
+											Show more
+										</button>
 										<span
 											className="fs-6 mx-2"
 											style={{ fontWeight: "bold", fontFamily: "Lato" }}
 										>
-											{new Date(
-												"2023-05-11 09:26:06.587153+00"
-											).toLocaleString()}
+											{new Date(item.timestamp).toLocaleString()}
 										</span>
 										<button
 											className="py-2 px-0 d-inline-flex align-items-center flex-column justify-content-center m-0 border-0"
@@ -232,7 +239,7 @@ const History = ({ user }) => {
 											<BsX style={{ fontSize: "44px" }} />
 										</button>
 									</div>
-								</button>
+								</div>
 							))}
 					</ul>
 					<PopUp show={modalShow} onHide={() => setModalShow(false)} />

diff --git a/db/db-config.js b/db/db-config.js
@@ -0,0 +1,6 @@
+const knex = require("knex");
+const config = require("../knexfile.js");
+const debe = knex(config.development);
+
+//module.exports = knex(config.development);
+module.exports = debe;
diff --git a/knexfile.js b/knexfile.js
@@ -5,7 +5,8 @@ require("dotenv/config");
  */
 module.exports = {
 	development: {
-		client: "postgresql",
+		//client: "postgresql",
+		client: "pg",
 		connection: {
 			connectionString: process.env.DATABASE_URL,
 			ssl: {