Skip to content

"Fixed theme state issue" #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Joker-Bat wants to merge 1 commit into
base: master
Choose a base branch
from
Open

"Fixed theme state issue" #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
260 changes: 156 additions & 104 deletions src/components/sidebarcom.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,133 +1,185 @@
import React, { useState } from "react";
import { FaBeer,FaPython } from 'react-icons/fa';
import {DiCode, DiJavascript1,DiRust} from 'react-icons/di';
import {GiBrokenHeart} from 'react-icons/gi';
import {AiOutlineFileText,AiFillHeart} from 'react-icons/ai';
import {SiCsharp} from 'react-icons/si';
import CodeMirror from '@uiw/react-codemirror';
import {okaidia} from '@uiw/codemirror-theme-okaidia';
import {sublime} from '@uiw/codemirror-theme-sublime';
import FileSaver, { saveAs } from 'file-saver';
import React, { useEffect, useState } from "react";
import { FaBeer, FaPython } from "react-icons/fa";
import { DiCode, DiJavascript1, DiRust } from "react-icons/di";
import { GiBrokenHeart } from "react-icons/gi";
import { AiOutlineFileText, AiFillHeart } from "react-icons/ai";
import { SiCsharp } from "react-icons/si";
import CodeMirror from "@uiw/react-codemirror";
import { okaidia } from "@uiw/codemirror-theme-okaidia";
import { sublime } from "@uiw/codemirror-theme-sublime";
import FileSaver, { saveAs } from "file-saver";
// const writeFileP = require("write-file-p");

