Skip to content

T
todo-app
Commit c96c5244 by Syed Abdul Rahman
Options

Initial commit

parents
Showing with 723 additions and 0 deletions
.gitignore 0 → 100644
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
```js
export default tseslint.config({
extends: [
// Remove ...tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
],
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default tseslint.config({
plugins: {
// Add the react-x and react-dom plugins
'react-x': reactX,
'react-dom': reactDom,
},
rules: {
// other rules...
// Enable its recommended typescript rules
...reactX.configs['recommended-typescript'].rules,
...reactDom.configs.recommended.rules,
},
})
```
db.json 0 → 100644
{
"todos": [
{
"id": "5250",
"title": "qwer",
"completed": false
},
{
"id": "aeb0",
"title": "qwre",
"completed": false
},
{
"id": "7e99",
"title": "qwer",
"completed": false
},
{
"id": "4dca",
"title": "qwer",
"completed": false
},
{
"id": "2c46",
"title": "qwre",
"completed": false
},
{
"id": "224e",
"title": "qwer",
"completed": false
},
{
"id": "023a",
"title": "qre",
"completed": false
},
{
"id": "91d5",
"title": "qwer",
"completed": false
}
]
}
\ No newline at end of file
eslint.config.js 0 → 100644
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)
index.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TODO APP</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "todo",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"json-server": "^1.0.0-beta.3",
"react": "^19.1.0",
"react-dom": "^19.1.0"
},
"devDependencies": {
"@eslint/js": "^9.25.0",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@vitejs/plugin-react": "^4.4.1",
"eslint": "^9.25.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^16.0.0",
"typescript": "~5.8.3",
"typescript-eslint": "^8.30.1",
"vite": "^6.3.5"
}
}
public/vite.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
src/App.css 0 → 100644
.layout-container {
background-color: #F9F9F9;
background-image: radial-gradient(#D3D3D3 1.2px, transparent 0);
background-size: 4px 4px;
height: 100%;
width: 100%;
display: grid;
place-items: center;
grid-template-columns: 1fr;
}
.todo-container {
box-shadow: rgba(167, 164, 164, 0.226) 1px 1px 10px 2px;
justify-content: center;
background-color: white;
min-height: max(fit-content, 300px);
/* max-width: 70%; */
width: 50%;
overflow-y: auto;
scroll-behavior: smooth;
}
.header-section {
text-align: center;
padding: 1.5rem 0;
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 5px 0px;
font-family: 'Roboto-Bold';
font-size: clamp(1rem,2vw,2rem);
}
.checklist-item {
display: flex;
justify-content: space-between;
max-width: 95%;
margin: 0 auto;
align-items: center;
}
.checklist-item__content {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
cursor: pointer;
}
.checklist-item__title {
font-family: 'Roboto-Light';
font-size: 16px;
padding: 1.5rem 0;
color: rgb(141, 141, 141);
max-width: 90%;
}
.checklist-item__editable-input {
font-family: 'Roboto-Medium';
font-size: 16px;
padding: 0.5rem 1rem;
color: rgb(141, 141, 141);
border: 1px solid rgba(128, 128, 128, 0.425);
max-width: 95%;
align-self: center;
border-radius: 5px;
width: 90%;
}
.strike {
text-decoration: line-through;
}
.checklist-item__remove-btn {
cursor: pointer;
}
.checklist-item__btn-wrapper {
width: 3.5%;
height: 2.6vh;
background-color: rgba(168, 166, 166, 0.664);
border-radius: 50%;
text-align: center;
color: white;
font-family: 'Roboto-Medium';
cursor: pointer;
font-size: 18px;
}
.edit-action-btn {
align-self: center;
}
.custom-checkbox {
width: clamp(0.3rem, 3vw, 1.5rem);
height: 20px;
margin: 1.5rem 0;
}
.divider {
border-color: none !important;
border: 0.2px solid rgba(182, 177, 177, 0.39);
}
.form-group {
margin: 0 auto;
display: flex;
min-width: 100%;
min-height: 50%;
box-sizing: border-box;
gap: 10px;
padding: 15px 1rem;
justify-content: space-between;
}
.form__input {
flex: 3;
height: 2.5rem;
outline: none;
border: 2px solid #cccccca7;
font-family: 'Roboto-Regular';
font-size: 16px;
padding: 0.3rem 0.5rem;
color: rgb(31, 30, 30);
border-radius: 5px;
box-shadow: #2b2b2b21 0 2px 1.5px 0px inset;
max-width: 80%;
}
.form__submit {
flex: 1;
font-size: 16px;
font-family: 'Roboto-Regular';
background-color: white;
border: 2px solid #cccccca7;
border-radius: 5px;
padding: 0.3rem 0.5rem;
cursor: pointer;
}
\ No newline at end of file
src/App.tsx 0 → 100644
import { Fragment, useEffect, useState } from 'react';
import './App.css'
import Modal from './Components/Modal';
function App() {
const [todoList, setTodoList] = useState<any>();
const [newTodo, setNewTodo] = useState<any>('');
const [openModal, setOpenModal] = useState(false);
const [selectedTodo, setSelectedTodo] = useState<any>(null);
const [editingTodoId, setEditingTodoId] = useState<any>(null);
const [editableTitle, setEditableTitle] = useState('');
useEffect(() => {
fetchTodos();
}, [])
const fetchTodos = async () => {
const response = await fetch('http://localhost:3000/todos');
if (!response.ok) {
console.log("Error fetching data")
}
setTodoList(await response.json())
}
const saveTodo = async () => {
try {
if (newTodo !== '' && newTodo) {
await fetch('http://localhost:3000/todos', {
method: 'POST',
body: JSON.stringify({
title: newTodo,
completed: false
})
})
fetchTodos();
}
setNewTodo("")
} catch (error) {
console.log(error, "error in adding todo")
}
}
const toggleTodo = async (todoItem: any,e: any) => {
e.stopPropagation()
console.log(todoItem, "todoItem.completed")
await fetch(`http://localhost:3000/todos/${todoItem.id}`, {
method: 'PATCH',
body: JSON.stringify({ completed: !todoItem.completed })
})
fetchTodos();
}
const onDeleteTodo = (todo: any) => {
setOpenModal(true);
setSelectedTodo(todo)
}
const deleteTodo = async () => {
if (selectedTodo) {
await fetch(`http://localhost:3000/todos/${selectedTodo?.id}`, {
method: "DELETE"
})
fetchTodos();
setOpenModal(false)
}
}
const editTodo = (todoId: any) => {
setEditingTodoId(todoId);
const editableTodo = todoList.find((ele: any) => ele.id === todoId);
setEditableTitle(editableTodo?.title)
}
const onEditCancel = (e: any) => {
setEditingTodoId(null);
setEditableTitle('');
e.stopPropagation()
}
const onSaveEdit = async(e: any, todoId: any) => {
e.stopPropagation();
await fetch(`http://localhost:3000/todos/${todoId}`, {
method: 'PATCH',
body: JSON.stringify({
title: editableTitle
})
});
fetchTodos();
setEditingTodoId(null)
setEditableTitle("")
}
return (
<>
<section className="layout-container">
<div className="todo-container">
<div className="header-section">
{todoList?.length > 0 ? <>You have {todoList?.length} Todos </> : <>No Tasks</>}
</div>
{todoList?.map((ele: any, index: number) => (
<Fragment key={ele.id}>
<div className='checklist-item'>
<div className='checklist-item__content' onClick={() => editTodo(ele.id)}>
<input type='checkbox' checked={ele.completed} className='custom-checkbox' onClick={(e) => e.stopPropagation()} onChange={(e) => toggleTodo(ele,e)} />
{editingTodoId === ele.id ? (
<input type='text' value={editableTitle} className='checklist-item__editable-input' onChange={(e) => setEditableTitle(e.target.value)} />
) : (
<h3 className={`checklist-item__title ${ele.completed ? 'strike' : ''}`} >{ele.title}</h3>
)}
{editingTodoId === ele.id && <span className='edit-action-btn' onClick={(e) => onEditCancel(e)}><img src='../src/assets/images/cancel-svgrepo-com.svg' width={30} /></span>}
{editingTodoId === ele.id && <span className='edit-action-btn' onClick={(e) => onSaveEdit(e, ele.id)}><img src='../src/assets/images/ok-svgrepo-com.svg' width={30} /></span>}
</div>
<div className=''>
<img className='checklist-item__remove-btn' width={40} src='../src/assets/images/close-round-svgrepo-com.svg' onClick={() => onDeleteTodo(ele)} />
</div>
</div>
{index + 1 !== todoList.length && <hr className='divider' />}
</Fragment>
))}
<div className='form-group'>
<input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} className='form__input' placeholder='Enter Item' />
<button className='form__submit' onClick={saveTodo}>
Submit
</button>
</div>
</div>
{openModal &&
<Modal
onCancel={() => setOpenModal(false)}
onDelete={() => deleteTodo()}
/>}
</section>
</>
)
}
export default App;
src/Components/Modal.css 0 → 100644
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(54, 54, 54, 0.788);
backdrop-filter: blur(2px);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
min-height: 20%;
border-radius: 5px;
padding: 1.5rem 1.5rem;
color: rgba(180, 2, 2, 0.836);
box-sizing: border-box;
max-width: 90%;
margin: 0 auto;
}
.modal-content h3 {
font-family: 'Roboto-Regular';
}
.content {
font-family: 'Roboto-Medium';
color: rgb(95, 95, 95);
padding: 1rem 0;
max-width: 80%;
line-height: 150%;
}
.action-btn {
display: flex;
justify-content: end;
gap: 1rem;
}
.action-btn__cancel {
padding: 0.5rem 1.5rem;
cursor: pointer;
font-family: 'Roboto-Medium';
font-size: 16px;
color: rgb(65, 93, 233);
background-color: white;
border: 1px solid rgb(65, 93, 233);
border-radius: 5px;
}
.action-btn__delete {
padding: 0.5rem 1.5rem;
cursor: pointer;
font-family: 'Roboto-Medium';
font-size: 16px;
background-color: white;
color: red;
border: unset;
border: 1px solid rgb(255, 0, 0);
border-radius: 5px;
}
.action-btn__delete:hover {
color: white;
background-color: rgba(229, 13, 13, 0.756);
border: unset;
border: 1px solid rgba(229, 13, 13, 0.756);
}
.action-btn__cancel:hover {
border: unset;
color: white;
background-color: rgba(65, 93, 233, 0.818);
border: 1px solid rgba(65, 93, 233, 0.818);
;
}
\ No newline at end of file
src/Components/Modal.tsx 0 → 100644
import './Modal.css';
const Modal = ({onCancel, onDelete}: any) => {
return (
<div className="modal-overlay">
<div className='modal-content'>
<h3>Delete Todo?</h3>
<p className='content'>Are you sure you want to delete this task? This action cannot be undone.</p>
<div className='action-btn'>
<button className='action-btn__cancel' onClick={onCancel}>Cancel</button>
<button className='action-btn__delete' onClick={onDelete}>Delete</button>
</div>
</div>
</div>
)
}
export default Modal
\ No newline at end of file
src/assets/fonts.css 0 → 100644
@font-face {
font-family: 'Roboto-Medium';
src: url('../assets/fonts/Roboto-Medium.ttf');
}
@font-face {
font-family: 'Roboto-Bold';
src: url('../assets/fonts/Roboto-Bold.ttf');
}
@font-face {
font-family: 'Roboto-Light';
src: url('../assets/fonts/Roboto-Light.ttf');
}
@font-face {
font-family: 'Roboto-Regular';
src: url('../assets/fonts/Roboto-Regular.ttf');
}
src/assets/images/cancel-svgrepo-com.svg 0 → 100644
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg height="87px" width="87px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 507.2 507.2" xml:space="preserve" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <circle style="fill:#F15249;" cx="253.6" cy="253.6" r="253.6"/> <path style="fill:#AD0E0E;" d="M147.2,368L284,504.8c115.2-13.6,206.4-104,220.8-219.2L367.2,148L147.2,368z"/> <path style="fill:#FFFFFF;" d="M373.6,309.6c11.2,11.2,11.2,30.4,0,41.6l-22.4,22.4c-11.2,11.2-30.4,11.2-41.6,0l-176-176 c-11.2-11.2-11.2-30.4,0-41.6l23.2-23.2c11.2-11.2,30.4-11.2,41.6,0L373.6,309.6z"/> <path style="fill:#D6D6D6;" d="M280.8,216L216,280.8l93.6,92.8c11.2,11.2,30.4,11.2,41.6,0l23.2-23.2c11.2-11.2,11.2-30.4,0-41.6 L280.8,216z"/> <path style="fill:#FFFFFF;" d="M309.6,133.6c11.2-11.2,30.4-11.2,41.6,0l23.2,23.2c11.2,11.2,11.2,30.4,0,41.6L197.6,373.6 c-11.2,11.2-30.4,11.2-41.6,0l-22.4-22.4c-11.2-11.2-11.2-30.4,0-41.6L309.6,133.6z"/> </g>
</svg>
\ No newline at end of file
src/assets/images/close-round-svgrepo-com.svg 0 → 100644
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg fill="#c9c9c9" width="100px" height="100px" viewBox="-1.63 -1.63 23.66 23.66" xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" stroke="#c9c9c9" stroke-width="0.00020400000000000003" transform="matrix(-1, 0, 0, -1, 0, 0)rotate(90)">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.040799999999999996"/>
<g id="SVGRepo_iconCarrier">
<path d="M16.417 10.283A7.917 7.917 0 1 1 8.5 2.366a7.916 7.916 0 0 1 7.917 7.917zm-6.804.01 3.032-3.033a.792.792 0 0 0-1.12-1.12L8.494 9.173 5.46 6.14a.792.792 0 0 0-1.12 1.12l3.034 3.033-3.033 3.033a.792.792 0 0 0 1.12 1.119l3.032-3.033 3.033 3.033a.792.792 0 0 0 1.12-1.12z"/>
</g>
</svg>
\ No newline at end of file
src/assets/images/ok-svgrepo-com.svg 0 → 100644
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="81px" height="81px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier">
<path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#4CAF50"/>
<path d="M738.133333 311.466667L448 601.6l-119.466667-119.466667-59.733333 59.733334 179.2 179.2 349.866667-349.866667z" fill="#CCFF90"/>
</g>
</svg>
\ No newline at end of file
src/index.css 0 → 100644
@import '../src/assets/fonts.css';
html,
body {
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
}
#root {
height: 100%;
width: 100%;
}
\ No newline at end of file
src/main.tsx 0 → 100644
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
src/vite-env.d.ts 0 → 100644
/// <reference types="vite/client" />
tsconfig.app.json 0 → 100644
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}
tsconfig.json 0 → 100644
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}
tsconfig.node.json 0 → 100644
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}
vite.config.ts 0 → 100644
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment