Notes

import React, { useState, useRef, useEffect } from "react";
import "./StudentSingleProduct.css";
import "../Sidebar/Sidebar.css"
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
// import 'react-tabs/style/react-tabs.css';
import {
AiOutlineHeart,
AiOutlineEye,
AiOutlineStar,
AiOutlineLinkedin,
} from "react-icons/ai";
import { TbBrandVscode, TbHelpHexagon } from "react-icons/tb";
import axios from "axios";
import { FaCheckCircle } from "react-icons/fa";
// import "./index.js";
import Sidebar from "../Sidebar/Sidebar";
import { SiFuturelearn } from "react-icons/si";
import { BsEye, BsInstagram, BsFillReplyAllFill } from "react-icons/bs";
import { BiLink, BiLogoFacebookCircle, BiPlay } from "react-icons/bi";
import { LiaDownloadSolid } from "react-icons/lia";
import { FiTwitter } from "react-icons/fi";
import { CiFacebook } from "react-icons/ci";
import { useTranslation } from "react-i18next";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/ext-language_tools";
import { useParams } from "react-router";

// import video from "../../assets/imamali.mp4";
import StudentSingleProjectPieChart from "./StudentSingleProjectPieChart";
import TextEditor from "../../TextEditor";
// import open from 'open';
// import { exec } from 'child_process';
import JSZip from "jszip";
import Navbar from "../Navbar/Navbar";

const codeFiles = {
Readme: "var readmeCode = 'Readme file code';",
Home: "var homeCode = 'Home.jsx file code';",
Block: "var blockCode = 'Block.jsx file code';",
// Add more files as needed
};

const FolderItem = ({ item }) => {
return (
<div>
{item.type === "folder" ? (
<>
<div>{item.name}</div>
{item.children.map((child, index) => (
<FolderItem key={index} item={child} />
))}
</>
) : (
<div>{item.name}</div>
)}
</div>
);
};