function Sidebar(props) {
const { tabCount } = props;
const {clickblob,changestateblob} = props;
const {textingchan,settextingchan} = props;
let ouputext = '';
Copy link
Owner

@kaushikc44 kaushikc44 Oct 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for sorting this.

const [textin,setextin] = useState("");
const texting = document.querySelector('#textinput');
const {
tabCount,
themestate,
clickblob,
changestateblob,
textingchan,
settextingchan,
} = props;

const [iconstate,seticonstate] = useState(<FaBeer className="w-5 h-5 absolute ml-3 pointer-events-none"/>);
const {themestate} = props;
console.log(themestate);
const themefunc = () =>{
if(themestate === "okaidia"){
console.log("true");
return okaidia
}
else if (themestate === "sublime"){
return sublime
// let ouputext = "";
const [textin, setextin] = useState("");
// const texting = document.querySelector("#textinput");

const [iconstate, seticonstate] = useState(
<FaBeer className="w-5 h-5 absolute ml-3 pointer-events-none" />
);
const [theme, setTheme] = useState(() => {
if (themestate === "okaidia") {
return okaidia;
} else if (themestate === "sublime") {
return sublime;
}
}
return "";
});

let counter = 0;
const [compo, setCompo] = useState(<CodeMirror options={{mode:'javascript', lineNumbers:true}} value="console.log('hello world')"
Copy link
Owner

@kaushikc44 kaushikc44 Oct 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added this to state so I can loop through the multiple instances of it. So if the user clicks on the plus symbol another instance of codemirror will be created and we can have a counter managing each instance.

Copy link
Author

@Joker-Bat Joker-Bat Oct 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for that you have to manage that as an array

height="80vh"
width="170vh"
theme={themefunc()}
onChange={(editor,data,value) => {{setextin(textin + editor)}}} />);
let arrary = [{counter:{key1:iconstate,key2:compo}}]
console.log(themestate);
useEffect(() => {
setTheme(() => {
if (themestate === "okaidia") {
console.log("true");
return okaidia;
} else if (themestate === "sublime") {
return sublime;
}
return "";
});
}, [themestate]);
// const themefunc = () =>{
// if(themestate === "okaidia"){
// console.log("true");
// return okaidia
// }
// else if (themestate === "sublime"){
// return sublime
// }
// }

if(clickblob == true){
var blob = new Blob([textin], {type: "text/plain;charset=utf-8"});
// let counter = 0;
// const [compo, setCompo] = useState(
// <CodeMirror
// options={{ mode: "javascript", lineNumbers: true }}
// value="console.log('hello world')"
// height="80vh"
// width="170vh"
// theme={theme}
// onChange={(editor, data, value) => {
// {
// setextin(textin + editor);
// }
// }}
// />
// );
// let arrary = [{ counter: { key1: iconstate, key2: compo } }];

if (clickblob === true) {
var blob = new Blob([textin], { type: "text/plain;charset=utf-8" });
FileSaver.saveAs(blob, "hello world.txt");
changestateblob(false);
}
// const onChange = () => {
// settextingchan(textingchan + textin);
// }
// console.log("Chaning the text...")
// console.log(textingchan);
}
// const onChange = () => {
// settextingchan(textingchan + textin);
// }
// console.log("Chaning the text...")
// console.log(textingchan);

// writeFileP(`output.txt`, textin, (err, data) => {
// console.log(err || data)});
// const [compo , setCompo] = useState(<CodeMirror />);

// writeFileP(`output.txt`, textin, (err, data) => {
// console.log(err || data)});
// const [compo , setCompo] = useState(<CodeMirror />);
// let varible;

let varible;

const changingfunc = (e) => {
const changingfunc = (e) => {
const value = e.target.value;
//console.log(value);
let array = value.split(".");
console.log(array[1]);
if(array[1] == "txt"){
seticonstate(<AiOutlineFileText className="w-5 h-5 absolute ml-3 pointer-events-none"/>)
}
else if(array[1] === "py" || array[1] === "python"){
seticonstate(<FaPython className="w-5 h-5 absolute ml-3 pointer-events-none" />)
if (array[1] === "txt") {
seticonstate(
<AiOutlineFileText className="w-5 h-5 absolute ml-3 pointer-events-none" />
);
} else if (array[1] === "py" || array[1] === "python") {
seticonstate(
<FaPython className="w-5 h-5 absolute ml-3 pointer-events-none" />
);
} else if (array[1] === "js" || array[1] === "javascript") {
seticonstate(
<DiJavascript1 className="w-5 h-5 absolute ml-3 pointer-events-none" />
);
} else if (array[1] === undefined) {
seticonstate(
<GiBrokenHeart className="w-5 h-5 absolute ml-3 pointer-events-none" />
);
} else if (array[1] === "rs" || array[1] === "rust") {
seticonstate(
<DiRust className="w-5 h-5 absolute ml-3 pointer-events-none" />
);
} else if (array[1] === "c#") {
seticonstate(
<SiCsharp className="w-5 h-5 absolute ml-3 pointer-events-none" />
);
} else {
seticonstate(
<AiFillHeart className="w-5 h-5 absolute ml-3 pointer-events-none" />
);
}
else if(array[1] === "js" || array[1] === "javascript"){
Copy link
Owner

@kaushikc44 kaushikc44 Oct 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

need to understand why did u remove this and add that , is it for alignment ?

Copy link
Author

@Joker-Bat Joker-Bat Oct 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't removed that, check clearly I've just added === instead of ==

seticonstate(<DiJavascript1 className="w-5 h-5 absolute ml-3 pointer-events-none" />)
}
else if (array[1] === undefined ){
seticonstate(<GiBrokenHeart className="w-5 h-5 absolute ml-3 pointer-events-none" />)
}
else if (array[1] === "rs" || array[1] === "rust"){
seticonstate(<DiRust className="w-5 h-5 absolute ml-3 pointer-events-none" />)
}
else if ( array[1] === "c#"){
seticonstate(<SiCsharp className="w-5 h-5 absolute ml-3 pointer-events-none" />)
}
else{
seticonstate(<AiFillHeart className="w-5 h-5 absolute ml-3 pointer-events-none" />)
}

}

};


return (
<aside className="w-64" aria-label="Sidebar">
<div className="overflow-y-auto py-5 px-3 bg-[#2A4867] rounded min-h-[80vh] min-w-[190vh] mr-2 ml-1">
<ul id="unorder" >
{[...Array(tabCount)].map((i) => {


return(

<li className=" flex p-2" key={i}>
return (
<aside className="w-64" aria-label="Sidebar">
<div className="overflow-y-auto py-5 px-3 bg-[#2A4867] rounded min-h-[80vh] min-w-[190vh] mr-2 ml-1">
<ul id="unorder">
{[...Array(tabCount)].map((i) => {
return (
<li className=" flex p-2" key={i}>
<div className="relative flex items-center text-gray-400 focus-within:text-gray-600">
<input type="text" id="textinput" onChange={changingfunc} className="pr-3 pl-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="untitled" />
{/* {arrary.map((value) =>
<input
type="text"
id="textinput"
onChange={changingfunc}
className="pr-3 pl-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="untitled"
/>
{/* {arrary.map((value) =>
{

let values = Object.values(value)
// console.log(values);
return values.map((value) => {return value});
})}; */}

{/* TO ITER THROUGH THE ARRAY AND BE ABLE TO FETCH TEH OBJECT */}
{arrary.map((value) => {
Copy link
Owner

@kaushikc44 kaushikc44 Oct 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how will u loop over the array of instance , without this ?

Copy link
Author

@Joker-Bat Joker-Bat Oct 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are not managing it as array properly, That's why i commented that to work theme part

Copy link
Owner

@kaushikc44 kaushikc44 Oct 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please connect to me via discord killerthief#4626

let values = Object.values(value)
{/* TO ITER THROUGH THE ARRAY AND BE ABLE TO FETCH TEH OBJECT */}
{/* {arrary.map((value) => {
let values = Object.values(value);
return values.map((innervalue) => {
let undervalue = Object.values(innervalue)
return undervalue.map((insidevalue) => {return insidevalue})
})
})}


let undervalue = Object.values(innervalue);
return undervalue.map((insidevalue) => {
return insidevalue;
});
});
})} */}
{iconstate}
<CodeMirror
options={{ mode: "javascript", lineNumbers: true }}
value="console.log('hello world')"
height="80vh"
width="170vh"
theme={theme}
onChange={(editor, data, value) => {
setextin(textin + editor);
}}
/>
);
</div>

</li>
)
}
)}
</ul>
</div>
</aside>
)
</li>
);
})}
</ul>
</div>
</aside>
);
}

export default Sidebar;
export default Sidebar;