freeCodeCamp/classroom

Refactor variable names in the file that handles the dashboard page to be more intuitive

ngillux opened this issue · 3 comments

[ISSUE RESERVED FOR CTI STUDENT(S)]


Issue Context:
There is a file called [id].js found in pages/dashboard/v2/[id].js; this file contains the logic behind the dashboard page when a teacher clicks ‘View Class.’

Screenshot 2023-10-15 at 1 00 37 PM

[id].js uses utility functions from an external file called api_processor.js which handles API processing functionality; we currently use mock student data (mock-json-server/fccdata.json) which we make an API call to, and we make an API call to FreeCodeCamp’s (FCC) curriculum data.

For current and future contributors, it may be important to understand how [id].js and api_processor.js are connected to one another, one way of doing this is ensuring the variable names are meaningful.


Issue Objective:
There are 4 variables in [id].js that could be renamed to be more specific.

  • timestamps
  • superblockURLS
  • superblockJSONS
  • dashboardObjs

Navigate to pages/v2/dashboard/v2/[id].js and update the variables to be more meaningful based on what they represent / their behavior. Feel free to update other variable names that are not mentioned on the list if they seem obscure / could use a more relevant name.

Variable name:
timestamps
Variable holds:
An array of objects (i.e., [ {}, {}, …etc]), where each object has 2 attributes; ‘name’ and ‘timestamps’.

The ‘name’ attribute is the student’s email, and the ‘timestamps’ attribute as an array of timestamps (these are milliseconds, as we have logic which eventually turns them into Dates using JavaScript’s Date.now(), see the components/studentActivity.js file if you’re curious about more details).

Here is an example of what is stored in timestamps:
[ { name: 'student[A]@gmail.com', completedTimestamps: [ 1475094716730, 1537207306322, 98448684, 98448643284, 47664591 ] }, { name: 'student[B]@gmail.com', completedTimestamps: [ 98448684, 98448643284, 47664591 ] } ]


Variable name:
superblockURLS
Variable holds:
Holds an array of strings which are URL endpoints with information specific to a certificate/superblock. For example, the certificate/superblock data for Responsive Web Design can be found at https://www.freecodecamp.org/curriculum-data/v1/2022/responsive-web-design.json.

The logic that derives these URLs requires the data from FCC’s curriculum endpoint and our database (‘Classroom’ table, specifically the ‘fccCertifications’ column, run npx prisma studio and navigate to Classroom for more details) which is updated when a teacher first creates a class (view components/ClassInviteTable.js and components/modal.js if you’re curious for more details).

Here is an example of what is stored in superblockURLS.

[
  'https://www.freecodecamp.org/curriculum-data/v1/2022/responsive-web-design.json',
  'https://www.freecodecamp.org/curriculum-data/v1/quality-assurance.json'
]

Variable name:
superblockJSONS
Variable holds:
Stores an array os objects, where each object’s key is the certificate/superblock name, and the value is an object with the details for the certificate/superblock.

Here is an example of what is stored in superblockJSONS:

[
  {
    '2022/responsive-web-design': { intro: [Array], blocks: [Object] }
  },
  { 'quality-assurance': { intro: [Array], blocks: [Object] } }
]

Variable name:
dashboardObjs
Variable holds:
An array of objects, where each object holds data on a specific certificate/superblock. The index of where the object is in the array relates to the fccCertificates array.

Here is an example of what is stored in superblockJSONS:

[
  [
    {
      name: 'Learn HTML by Building a Cat Photo App',
      selector: 'learn-html-by-building-a-cat-photo-app',
      dashedName: 'learn-html-by-building-a-cat-photo-app',
      allChallenges: [Array],
      order: 0
    },
    {
      name: 'Learn Basic CSS by Building a Cafe Menu',
      selector: 'learn-basic-css-by-building-a-cafe-menu',
      dashedName: 'learn-basic-css-by-building-a-cafe-menu',
      allChallenges: [Array],
      order: 1
    },
]

Expected behavior after refactor:
The UI will remain the same, however, the code will be more intuitive for current / future contributors.

I want to work on this issue

utsab commented

We are assigning this issue to one of the Computing Talent Initiative (CTI) teams. Sorry @Shivam-sahni, for the month of November, we will have a number of CTI students contribute to this project, and we are reserving issues for them.

I'm working on this