Skip to content

Commit

Permalink
recents
Browse files Browse the repository at this point in the history
  • Loading branch information
ankushKun committed Dec 6, 2023
1 parent 7aca9fc commit 0518d87
Show file tree
Hide file tree
Showing 13 changed files with 450 additions and 127 deletions.
2 changes: 1 addition & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function App() {

return (
<>
<div className='flex w-full'>
<div className='flex max-w-screen'>
{showSidebar && <Sidebar />}
<div className='w-full'>
<Routes>
Expand Down
7 changes: 7 additions & 0 deletions src/assets/cloud.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions src/assets/delete.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/assets/dload.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions src/components/Modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,20 @@ const AddModal = ({ setAddModal, setActiveContract }: { setAddModal: any, setAct
localStorage.setItem("contracts", JSON.stringify(parsed));
dispatchEvent(new Event("contractsUpdated"));
setActiveContract(contractname);
const recents = localStorage.getItem("recents")
if (recents) {
const parsed = JSON.parse(recents)
if (parsed.includes(contractname)) {
parsed.splice(parsed.indexOf(contractname), 1)
parsed.unshift(contractname)
localStorage.setItem("recents", JSON.stringify(parsed))
} else {
parsed.unshift(contractname)
localStorage.setItem("recents", JSON.stringify(parsed))
}
} else {
localStorage.setItem("recents", JSON.stringify([contractname]))
}
setAddModal(false);
}
// to handle the close button
Expand Down
91 changes: 91 additions & 0 deletions src/components/Recents.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { nextArrow, horizontal } from "../assets"
import { contractSrc as src1, stateSrc as sta1 } from "../templates/hello"
import { contractSrc as src2, stateSrc as sta2 } from "../templates/db"
import { contractSrc as src3, stateSrc as sta3 } from "../templates/vote"
import { contractSrc as src4, stateSrc as sta4 } from "../templates/event"
import { contractSrc as src5, stateSrc as sta5 } from "../templates/utoken"
import { Link } from "react-router-dom"
import { useEffect, useState } from "react"

const TemplateTab = ({ name }: { name: string }) => {
return (
<div className="bg-white p-4 hover:scale-105 transition-all duration-300 rounded-[5px] group">
<h1 className=" text-[#616161] pb-2 font-bold ">{name}</h1>
<div className="">
<Link to={`/code?conName=${name}`} className="bg-[#093E49] custom-width flex rounded-[3px] px-2 py-1 hover:w-36 transition-all duration-100 justify-between"
onClick={() => {
let contracts = localStorage.getItem("contracts");
if (!contracts) contracts = "{}";
const parsed = JSON.parse(contracts);
switch (name) {
case "HelloWorld":
parsed[name] = {
"contract.js": src1,
"state.json": sta1,
};
break;
case "CRUD Database":
parsed[name] = {
"contract.js": src2,
"state.json": sta2,
};
break;
case "Voting":
parsed[name] = {
"contract.js": src3,
"state.json": sta3,
};
break;
case "Event creation":
parsed[name] = {
"contract.js": src4,
"state.json": sta4,
};
break;
case "U-Token":
parsed[name] = {
"contract.js": src5,
"state.json": sta5,
};
break;
default:
break;
}
localStorage.setItem("contracts", JSON.stringify(parsed));

}}
>
<div className="min-w-fit">Open</div>
<img src={nextArrow} alt="next arrow" />
</Link>
</div>
</div>
)
}

const Recents = () => {
const [recents, setRecents] = useState([])

useEffect(() => {
const recents = localStorage.getItem("recents")
if (recents) {
const parsed = JSON.parse(recents)
setRecents(parsed)
}
}, [])

return (
<div className="overflow-x-auto pb-10 p-2 flex gap-8 max-w-[81%] ">
{
(recents.filter((e) => e != "").length > 0) ? recents.map((template) => {
if (template) return <TemplateTab
key={template}
name={template} />
}) : <div>No recently opened contracts... Maybe start working on one from templates? ^_^</div>
}
<img className="absolute mt-16 mr-5 bg-invert right-0 " src={horizontal} alt="Scroll" />
</div>
)
}

export default Recents;
41 changes: 21 additions & 20 deletions src/components/Sidebar.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,38 @@
import { useState } from 'react'
import { test, deploy, code, home, browse, personalProjects } from '../assets'
import { Link } from 'react-router-dom'
import cloud from '../assets/cloud.svg'

// links for sidebar naviagtion
export const navlinks = [
{
iconName:"Home",
iconName: "Home",
name: home,
link: "/"
},
{
iconName:"Contracts",
iconName: "Contracts",
name: code,
link: "/code"
},
{
iconName:"Deploy",
iconName: "Deploy",
name: deploy,
link: "/deploy"
},
{
iconName:"Test",
iconName: "Test",
name: test,
link: "/test"
},
,
{
iconName:"Personal Contracts",
name: test,
iconName: "My Cloud",
name: cloud,
link: "/my-projects"
},
{
iconName:"Browse",
iconName: "Browse",
name: browse,
link: "/browse"
}
Expand All @@ -41,19 +42,19 @@ const Sidebar = () => {
const handleSelect = (name: string) => {
setActive(name);
}
return (
<div className='pt-2'>
<div className='flex px-2 flex-col items-start w-full gap-5 min-w-[200px]'>
{navlinks.map((link)=>{
return (<Link to={link.link} className='w-full'>
<div onClick={()=>handleSelect(link.name)} className={`flex flex-col justify-start rounded-[5px] items-start w-full ${active===link.name&&'bg-[#24312F]'} hover:bg-[#24312F] hover:rounded duration-300 p-1`}>
<div className='flex items-center justify-start'>
<img src={link.name} alt="deploy" className='w-12 max-w-xs h-12'/>
<p className=' text-sm '>{link.iconName}</p>
</div>
</div>
</Link>);
})}
return (
<div className='pt-2'>
<div className='flex px-2 flex-col items-start w-full gap-5 min-w-[200px]'>
{navlinks.map((link) => {
return (<Link to={link.link} className='w-full'>
<div onClick={() => handleSelect(link.name)} className={`flex flex-col justify-start rounded-[5px] items-start w-full ${active === link.name && 'bg-[#24312F]'} hover:bg-[#24312F] hover:rounded duration-300 p-1`}>
<div className='flex items-center justify-start'>
<img src={link.name} alt="deploy" className='w-12 max-w-xs h-12' />
<p className=' text-sm '>{link.iconName}</p>
</div>
</div>
</Link>);
})}

{/* <Link to="/deploy">
<div className='flex flex-col justify-center items-center hover:bg-[#24312F] hover:rounded duration-300 p-1'>
Expand Down
50 changes: 47 additions & 3 deletions src/components/Tabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,22 @@ import { dropDown, dropRight } from "../assets";
import { contractSrc, stateSrc } from "../templates/hello";
import AddModal from "./Modal";
import { Link } from "react-router-dom";
import JSZip from "jszip";
import saveAs from "file-saver";
import del from "../assets/delete.svg";
import dload from "../assets/dload.svg";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Tabs = ({ activeContract, setActiveContract, activeFile, setActiveFile }: { activeContract: string, setActiveContract: any, activeFile: string, setActiveFile: any }) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [contracts, setContracts] = useState<any>({})
const [showDeployDropdown, setShowDeployDropdown] = useState<boolean>(false);
const urlParams = new URLSearchParams(window.location.search)
const conName = urlParams.get("conName")
if (conName) {
setActiveContract(conName)
setActiveFile("contract.js")
}

// for the create Contract modal
const [addModal, setAddModal] = useState(false);
Expand Down Expand Up @@ -40,8 +50,24 @@ const Tabs = ({ activeContract, setActiveContract, activeFile, setActiveFile }:
const TabElement = ({ name }: { name: string }) => {
const active = (activeContract === name)

return (<div className="w-full cursor-pointer">
<div className='flex w-full items-center gap-2' onClick={() => { setActiveContract(active ? "" : name); setActiveFile("contract.js") }}>
return (<div className="w-full cursor-pointer relative">
<div className='flex w-full items-center gap-2' onClick={() => {
setActiveContract(active ? "" : name); setActiveFile("contract.js")
const recents = localStorage.getItem("recents")
if (recents) {
const parsed = JSON.parse(recents)
if (parsed.includes(name)) {
parsed.splice(parsed.indexOf(name), 1)
parsed.unshift(name)
localStorage.setItem("recents", JSON.stringify(parsed))
} else {
parsed.unshift(name)
localStorage.setItem("recents", JSON.stringify(parsed))
}
} else {
localStorage.setItem("recents", JSON.stringify([name]))
}
}}>
<img src={active ? dropRight : dropDown} alt="open" />
<span className={` pb-0.5 ${active && "text-[#B4FFA1]"}`}>{name}</span>
</div>
Expand All @@ -59,6 +85,24 @@ const Tabs = ({ activeContract, setActiveContract, activeFile, setActiveFile }:
</div>
</div>
}
<div className="absolute top-0 right-0 flex gap-1 items-center">
<img src={del} width={16} className="" onClick={(e) => {
e.stopPropagation()
const c = { ...contracts }
delete c[name]
setContracts(c)
localStorage.setItem("contracts", JSON.stringify(c))
}} />
<img src={dload} width={22} className="pb-1" onClick={(e) => {
e.stopPropagation()
const zip = new JSZip()
zip.file("contract.js", contracts[name]["contract.js"])
zip.file("state.json", contracts[name]["state.json"])
zip.generateAsync({ type: "blob" }).then(async function (content) {
saveAs(content, `${name}.zip`)
})
}} />
</div>
<hr className="border-t border-white/50 my-4" />
</div>);
}
Expand All @@ -74,7 +118,7 @@ const Tabs = ({ activeContract, setActiveContract, activeFile, setActiveFile }:
)
}
return (
<div className='min-w-[169px] bg-[#3d494780] h-[100vh] flex flex-col gap-5 items-center'>
<div className='min-w-[220px] bg-[#3d494780] h-[100vh] flex flex-col gap-5 items-center'>
<div className="py-3 p-2 text-center bg-[#3D494780] w-full">Your Projects</div>
<button onClick={handleCreateContract} className=" p-2 rounded-[5px] bg-black hover:scale-105 transition-all duration-300 text-white">
+ New Contract
Expand Down
26 changes: 9 additions & 17 deletions src/components/Templates.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@ import { contractSrc as src2, stateSrc as sta2 } from "../templates/db"
import { contractSrc as src3, stateSrc as sta3 } from "../templates/vote"
import { contractSrc as src4, stateSrc as sta4 } from "../templates/event"
import { contractSrc as src5, stateSrc as sta5 } from "../templates/utoken"
import { Link } from "react-router-dom"

const TemplateTab = ({ name, description }: { name: string, description: string }) => {
return (
<div className="bg-white pt-4 pl-6 pb-6 pr-6 h-48 hover:scale-105 transition-all duration-300 rounded-[5px] group">
<h1 className=" pl-3 text-[#616161] pb-2 font-bold ">{name}</h1>
<p className=" pl-3 text-black pb-4 w-72 text-lg" dangerouslySetInnerHTML={{ __html: description }}></p>
<div className="pl-3">
<button className="bg-[#093E49] custom-width flex rounded-[3px] px-2 py-1 hover:w-60 transition-all duration-300 hover:justify-between"
<Link to={`/code?conName=${name}`} className="bg-[#093E49] custom-width flex rounded-[3px] px-2 py-1 hover:w-36 transition-all duration-100 justify-between"
onClick={() => {
let contracts = localStorage.getItem("contracts");
if (!contracts) contracts = "{}";
Expand Down Expand Up @@ -41,7 +42,7 @@ const TemplateTab = ({ name, description }: { name: string, description: string
"state.json": sta4,
};
break;
case "uToken":
case "U-Token":
parsed[name] = {
"contract.js": src5,
"state.json": sta5,
Expand All @@ -54,9 +55,9 @@ const TemplateTab = ({ name, description }: { name: string, description: string

}}
>
<p>Get Started</p>
<div className="min-w-fit">Get Started</div>
<img src={nextArrow} alt="next arrow" />
</button>
</Link>
</div>
</div>
)
Expand All @@ -81,21 +82,12 @@ const Templates = () => {
description: "Efficiently manage <br/> events on the <br/> blockchain"
},
{
name: "Event creation",
description: "Efficiently manage <br/> events on the <br/> blockchain"
},
{
name: "Event creation",
description: "Efficiently manage <br/> events on the <br/> blockchain"
name: "U-Token",
description: "Universal token for Arweave"
},

{
name: "Event creation",
description: "Efficiently manage <br/> events on the <br/> blockchain"
}
]
return (
<div className="overflow-x-auto pb-10 p-2 flex gap-8 max-w-[90%]">
<div className="overflow-x-auto pb-10 p-2 flex gap-8 max-w-[81%] ">
{
templates.map((template) => {
return <TemplateTab
Expand All @@ -104,7 +96,7 @@ const Templates = () => {
description={template.description} />
})
}
<img className="absolute mt-16 mr-5 bg-invert w-10 right-0 " src={horizontal} alt="Scroll" />
<img className="absolute mt-16 mr-5 bg-invert right-0 " src={horizontal} alt="Scroll" />
</div>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
<Router basename="/betterIDE/">
<main className="bg-[#0A1917] text-white h-[100vh] w-full">
<main className="bg-[#0A1917] text-white h-[100vh]">
<ArweaveWalletKit>
<App />
</ArweaveWalletKit>
Expand Down
Loading

0 comments on commit 0518d87

Please sign in to comment.