How to appease Lint rules without breaking the code

sebastiank · August 16, 2023, 8:54pm

Hi Everyone,

So I’m building an app for the community, and I’m using the recommended NC Lint rules, but I keep getting a “error Expected ‘===’ and instead saw ‘==’ eqeqeq”. When I appease Lint and change the equation to ‘===’ it brakes my code. Yes, I am aware that ‘===’ means compare type. The problem is that its comparing two string values but they types don’t match??

So the JavaScript line Lint does not like is, for the a function in the UserSettings gui script.

github.com

ksainc/integration_ews/blob/8f4d0319e70b064a45832d8dfc404190422c98b6/src/components/UserSettings.vue#L725


      
          				.catch((error) => {
          					showError(
          						t('integration_ews', 'Failed to save preferences')
          						+ ': ' + error.response.request.responseText
          					)
          				})
          				.then(() => {
          				})
          		},
          		changeContactCorrelation(roid, loid) {
          			const cid = this.establishedContactCorrelations.findIndex(i => i.roid == roid)
          
          
			if (cid === -1) {
          				this.establishedContactCorrelations.push({ id: null, roid, loid, type: 'CC', action: 'C' })
          			} else {
          				this.establishedContactCorrelations[cid].loid = loid
          				this.establishedContactCorrelations[cid].action = 'U'
          			}
          		},
          		changeEventCorrelation(roid, loid) {
          			const cid = this.establishedEventCorrelations.findIndex(i => i.roid == roid)

The “roid” is a 64+ character string value, that comes from the same page, from a NcActionRadio event, on this line,

github.com

ksainc/integration_ews/blob/8f4d0319e70b064a45832d8dfc404190422c98b6/src/components/UserSettings.vue#L146


      
          									<NcActionButton @click="clearContactCorrelation(ritem.id)">
          										<template #icon>
          											<CloseIcon />
          										</template>
          										Clear
          									</NcActionButton>
          									<NcActionRadio v-for="litem in availableLocalContactCollections"
          										:key="litem.id"
          										:disabled="establishedContactCorrelationDisable(ritem.id, litem.id)"
          										:checked="establishedContactCorrelationSelect(ritem.id, litem.id)"
          										@change="changeContactCorrelation(ritem.id, litem.id)">
          										{{ litem.name }}
          									</NcActionRadio>
          								</NcActions>
          							</li>
          						</ul>
          						<div v-else-if="availableRemoteContactCollections.length == 0">
          							{{ t('integration_ews', 'No contacts collections where found in the connected account.') }}
          						</div>
          						<div v-else>
          							{{ t('integration_ews', 'Loading contacts collections from the connected account.') }}

The “this.establishedContactCorrelations” is a array with 6 fields, one of them being “roid”, a 64+ string character value, that is pulled from a PHP function here:

github.com

ksainc/integration_ews/blob/8f4d0319e70b064a45832d8dfc404190422c98b6/lib/Service/CoreService.php#L518


      
          
          
	/**
          	 * Retrieves collection correlations for all modules
          	 * 
          	 * @since Release 1.0.0
          	 * 
          	 * @param string $uid	nextcloud user id
          	 * 
          	 * @return array of collection correlation(s) and attributes
          	 */
          	public function fetchCorrelations(string $uid): array {
          
          
		// construct response object
          		$response = ['ContactCorrelations' => [], 'EventCorrelations' => [], 'TaskCorrelations' => []];
          		// retrieve local collections
          		if ($this->ConfigurationService->isContactsAppAvailable()) {
          			$response['ContactCorrelations'] = $this->CorrelationsService->findByType($uid, 'CC');
          		}
          		if ($this->ConfigurationService->isCalendarAppAvailable()) {
          			$response['EventCorrelations'] = $this->CorrelationsService->findByType($uid, 'EC');
          		}

So how do I appease Lint and not break the code?

FYI, I am totally aware I am probably missing something basic and will look like a donkey after I read the answer.

christianlupus · August 17, 2023, 7:44am

If I am correct (just a quick glance over the code), this.establishedContactCorrelations is an object in JS with keys like ContactCorrelations. Is that correct and intended?

If yes, the findIndex is just wring: It is intended for use with arrays not objects AFAIK. You will have to use other means like iterating over the keys or entries.

Unfortunately, I will be out soon so I can only help tomorrow again.

sebastiank · August 24, 2023, 8:52pm

Hi @christianlupus ,

Thank for the inspiration, your comment pointed me in the right direction. I completely, neglected the mechanics of data flow between the PHP and Javascript. Although the data is in a array in the PHP code it then gets converted to JSON, which is then converted to an Object in Javascript.

So the easiest solution was just to type cast the variables, which then let me use the ‘===’ type cast equals.

this.establishedContactCorrelations.findIndex(i => String(i.roid) === String(roid))

Thank you!
Sebastian

christianlupus · August 25, 2023, 4:27am

Have you verified that this.establishedContactCorrelations is an array? I would be surprised from the static code analysis and the linter will have no clue as it is unaware of the PHP part involved.