const StudentSingleProject = () => {
const params = useParams();
const projectName = params.projectName;
let [isSdbropen, setSdbropen] = useState(false);
function handleToggle() {
console.log("yoo");
setSdbropen(!isSdbropen);
}
const [selectedRow, setSelectedRow] = useState(1);
const handleSidebarItemClick = (rowId) => {
setSelectedRow(rowId);
};
const [repoData, setRepoData] = useState([]);
const [fileData, setFileData] = useState([]);
const [contributorsData, setContributorsData] = useState([]);
const [videoLink, setVideoLink] = useState("");
const [commentText, setCommonText] = useState("");
const [loading, setLoading] = useState(false);
useEffect(() => {
const fetchData = async () => {
try {
console.log("hello")
setLoading(true)
const response = await axios.get(
`http://localhost:8800/api/repositories/${projectName}`
);
setLoading(false)
setRepoData(response.data[0]);
setFileData(response.data[0].files);
setContributorsData(response.data[0].contributors);
setVideoLink(response.data[0].video);
} catch (error) {
console.error("Error fetching repository data:", error);
}
};

console.log("hello")
fetchData(); // Call fetchData function immediately inside useEffect
}, []); // Include projectName in the dependency array

const fetchData = async () => {
try {
// Fetch repository data
const response = await axios.get(
`http://localhost:8800/api/repositories/${projectName}`
);
setRepoData(response.data[0]);
setFileData(response.data[0].files);
setContributorsData(response.data[0].contributors);
setVideoLink(response.data[0].video);
// Upload comment
const { name, contributors } = response.data[0]; // Assuming you need repository name and contributors for the comment
const username = "hamza";
const text = commentText;
await axios.post(
`http://localhost:8800/api/repositories/comment`,
{ reponame: name, username, text }
);
} catch (error) {
console.error("Error fetching repository data:", error);
}
};

const handleClick = async (e) => {
const parent = e.target.parentElement;
const fileText = parent.parentElement.parentElement.children[0].children[0];
const fileNameTitle = fileText.innerHTML;
console.log(fileNameTitle);
try {
const response = await axios.get(
`http://localhost:8800/open-vscode/${fileNameTitle}`
);
console.log(response.data);
} catch (error) {
console.error("Error opening VS Code:", error);
}
};
const { t } = useTranslation();
const [currentFile, setCurrentFile] = useState("Home");

const handleFileClick = (fileName) => {
setCurrentFile(fileName);
};

const inputRef = useRef(null);
const [folderStructure, setFolderStructure] = useState([]);
const updateImageDisplay = () => {
console.log("Hi");
const zip = new JSZip();
const files = Array.from(inputRef.current.files);

// files.forEach((file) => {
// zip.file(file.webkitRelativePath, file);
// console.log(file.webkitRelativePath);
// });
const folderStructure = [];
files.forEach((file) => {
zip.file(file.webkitRelativePath, file);
const filePath = file.webkitRelativePath.split("/");
let currentFolder = folderStructure;
filePath.forEach((folderName, index) => {
if (index === filePath.length - 1) {
currentFolder.push({ name: folderName, type: "file" });
} else {
let folder = currentFolder.find(
(item) => item.name === folderName && item.type === "folder"
);
if (!folder) {
folder = { name: folderName, type: "folder", children: [] };
currentFolder.push(folder);
}
currentFolder = folder.children;
}
});
});
setFolderStructure(folderStructure);

zip
.generateAsync({ type: "blob" }, function updateCallback(metadata) {
console.log("progression: " + metadata.percent.toFixed(2) + " %");
if (metadata.currentFile) {
console.log("current file = " + metadata.currentFile);
}
})
.then(function (content) {
console.log(content);
});
};

return (
<div>
{/* <Sidebar isSdbropen={isSdbropen} onItemClick={handleSidebarItemClick} /> */}
<Navbar onClick={handleToggle} />
{loading ? 'Loading..' : <div>
<div className="singleProjHeader">
<div className="iconProjHeader">
<img src="https://media.istockphoto.com/id/1222820573/vector/letter-b-icon.jpg?s=612x612&w=0&k=20&c=wt-kzXAVV1OLr0iVHy-YtKJcz56bkmgpqLTDW33y2fI=" />
</div>
<div className="titleProjHeader">
<h2>{repoData.name}</h2>
<p>{repoData.owner}</p>
{/* <p>Aritficial Intelligence, Web Development</p> */}
<div className="viewDiv">
<AiOutlineEye size="1.3em" />
<p className="views">24,870 views</p>
</div>
</div>
<div className="otherIconsProjHeader">
<AiOutlineHeart className="hoverme" />
<div className="vertical"></div>
<SiFuturelearn className="hoverme" />
</div>
</div>
<Tabs className="tabsDiv">
<TabList className="tabList">
<Tab className="tabName">{t("About")}</Tab>
<Tab className="tabName">{t("Video")}</Tab>
<Tab className="tabName">{t("Report")}</Tab>
<Tab className="tabName">{t("Code")}</Tab>
<Tab className="tabName">{t("Collaborators")}</Tab>
<Tab className="tabName">{t("Documentation")}</Tab>
<Tab className="tabName">{t("Discussion Forums")}</Tab>
<Tab className="tabName">{t("Commit History")}</Tab>
</TabList>

<TabPanel className="tabPanel about">
<div className="aboutDiv">
<div className="leftAboutDiv">
<div className="abstractInfo">
<h3>Abstract</h3>
<p>{repoData.description}</p>
</div>
<div className="deploymentsInfo">
<h3>Deployments</h3>
<div className="links">
<p>
{t("GitHub")} -<a href={repoData.url}> {repoData.url}</a>
{/* {t("GitHub")} -<a href='#'> </a> */}
</p>
</div>
</div>
<div className="langsInfo">
<h3>Technical Stack</h3>

{/* <figure class="pie-chart">
<h2>Languages used to develop the software</h2>
<figcaption>
Javascript<span style={{ color: "#edc949" }}></span>
<br />
HTML<span style={{ color: "#e15759" }}></span>
<br />
CSS<span style={{ color: "#f28e2c" }}></span>
<br />
PHP<span style={{ color: "#4e79a7" }}></span>
<br />
</figcaption>
<cite>Technical Stack</cite>
</figure> */}

<StudentSingleProjectPieChart />
</div>
</div>
<div className="rightAboutDiv">
<h2 style={{ letterSpacing: "2px" }}>INFO</h2>
<div className="starsDiv">
<AiOutlineStar size="1.2em" />
<p>3 {t("stars")}</p>
</div>
<div className="watchingDiv">
<BsEye size="1.2em" />
<p> 1 {t("watching")}</p>
</div>
<div className="downloadsDiv">
<LiaDownloadSolid size="1.2em" />
<p> 4 {t("downloads")}</p>
</div>
<div className="liveDiv">
<BiLink size="1.2em" />
<p> {repoData.url}</p>
</div>
</div>
</div>
</TabPanel>
<TabPanel className="tabPanel video">
<video
width="750"
height="400"
controls
src="https://www.youtube.com/watch?v=CNKG81C_fzE"
type="video/mp4"
autoPlay="true"
></video>
<div className="descVideo">
<h2>Description</h2>
<p>
{t(
"BarterX is an innovative e-commerce platform designed to facilitate the trading and swapping of goods between individuals and businesses without the need for traditional currency. With BarterX, users can exchange goods and services on a peer-to-peer basis, allowing them to acquire what they need while getting rid of what they no longer use or need. The platform incorporates a range of features such as product listings, messaging tools, and a secure payment system to ensure a smooth and successful exchange process between users. BarterX promotes sustainable living, fosters community building, and allows users to save money while reducing their environmental footprint. Whether you’re looking for a new laptop or want to get rid of some old clothes, BarterX is the perfect place to find what you need and get rid of what you don’t."
)}
</p>
</div>
</TabPanel>
<TabPanel className="tabPanel report">
<div>
<h4>REPORT</h4>
<iframe
src="https://docs.google.com/viewer?url=http://www.pdf995.com/samples/pdf.pdf&embedded=true"
frameborder="0"
height="500px"
width="100%"
></iframe>
</div>
</TabPanel>

<TabPanel className="tabPanel code">
<div className="filenamesDIv">
<h3>Project Files</h3>
{fileData.map((fileName) => (
<div className="fileDiv" key={fileName._id}>
<div onClick={() => handleFileClick(fileName)}>
<p>{fileName.fileName}</p>
</div>
<button
className="vscodebutton"
onClick={(e) => handleClick(e)}
>
<TbBrandVscode size={20} />
</button>
</div>
))}
</div>
{/* {fileData.map((fileName) => (

))} */}
{/* <button onClick={(e) => handleClick(e)}>Open in VS Code</button> */}
<AceEditor
height="350px"
width="1000px"
value={currentFile ? currentFile.fileContent : ""}
mode="javascript"
theme="monokai"
fontSize="16px"
highlightActiveLine={true}
setOptions={{
enableLiveAutocompletion: true,
showLineNumbers: true,
tabSize: 2,
enableBasicAutocompletion: true,
enableSnippets: true,
}}
readOnly="true"
/>
</TabPanel>

<TabPanel className="tabPanel collaborators">
<div className="collab">
{/* {contributorsData.map((contributor, index) => (
<div className="profileCard" key={index}>
<div className="imgCard">
<img src="https://cdn-icons-png.flaticon.com/512/1144/1144760.png" />
</div>
<div className="nameCard">
<h2>{contributor}</h2>
</div>
<div className="professCard">
<p>UI/UX Designer</p>
</div>
<div className="aboutCard">
<p>
Lorem ipsum , sit amet sit sit amet sit adipisicing elit.
Quis fugiat totam mollitia, ipsa a officia{" "}
</p>
</div>
<div className="iconsSection">
<div className="iconSec">
<AiOutlineLinkedin size="1.5em" />
</div>
<div className="iconSec">
<FiTwitter size="1.5em" />
</div>
<div className="iconSec">
<BsInstagram size="1.5em" />
</div>
<div className="iconSec">
<BiLogoFacebookCircle size="1.5em" />
</div>
</div>
<div className="buttonsConnect">
<button className="FollowMe">FOLLOW</button>
<button className="MessageMe">MESSAGE</button>
</div>
</div>
))} */}
</div>
</TabPanel>
<TabPanel className="tabPanel documentation">
<h2>Any content 6</h2>
<TextEditor />
</TabPanel>
<TabPanel className="tabPanel discforum">
<div className="forum">
<div className="commentsSec">
{repoData.comments && repoData.comments.map((comment, id)=>(
<div className="commentBody" key={id}>
<div className="commentHeader">
<img src="https://t3.ftcdn.net/jpg/05/53/79/60/360_F_553796090_XHrE6R9jwmBJUMo9HKl41hyHJ5gqt9oz.jpg" />
<h3>{comment.username}</h3>
<p>2d</p>
</div>
<div className="commentPara">
<p>{comment.text}
</p>
</div>
</div>
))}

</div>
<div className="writeComment">
{/* <p>Write A comment</p> */}
<input
type="text"
className="comment"
placeholder="Write a Comment . . ."
value={commentText}
onChange={(e)=>setCommonText(e.target.value)}
/>
<input type="submit" value="submit" className="subBTND" onClick={fetchData} />
</div>
</div>
</TabPanel>
<TabPanel className="tabPanel Commit History">
<h2>Commit History</h2>
{/* <TextEditor/> */}
<table id="commits">
<tr>
<th>Commit</th>
<th>File</th>
<th>Status</th>
<th>Date of Commit</th>
</tr>
<tr>
<td>
<div className="commitDesc">
<FaCheckCircle color="green" size={30} />
<div className="commitDescInfo">
<h2 className="commitTitle">Code #Q871</h2>
<p className="commitTag">
Code updated with responsiveness
</p>
</div>
</div>
</td>
<td>Home.jsx</td>
<td>Success</td>
<td>28th February 2023</td>
</tr>
<tr>
<td>
<div className="commitDesc">
<FaCheckCircle color="green" size={30} />
<div className="commitDescInfo">
<h2 className="commitTitle">Code #Q871</h2>
<p className="commitTag">
Code updated with responsiveness
</p>
</div>
</div>
</td>
<td>Home.jsx</td>
<td>Success</td>
<td>28th February 2023</td>
</tr>
</table>

<input
type="file"
webkitdirectory=""
multiple
onChange={updateImageDisplay}
ref={inputRef}
/>
<div>
{folderStructure.map((item, index) => (
<FolderItem key={index} item={item} />
))}
</div>
</TabPanel>
</Tabs>
</div>}
</div>
);
};

export default StudentSingleProject;