job-board-notifications/job-notifier/popup.js

// popup.js

var TITLE_ORDER = [
  'Full-Stack Engineer',
  'AI Engineer',
  'Data Scientist',
  'Front-End Engineer',
];

var PROFESSION_BADGES = {
  'Full-Stack Engineer': { label: 'FS', color: '#4C6EF5' },
  'AI Engineer': { label: 'AI', color: '#9C36B5' },
  'Data Scientist': { label: 'DS', color: '#0CA678' },
  'Front-End Engineer': { label: 'FE', color: '#E8590C' },
};

function sortJobsById(jobs) {
  return jobs.slice().sort(function (a, b) {
    return (parseInt(b.id, 10) || 0) - (parseInt(a.id, 10) || 0);
  });
}

function renderJob(jobList, job, newBadgeUntil, now) {
  var jobElement = document.createElement('div');
  jobElement.className = 'job-item';

  var startInfo = job.posted_date || '';
  var postedAgo = job.posted_ago || '';
  var companyName =
    typeof job.company === 'object'
      ? (job.company && job.company.name) || 'Company'
      : job.company || 'Company';

  var isNew =
    newBadgeUntil && newBadgeUntil[job.id] && newBadgeUntil[job.id] > now;
  var badgeHtml = '';
  if (isNew) {
    var profession = job.professionalTitle || 'Full-Stack Engineer';
    var badgeInfo = PROFESSION_BADGES[profession] || {
      label: 'NEW',
      color: '#555555',
    };
    badgeHtml =
      '<span class="new-badge" style="background-color:' +
      badgeInfo.color +
      '">' +
      badgeInfo.label +
      ' \u00B7 NEW</span>';
  }

  jobElement.innerHTML =
    '<div class="job-title">' +
    badgeHtml +
    job.title +
    '</div>' +
    '<div class="job-company">' +
    companyName +
    '</div>' +
    '<div class="job-location">' +
    (job.location || 'Remote') +
    '</div>' +
    '<div class="job-posted">' +
    startInfo +
    (postedAgo ? ' - ' + postedAgo : '') +
    '</div>';

  jobElement.addEventListener('click', function () {
    var url = job.url || 'https://app.andela.com/job-postings/' + job.id;
    chrome.tabs.create({ url: url });
  });

  jobList.appendChild(jobElement);
}

function sortWithNewFirst(jobs, newBadgeUntil, now) {
  return jobs.slice().sort(function (a, b) {
    var aNew =
      newBadgeUntil && newBadgeUntil[a.id] && newBadgeUntil[a.id] > now ? 1 : 0;
    var bNew =
      newBadgeUntil && newBadgeUntil[b.id] && newBadgeUntil[b.id] > now ? 1 : 0;
    if (aNew !== bNew) return bNew - aNew;
    return (parseInt(b.id, 10) || 0) - (parseInt(a.id, 10) || 0);
  });
}

function updateUI(data) {
  var lastAndelaJobs = data.lastAndelaJobs || [];
  var lastAndelaUpdated = data.lastAndelaUpdated;
  var totalAndelaMatching = data.totalAndelaMatching || 0;
  var newBadgeUntil = data.newBadgeUntil || {};
  var now = Date.now();

  document.getElementById('jobCount').textContent =
    totalAndelaMatching + ' open opportunities';

  var jobList = document.getElementById('jobList');
  jobList.innerHTML = '';

  if (lastAndelaJobs.length === 0) {
    jobList.innerHTML =
      '<div class="no-jobs">No jobs found yet. Click "Check Now" to scan for jobs.</div>';
    var status0 = document.getElementById('status');
    status0.textContent = lastAndelaUpdated
      ? 'Last checked: ' + new Date(lastAndelaUpdated).toLocaleString()
      : 'Not checked yet';
    return;
  }

  var opportunities = lastAndelaJobs.filter(function (j) {
    return j.kind === 'opportunity';
  });
  var applied = sortJobsById(
    lastAndelaJobs.filter(function (j) {
      return j.kind !== 'opportunity';
    }),
  );

  if (opportunities.length) {
    var oppHeading = document.createElement('div');
    oppHeading.className = 'section-heading section-heading-opportunities';
    oppHeading.textContent = 'Open Opportunities';
    jobList.appendChild(oppHeading);

    TITLE_ORDER.forEach(function (title) {
      var group = sortWithNewFirst(
        opportunities.filter(function (j) {
          return (j.professionalTitle || 'Full-Stack Engineer') === title;
        }),
        newBadgeUntil,
        now,
      );
      if (!group.length) return;

      var badgeInfo = PROFESSION_BADGES[title] || { color: '#C9971C' };
      var titleHeading = document.createElement('h3');
      titleHeading.className = 'profession-heading';
      titleHeading.innerHTML =
        '<span class="profession-dot" style="background-color:' +
        badgeInfo.color +
        '"></span>' +
        title;
      jobList.appendChild(titleHeading);

      group.slice(0, 10).forEach(function (job) {
        renderJob(jobList, job, newBadgeUntil, now);
      });
    });
  }

  if (applied.length) {
    var appliedHeading = document.createElement('div');
    appliedHeading.className = 'section-heading section-heading-applied';
    appliedHeading.textContent = 'Applied';
    jobList.appendChild(appliedHeading);
    applied.slice(0, 10).forEach(function (job) {
      renderJob(jobList, job, newBadgeUntil, now);
    });
  }

  var status = document.getElementById('status');
  status.textContent = lastAndelaUpdated
    ? 'Last checked: ' + new Date(lastAndelaUpdated).toLocaleString()
    : 'Not checked yet';
}

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('checkNow').addEventListener('click', function () {
    chrome.runtime.sendMessage({ action: 'checkNow' }, function () {});
  });

  document
    .getElementById('openSettings')
    .addEventListener('click', function () {
      chrome.tabs.create({ url: 'settings.html' });
    });

  chrome.storage.local.get(
    [
      'lastAndelaJobs',
      'lastAndelaUpdated',
      'totalAndelaMatching',
      'newBadgeUntil',
    ],
    updateUI,
  );

  chrome.storage.onChanged.addListener(function (changes, areaName) {
    if (
      areaName === 'local' &&
      (changes.lastAndelaJobs ||
        changes.lastAndelaUpdated ||
        changes.totalAndelaMatching ||
        changes.newBadgeUntil)
    ) {
      chrome.storage.local.get(
        [
          'lastAndelaJobs',
          'lastAndelaUpdated',
          'totalAndelaMatching',
          'newBadgeUntil',
        ],
        updateUI,
      );
    }
  });
});