مهارت‌های لازم:

• آشنایی با ReactJS
• آشنایی با Redux
• کدخوانی

محمد و جواد و مهدی همیشه برای اینکه می‌توانند از پرداخت تومن استفاده کنند خیلی خوشحال هستند آنها می‌خواهند دفترچه یادداشتی با react و redux درست کنند که خاطرات استفاده از پرداخت تومن را در آن یادداشت کنند.

پروژه اولیه

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

toman-booklet
├── public
│   ├── static
│   │   ├── image
│   │   │   ├── document.png
│   │   │   ├── folder-horizontal.png
│   │   │   ├── toggle-small-expand.png
│   │   │   └── toggle-small.png
│   │   └── style.css
│   └── index.html
├── src
│   ├── actions
│   │   └── index.js
│   ├── containers
│   │   ├── Editor.js
│   │   └── Node.js
│   ├── reducers
│   │   └── index.js
│   ├── generateTree.js
│   └── index.js
├── package.json
└── pnpm-lock.yaml

راه‌اندازی پروژه

برای اجرای پروژه، باید NodeJS و npm را از قبل نصب کرده باشید.

• ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
• در پوشه‌ی toman-booklet ، دستور npm install را برای نصب نیازمندی‌ها اجرا کنید.
• در همین پوشه، دستور npm start را برای راه‌اندازی پروژه اجرا کنید.
• پس از انجام موفق این مراحل، با مراجعه به آدرس http://localhost:3000/ می‌توانید نتیجه را ببینید.

جزئیات

طراحی state برنامه بدین صورت است:

{
	editNode: null or nodeId,
	nodes: {
		nodeId: {
			id: Int or String,
			name: String,
			content: String,
			childIds: Array(nodes),
			isDir: true or false
		}, ...
	}
}

• editNode: مشخص کننده id فایل در حال تغییر است. و یا null می‌باشد.
• nodes[nodeID].id: رشته یا عددی که id فایل یا پوشه را مشخص می‌کند.
• nodes[nodeID].name: نام فایل یا پوشه
• nodes[nodeID].content: محتوای فایل را نگه ‌میدارد در حالت پوشه یک رشته خالی است.
• nodes[nodeID].childIds: آرایه‌ای از id فایل‌ها و پوشه‌ها که زیرمجموعه پوشه فعلی هستند این مورد برای فایل یک آرایه خالی است.
• nodes[nodeID].isDir: اگر پوشه باشد true و در صورت فایل بودن مقدار false می‌گیرد.

در این پروژه دو قسمت کلی وجود دارد وجود دارد:

• Node: درخت فایل‌ها و پوشه‌ها را مشخص می‌کند و برای هر پوشه امکان ایجاد یک پوشه جدید زیرمجموعه و یا فایل زیرمجموعه وجود دارد و می‌توان پوشه را حذف کرد. برای هر فایل نیز امکان حذف فایل وجود دارد.
• Editor: اگر روی نام یک فایل کلیک شود در این مولفه امکان تغییر نام و محتوای فایل وجود دارد و با زدن دکمه ذخیره تغییرات ذخیره می‌شود.

داخل فایل actions/index.js اطلاعات مربوط به action ها قرار دارد. در این پروژه شش نوع action (عملیات) وجود دارد:

• CREATE_NODE: با اجرای این action فایل یا پوشه جدیدی ساخته شود. پدر و فرزندی در اینجا تعیین نمی‌شود.
• ADD_CHILD: رابطه پدر فرزندی برای دو id تعیین می‌شود.
• REMOVE_CHILD: مقدار id یک پوشه را میگیرد و از بین id فرزندانش childId را حذف می‌کند.
• DELETE_NODE: مقدار id یک فایل یا پوشه را می‌گیرد و آنرا و تمام زیر مجموعه‌های آنرا حذف می‌کند. اثرات id در پدر نباید از بین برود و حذف این اثرات با DELETE_CHILD انجام می‌شود.
• EDIT_NODE: امکان تغییر نام و محتوای درون فایل را فراهم می‌کند.
• SET_EDIT_NODE: فایل را به عنوان فایل فعلی برای تغییر انتخاب می‌کند.

طبق تعریف انجام شده بایستی action‌ها عمل کنند (reducer به درستی پیاده سازی شود) و همچنین موارد زیر پیاده سازی شود.

• با کلیک بر روی 📄 فایل جدیدی به پوشه اضافه شود.
• با کلیک بر روی 📂 پوشه جدیدی به پوشه جاری اضافه شود.
• با کلیک بر روی × فایل یا پوشه و تمامی فرزندان حذف شود.
• با کلیک بر روی نام فایل، به عنوان فایل فعلی مورد تغییر انتخاب شود.
• با تغییر نام و محتوای فایل و ذخیره آن تغییرات اعمال شود.

این تغییرات با استفاده از action ها انجام می‌گیرد.

نکات

• شما تنها مجاز به اعمال تغییر در فایل‌های Editor.js، Node.js، reducers/index.js هستید.
• پس از اعمال تغییرات، پروژه را zip کرده و ارسال کنید. دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.