At the end of week-6, I have refactored move.js of the designer section partially and also completed the refactoring work for 2 other files(init.js and page.js). Since there were no reviews by then, I started refactoring rest of the code of move.js.
I have completed the refactoring of move.js by Tuesday(i.e. 16th July). Here I just need to replicate the changes which were similar to the work already done and mentioned in the blog post for week-6. Later this week, I have written and posted the blog posts for week-5 and week-6 which were due from a long time.
Once I was done with the refactoring work and documentation work, I have informed about these things to my mentor Isaac Bennetch and shared the relevant links with him. I have also asked for the reviews from Deven Bansod and Saksham Gupta.
By the time, I have also refactored other file, history.js. Devend Bansod pointed out the similar mistake which I have made in the phase-1 work, thus I need to make the similar changes over here too.
At this point, we have completed the refactoring work at least once(waiting for the reviews from the mentors). Also during this waiting, I double checked the syntax's which were mentioned in the blog post for week-6 and checked if all the changes made are good to go or not.
Rather than waiting for the reviews, we started working on one of the issues mentioned for the phase-3 work. The issue was “Designer should remember expanded/collapsed state”. For this, the proposed solution(in my GSoC proposal) was to use the localStorage(Stores data with no expiration date, and up to 5MB per origin). I started reading about the localStorage in a bit detail, during this I came across a doubt: Difference between window.localStorage VS localStorage. An article on Stack OverFlow has this solution which resolved my doubt.
Once I was aware of the working of the localStorage, I started searching that how and where do I need to make changes such that this issue can be resolved. For this I started a local server and opened the designer section for one the local database available. On the designer section of that database, there are different expanded and collapsed states like:
Here the arrows on the top left of each of the table represents the expanded/collapsed state.
“>” denotes Collapsed state
“v” denotes Expanded state
I inspected these icons on the browser and get to know the id associated with these. With help of this id, I tracked(using the id: “id_hide_tbody_”) the relevant code from where the job for expanding and collapsing is handled(read and observed the code around this id. Also, I confirmed this by printing a few things using console.log()). Currently, my next job to resolve this issue is to figure out how and where I can use the localStorage over here.
This is the code snippet related to the section from where the expanding and collapsing is done:
Summary of work related to the phase-2 is:
Commits in the following PR’s:
- https://github.com/phpmyadmin/phpmyadmin/pull/15378
- https://github.com/phpmyadmin/phpmyadmin/pull/15382
- https://github.com/phpmyadmin/phpmyadmin/pull/15345
- https://github.com/phpmyadmin/phpmyadmin/pull/15339
- https://github.com/phpmyadmin/phpmyadmin/pull/15318
Blog post other than this are:
- https://medium.com/@ikurimohit/gsoc-pma-week-5-fafb4c865e2a
- https://medium.com/@ikurimohit/gsoc-pma-week-6-31cba43a775a
Other than this as informed, I am working on the issue #12286 which is “Designer should remember expanded/collapsed state”. Also since there are still 2 more days remaining for the phase-2 coding period, I will update the work for that in this blog only.
UPDATE FOR LAST 2 WORKING DAYS OF PHASE-2:
As informed, I was trying to resolve issue #12286. For this I have opened a PR as of now. For this, I need to go through a few of the articles related to the localStorage so that I could know about its syntax and its other properties. At first I got stuck at a lot of points but later on, things started making sense and I was able to track what happens first(I need to print a lot of things and track them so that I could know which function is called upon a particular action). There is a function “smallTab” from where all the expanding and collapsing is done. This function was called using AJAX calls and that is where I stored data in the localStorage. To retain the state, I restored the data stored in the localStorage in the main function of the move.js file. To make sure this works,I printed a lot of things on the console and checked them multiple times but I am still unable to figure out what’s the exact issue here. For once, I have opened this PR so that if I am unable to figure out what’s the issue, someone from the community can point it out.