**مهارت‌های لازم:** + آشنایی با `ReactJS` + آشنایی با `Redux` + کدخوانی -------------------------------------------------- محمد و جواد و مهدی همیشه برای اینکه می‌توانند از پرداخت تومن استفاده کنند خیلی خوشحال هستند آنها می‌خواهند دفترچه یادداشتی با `react` و `redux` درست کنند که خاطرات استفاده از پرداخت تومن را در آن یادداشت کنند.  # پروژه اولیه پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/bgxgOsADJL/toman-booklet.zip) دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است. ``` 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 برنامه بدین صورت است: ``` js { 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` در فایل ارسالی نباشد.